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

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

问题：

1. 如何从onSaved 事件中获取价值？
2. 这是正确的方法吗？
3. 创建可重复使用的InputDecoration 小部件是否比重复使用整个小部件更好？
4. 如果方法正确，那么有没有办法扩展/修改字段验证器？

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 时实现所需的逻辑。

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

ad 3. 这也取决于。我会按照你的方式来做，但这里也完全取决于它必须解决的问题的背景

ad 4. extend/modify filed validation 是什么意思？您拥有validator，您可以在其中做任何您想做/需要的事情。您还可以通过函数对表单中的所有字段进行自定义验证（我假设您可能希望以不同方式验证不同的字段）