我只想让 TextField 移动焦点

发布于 2025-01-15 16:48:58 字数 3424 浏览 4 评论 0原文

Flutter Web:

我只想让 TextField 移动焦点。

向下键: aaa > bbb> ccc> ddd

向上键: ddd > ccc> bbb> aaa

此示例的结果从 a 到 c 。 我想覆盖文本字段前面的两个图标的焦点。

  1. 如何将焦点仅移动到 TextField?
  2. onKey:焦点节点
    • 您能看出哪个 TextField 获得焦点吗?

我想要只有 TextField 才能移动焦点。

    class TextBlockSample extends StatefulWidget {
      const TextBlockSample({Key? key}) : super(key: key);
    
      @override
      State<TextBlockSample> createState() => _TextBlockSampleState();
    }
    
    class _TextBlockSampleState extends State<TextBlockSample> {
      late List<TextEditingController> _textControllers;
      late List<FocusNode> _textFocusNodes;
      List<String> users = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
      int _currentFieldindex = 0;    
      @override
      void initState() {
        _textControllers =
            List.generate(5, (index) => TextEditingController(text: users[index]));
        _textFocusNodes = List.generate(5, (index) => FocusNode());
        super.initState();
      }    
      @override
      void dispose() {
        _textControllers.map((e) => e.dispose()).toList();
        _textFocusNodes.map((e) => e.dispose()).toList();
        super.dispose();
      }    
      @override
      Widget build(BuildContext context) {
        return Focus(
          onKey: (FocusNode focusNode, RawKeyEvent event) {
            focusNode.unfocus();
            int _focusIndex =
                _textFocusNodes.indexWhere((element) => element.hasFocus);    
            if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
              focusNode.requestFocus(_textFocusNodes[_focusIndex + 1]);   
             return KeyEventResult.handled;
            }
            if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
              focusNode.requestFocus(_textFocusNodes[_focusIndex - 1]);
            }    
            return KeyEventResult.ignored;
          },
          child: FocusScope(
            child: Container(
              child: Column(
                children:
                    users.mapIndexed((index, user) => inputText(index)).toList(),
              ),
            ),
          ),
        );
      }    
      Widget inputText(int index) {
        return Container(
          height: 60,
          width: 500,
          child: Row(
            children: [
              IconButton(
                icon: const Icon(Icons.star),
                onPressed: () {},
              ),
              IconButton(
                icon: const Icon(Icons.label_important_outline),
                onPressed: () {},
              ),
              Container(
                width: 300,
                height: 50,
                child: TextFormField(
                  controller: _textControllers[index],
                  focusNode: _textFocusNodes[index],
                  textInputAction: TextInputAction.next,
                  onChanged: (v) {
                    print('changed:$v');
                  },
                  onTap: () {
                    _currentFieldindex = index;
                  },
                ),
              )
            ],
          ),
        );
      }
    }

Flutter Web:

I want only the TextField to move the focus.

down key: aaa > bbb > ccc > ddd

up key: ddd > ccc > bbb > aaa

The result for this sample goes from a to c .
I want to override the focus of the two icons in front of the textfield.

  1. How to move focus to TextField only?
  2. onKey: focusNode
    • Can you tell which TextField is focused?

I want only the TextField to move the focus.

    class TextBlockSample extends StatefulWidget {
      const TextBlockSample({Key? key}) : super(key: key);
    
      @override
      State<TextBlockSample> createState() => _TextBlockSampleState();
    }
    
    class _TextBlockSampleState extends State<TextBlockSample> {
      late List<TextEditingController> _textControllers;
      late List<FocusNode> _textFocusNodes;
      List<String> users = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
      int _currentFieldindex = 0;    
      @override
      void initState() {
        _textControllers =
            List.generate(5, (index) => TextEditingController(text: users[index]));
        _textFocusNodes = List.generate(5, (index) => FocusNode());
        super.initState();
      }    
      @override
      void dispose() {
        _textControllers.map((e) => e.dispose()).toList();
        _textFocusNodes.map((e) => e.dispose()).toList();
        super.dispose();
      }    
      @override
      Widget build(BuildContext context) {
        return Focus(
          onKey: (FocusNode focusNode, RawKeyEvent event) {
            focusNode.unfocus();
            int _focusIndex =
                _textFocusNodes.indexWhere((element) => element.hasFocus);    
            if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
              focusNode.requestFocus(_textFocusNodes[_focusIndex + 1]);   
             return KeyEventResult.handled;
            }
            if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
              focusNode.requestFocus(_textFocusNodes[_focusIndex - 1]);
            }    
            return KeyEventResult.ignored;
          },
          child: FocusScope(
            child: Container(
              child: Column(
                children:
                    users.mapIndexed((index, user) => inputText(index)).toList(),
              ),
            ),
          ),
        );
      }    
      Widget inputText(int index) {
        return Container(
          height: 60,
          width: 500,
          child: Row(
            children: [
              IconButton(
                icon: const Icon(Icons.star),
                onPressed: () {},
              ),
              IconButton(
                icon: const Icon(Icons.label_important_outline),
                onPressed: () {},
              ),
              Container(
                width: 300,
                height: 50,
                child: TextFormField(
                  controller: _textControllers[index],
                  focusNode: _textFocusNodes[index],
                  textInputAction: TextInputAction.next,
                  onChanged: (v) {
                    print('changed:$v');
                  },
                  onTap: () {
                    _currentFieldindex = index;
                  },
                ),
              )
            ],
          ),
        );
      }
    }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文