Flutter：如何使用钩子重建 UI 的特定部分？

问题描述

我正在尝试将我的 TextFormField 逻辑移动到颤动钩子，因此我有密码字段，我想在其中实现 obscure 文本。所以点击按钮它应该隐藏/取消隐藏文本。现在我在钩子中使用 setState() 来做到这一点，但它重建了整个 UI 并将焦点移到第一个字段，因为我已经为第一个字段设置了 autoFocus 所以我如何确保它只重建那个特定的 TextFormField。>

我的自定义钩子文件，

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';


enum Index { email,password }

TextFormField useTextFormField(Index index) {
  return use(_CustomHook(index: index));
}

class _CustomHook extends Hook<TextFormField> {
  final Index index;

  _CustomHook({@required this.index});

  @override
  _CustomHookState createState() => _CustomHookState();
}

class _CustomHookState extends HookState<TextFormField,_CustomHook> {
  Index index;
  bool obscure = false;
  @override
  TextFormField build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        hintText: 'some help',suffixIcon: IconButton(
          onPressed: () {
            setState(() {
              obscure = !obscure; //<--- here
            });
          },icon: Icon(obscure ? Icons.visibility_off : Icons.visibility),),validator: (text) {
        if (text.isEmpty) return 'enter something';

        return null;
      },obscureText: index == Index.email ? false : obscure,);
  }
}

如果有人可以帮忙吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）