【问题标题】:how to rebuild a widget built from a function in Flutter?如何重建从 Flutter 中的函数构建的小部件?
【发布时间】:2021-07-24 13:20:41
【问题描述】:

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

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 变为真时,图标并没有改变。 当布尔条件发生变化时,如何使小部件自行重建?

【问题讨论】:

  • 你试过callBack方法了吗,如果你的函数在不同的小部件上,如果在同一个小部件上,你会得到setstate()。我也更喜欢stateManagement
  • 什么回调方法?你能解释一下吗?
  • 喜欢使用函数作为参数并将其添加到onChanged
  • 不知道我会怎么做。你能发布一个答案吗?

标签: flutter dart


【解决方案1】:

您应该创建一个简单的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,
    );
  }
}

【讨论】:

  • 将其中一些小部件放在一列中,然后输入其中一个。所有这些都被相同的文本填满。我该如何避免这种情况。 ?
猜你喜欢
  • 2021-10-29
  • 2019-08-24
  • 2021-07-04
  • 1970-01-01
  • 1970-01-01
  • 2020-07-25
  • 2017-10-19
  • 2020-12-22
  • 2021-09-01
相关资源
最近更新 更多