当按下按钮时,如何使IconButton内的IconButton不能聚焦文本字段?

时间:2020-07-28 15:56:33

标签: flutter dart flutter-layout

这是我脚手架中文本字段的代码:

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在按下时永远不会聚焦于文本字段?

1 个答案:

答案 0 :(得分: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来实现。