flutter - 只关注 TextField 中的 IconButton

Question

我有一个TextFormFieldfor 密码输入，带有一个IconButtonwhich toggles obscureText。我想让它在单击按钮时，文本字段不会成为焦点。然而，事实并非如此。我想这与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,
      ),
    ),
  ),
),

有谁知道解决方案？

标签： flutterdart

Answer 1

所有你需要的是

FocusNode.unfocus()

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

输出：

完整解决方案：

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(),
        ],
      ),
    ),
  );
}