如何防止 TextField 内的 IconButton 在按下按钮时聚焦于文本字段？

Question

这是我的脚手架内文本字段的代码：

child: TextField(
  obscureText: _obscureText,
  controller: myController2,
  focusNode: myFocusNode2,
  textInputAction: TextInputAction.done,
  onSubmitted: (value){
    myFocusNode2.unfocus();
    _loginMethod();
  },
  decoration: InputDecoration(
    labelText: "Password",
    border: OutlineInputBorder(),
    suffixIcon: IconButton(
      icon: Icon(_obscureText ? Icons.visibility_off: Icons.visibility),
      onPressed: (){
        setState(() {
          _obscureText = !_obscureText;
        });
        Timer.run(() => myFocusNode2.unfocus());
      },
    )
  ),
),

我现在所拥有的可以工作，但根本不干净。大多数情况下，文本字段会聚焦一秒钟，然后 .unfocus() 在延迟后将其取消聚焦，因此我得到了键盘弹出然后返回的跳跃效果。只有几次文本字段永远不会获得焦点，我不明白为什么。

有没有办法确保 IconButton 在按下时永远不会聚焦于文本字段？

Answer 1

我只能想到3个解决方案，虽然不是完美的，但只是完成工作

1-使用 focusNode 和计时器

将 foucsNode 链接到文本文件后，按钮功能可能是这样的

          onPressed: () {
            Timer.periodic(Duration(microseconds: 1), (_) {
              focusNode.unfocus();
            });
            //Write your code here
          },

2-使用堆栈

Stack(
          alignment: Alignment.centerRight,
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                labelText: "Password",
                border: OutlineInputBorder(),
              ),
            ),
            IconButton(
              icon: Icon(Icons.ac_unit),
              onPressed: () {
                //do any thing
              },
            ),
          ],
        ),

3- 正如 Afridi Kayal 所说，你可以使用一行

Row(
          children: <Widget>[
            Expanded(
              child: TextField(
                focusNode: focusNode,
                enabled: enabled,
                autofocus: false,
                textInputAction: TextInputAction.done,
                decoration: InputDecoration(
                  labelText: "Password",
                  border: OutlineInputBorder(),
                ),
              ),
            ),
            IconButton(
              icon: Icon(Icons.visibility),
              onPressed: () {
                print('object');
              },
            ),
          ],
        ),

如果您最终选择了数字 2 或 3，并且希望在聚焦于文本字段时使按钮颜色发生变化，您也可以使用 focusNode 来实现。

Answer 2

您可以使用 ExcludeFocus/ExcludeFocusTraversal 小部件