Focus disorder problem when developing TV in Flutter

1. Refer to the article
Flutter Basics - Use of Focus Components: https://www.cnblogs.com/lemos/p/16710210.html
Flutter's Keyboard Component Series - FocusWidget: https://juejin.cn/post/7128007713501478920
Flutter Getting Started (28): Detailed Explanation of FocusNode of Flutter Components: https://www.jianshu.com/p/f02ebc9ab004
Flutter Forced to Obtain Focus: https://blog.csdn.net/kuanxu/article/details/122062514
Flutter Buttons Event monitoring RawKeyboardListener: https://blog.csdn.net/xyh256/article/details/120731971 Flutter TV Android
development skills detailed tutorial: http://www.45fan.com/article.php?aid=1DjvdvtIfP6ajkHd#_lab2_3_0
The problem I encountered is that when using the touch screen on a mobile phone, the focus problem is not so obvious. If you press the button on the TV, the focus often goes to an unknown place. When I actually develop a requirement, the page except for some inherent The clickable control also has three ListViews. Items of the ListView can be selected by the focus. When switching, the focus often moves to an unknown place. The following methods can be used to solve the problem. The following is a brief solution code:

FocusNode focusNode1 = FocusNode();
Widget _loadCityList1Widget() {
    
    
    return Expanded(
        flex: nodeListFocusIndex == 0 ? 2 : 1,
        child: Focus(
          focusNode: focusNode1,
          onFocusChange: (focus) {
    
    
            if (focus) {
    
    
              _switchListFocus(0);
              focusNode1.children.first.requestFocus();//强制第一个节点获取焦点
            }
          },
          child: ListView.builder(
              itemCount: nodeList.length,
              itemBuilder: (context, index) {
    
    
                var name = nodeList.elementAt(index).cityName;
                return Container(
                  margin: const EdgeInsets.only(top: 27.5),
                  decoration: BoxDecoration(
                      color: node1ListSelectIndex == index
                          ? ColorStore.colorWhite_10
                          : Colors.transparent),
                  child: LineItemWidget(
                    itemIndex: index,
                    child: _loadText(name),
                    onPressed: () {
    
    
                      setState(() {
    
    
                        node1ListSelectIndex = index;
                      });
                    },
                  ),
                );
              }),
        ));
  }

Guess you like

Origin blog.csdn.net/Mr_Tony/article/details/128978816