TextFormField 上的可点击图标 - 禁用 TextFormField 专注于图标点击（Flutter）

Question

我需要一个带有 suffixIcon 的 textField，但点击该图标后，我不需要打开键盘。我如何在没有 suffixIcon 的情况下做到这一点？

Answer 1

Container(
  child: Stack(
    alignment: Alignment.centerRight,
    children: <Widget>[
      TextField(),
      IconButton(
        icon: Icon(Icons.image),
        onPressed: () {
          // do something
        },
      ),
    ],
  ),
)

Answer 2

经过测试和确认，正是您想要的。

Stack(
  alignment: Alignment.centerRight,
  children: <Widget>[
    TextField(
      keyboardType: TextInputType.text,
      style: Theme.of(context).textTheme.body1,
      obscureText: true,
      decoration: InputDecoration(
        labelText: 'Password',
        contentPadding: const EdgeInsets.fromLTRB(6, 6, 48, 6), // 48 -> icon width
      ),
    ),
    IconButton(
      icon: Icon(Icons.dialpad, color: const Color(0xfff96800)),
      onPressed: () {
        FocusScope.of(context).requestFocus(FocusNode());
        // Your codes...
      },
    ),
  ],
),

Answer 3

使用readOnly，不使用enabled。

Answer 4

此问题还有一个可能的解决方案 - 取自此处：https : //github.com/flutter/flutter/issues/39376 - 使用带有按钮的标准 TextField 作为 suffixIcon 然后，魔术：

InputDecoration(labelText: "Email address",
    border: OutlineInputBorder(),
    suffixIcon: IconButton(
    iconSize: 40,
    icon: Icon(Icons.fingerprint),
    onPressed: () async {
      focusNode.unfocus();
      focusNode.canRequestFocus = false;
      await performBiometricLogin();
      focusNode.canRequestFocus = true;
    },
  ),
),

在这种情况下，您必须注意两件事：

a) 在你的小部件中声明 focusNode（我在我的 statefull 小部件的状态类中这样做），然后将它用于你的文本字段：

FocusNode focusNode = FocusNode();

并在 TextField 中使用名为 focusNode 的属性：

focusNode: focusNode,

b) 如果您没有在 onPressed 事件处理程序中执行任何异步操作，那么您必须完全遵循 github 问题中的逻辑 - 一段时间后启用 canRequestFocus：

Future.delayed(Duration(milliseconds: 100), () {
    widget.textFieldFocusNode.canRequestFocus = true;
});

希望它会像帮助我一样帮助其他人。

谢谢。

Answer 5

点击键盘打不开？如果是这样，只需创建一个类并将其分配给focusNode，设置hasFocus为false，如下所示：

class AlwaysDisabledFocusNode extends FocusNode {
  @override
  bool get hasFocus => false;
}

new TextField(
focusNode: AlwaysDisabledFocusNode(),
onTap: () {},
keyboardType: TextInputType.text,
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(Icons.apps),
hintText: 'Password'),
style: Theme.of(context).textTheme.body1,
),

点击后readOnly: true它会改变图标颜色

new TextField(readOnly: true,
    //focusNode: AlwaysDisabledFocusNode(),
    onTap: () {},
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
    border: InputBorder.none,
    icon: Icon(Icons.apps),
    hintText: 'Password'),
    style: Theme.of(context).textTheme.body1,
    ),

我认为你必须将 aRow与 aTextField和 an放在一起IconButton，并进行单独的操作。

new Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    new Expanded(
        child: Padding(
      child: new TextField(
        onTap: () {//action of TextField
        },
        keyboardType: TextInputType.text,
        decoration: InputDecoration(
            border: InputBorder.none, hintText: 'Password'),
        style: Theme.of(context).textTheme.body1,
      ),
      padding: EdgeInsets.only(left: 40),
    )),
    IconButton(
      icon: Icon(Icons.apps),
      onPressed: () {//action of iconbutton
      },
    )
  ],
)