首页 > 解决方案 > 如何重建从 Flutter 中的函数构建的小部件?

问题描述

我有一个小部件,我打算在我的应用程序的各个部分重复使用。

Widget getTextField({required String hint,required IconData icon, required int minLength,required StringValue callback}){
 return CupertinoTextField(
    padding: EdgeInsets.all(8),
    prefix: Padding(
        padding: iconPadding,
        child: Icon(icon)),
    suffix: Padding(
        padding: iconPadding,
        child: Icon(_length >= minLength ? Icons.check_circle : Icons.check_circle_outline)),
    placeholder: hint,
    onChanged: (text){
      _length = text.length;
       callback(text);
 
    },
  );

}

当我试图重用一个状态完整的小部件时,我遇到了一个问题,如果我在一个文本字段中键入,其余的文本会弹出相同的文本,这意味着正在使用相同的小部件实例。使用new关键字也没有帮助。

上述方法如此处所述https://stackoverflow.com/a/63424310/8528047

_length但是,当布尔值变为 true时,图标不会更改。当布尔条件发生变化时,如何使小部件自行重建?

标签: flutterdart

解决方案


您应该创建一个简单的Widget类并向其传递参数,例如:

class GetTextFieldWidget extends StatefulWidget {
  final EdgeInsets iconPadding;
  final int minLength;
  final ValueChanged onChanged;
  final IconData icon;
  final String hint;

  const GetTextFieldWidget(this.iconPadding, this.minLength, this.onChanged,this.icon, this.hint);

  @override
  State<StatefulWidget> createState() => _GetTextFieldWidget();
}

class _GetTextFieldWidget extends State<GetTextFieldWidget> {
  final int _length = 10;

  @override
  Widget build(BuildContext context) {
    return CupertinoTextField(
      padding: const EdgeInsets.all(8),
      prefix: Padding(
        padding: widget.iconPadding,
        child: Icon(widget.icon),
      ),
      suffix: Padding(
          padding: widget.iconPadding,
          child: Icon(_length >= widget.minLength ? Icons.check_circle : Icons.check_circle_outline)),
      placeholder: widget.hint,
      onChanged: widget.onChanged,
    );
  }
}


推荐阅读