flutter - 只关注 TextField 中的 IconButton

Question

我有一个用于输入密码的 TextFormField，它带有一个用于切换 obscureText 的 IconButton。我想让它在单击按钮时，文本字段不会成为焦点。然而，事实并非如此。我想这与 FocusNode 有关。

ValueListenableBuilder<bool>(
  valueListenable: _obscureText,
  builder: (context, obscureText, child) => TextFormField(
    obscureText: obscureText,
    decoration: InputDecoration(
      suffixIcon: IconButton(
        icon: Icon(obscureText ? Icons.visibility_off : Icons.visibility),
        onPressed: () => _obscureText.value = !obscureText,
      ),
    ),
  ),
),

有人知道解决办法吗？

Answer 1

你只需要

FocusNode.unfocus()

在 onPressed() 方法中的 setState 之后调用它。

输出:

完整解决方案:

bool obscureText = false;
FocusNode _focusNode = FocusNode();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Padding(
      padding: const EdgeInsets.all(24.0),
      child: Column(
        children: <Widget>[
          TextFormField(
            focusNode: _focusNode,
            obscureText: obscureText,
            decoration: InputDecoration(
              suffixIcon: IconButton(
                icon: Icon(obscureText ? Icons.visibility_off : Icons.visibility),
                onPressed: () {
                  setState(() => obscureText = !obscureText);
                  Timer.run(() => _focusNode.unfocus());
                },
              ),
            ),
          ),
          TextField(),
        ],
      ),
    ),
  );
}