flutter - Flutter:创建可重复使用的小部件

Question

我的应用程序基于表单，并且涉及很多文本字段。所有字段都共享相同的样式，表单页面变得越来越长，因此我决定创建一个widget并在需要的地方调用它。

我使用以下代码创建了一个文件show_text_field.dart:

showTextField(String label, var variable){
return TextFormField(
  keyboardType: TextInputType.text,
  onSaved: (val) => variable = val,
  decoration: InputDecoration(
      labelText: label,
      contentPadding: EdgeInsets.fromLTRB(15.0, 15.0, 15.0, 15.0),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(5.0),

      )),
  validator: (value) {
    if (value.isEmpty) {
      return '$label cannot be empty';
    } else {
      return null;
    }
  },
);
}

它正常工作，但我无法从该字段中检索值。

问题:

如何从onSaved事件获取值(value)？

这是正确的方法吗？

创建可重用的InputDecoration小部件比重用整个小部件更好吗？

如果这是正确的方法，那么有什么方法可以扩展/修改字段验证器？

Answer 1

在这种情况下，您会错过一件非常重要的事情。如果要在组件外部检索值，则必须通过showTextField函数参数将其传递。我会那样做:

showTextField(String label, var variable, Function onSaved)

您的最终代码如下所示:

showTextField(String label, var variable, Function onSaved){
return TextFormField(
  keyboardType: TextInputType.text,
  onSaved: onSaved,
  decoration: InputDecoration(
      labelText: label,
      contentPadding: EdgeInsets.fromLTRB(15.0, 15.0, 15.0, 15.0),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(5.0),

      )),
  validator: (value) {
    if (value.isEmpty) {
      return '$label cannot be empty';
    } else {
      return null;
    }
  },
);
}

因此，您可以在执行事件 onSaved时实现所需的逻辑。

广告2.一切取决于您的需求。如果您需要处理提交时的值(value)，那么这是个好方法。

广告3。我会按照您的方式进行操作，但是这也取决于它必须解决的问题的背景

广告4.您的意思是 extend/modify filed validation吗？您拥有 validator，可以在其中执行您想要/需要的任何操作。您还可以传递函数以对表单中的所有字段进行自定义验证(我假设您可能希望不同地验证不同的字段)