1

我想以不同的形式重用不同类型的字段，我创建了一个单独的 Widget 来返回TextFormField.

从逻辑上讲，不同类型的字段有自己的验证和其他属性，所以我开始研究继承等以避免重写相同的代码块。

据我所知，Flutter 不鼓励小部件的继承，所以我的问题是关于在 Flutter 中重用各种表单字段的代码以保持可读性并保持代码干净的最佳实践。

有小费吗？

4

1 回答 1

1

根据我的经验，除了 Flutter 提供的原始表单字段之外，我很少需要使用其他小部件。我发现对重用有用的是每个字段的验证函数，因为它们在验证方面通常有共同的需求。

这只是两个基本示例。每当需要时，我都会将它们传递给validator表单字段的参数。

String? validatorForMissingFields(String? input) {
  if (input == null || input.isEmpty || input.trim().isEmpty) {
    return "Mandatory field";
  }
  return null;
}

String? validatorForMissingFieldsAndLength(String? input, int length) {
  if (input == null || input.isEmpty || input.trim().isEmpty) {
     return "Mandatory field";
  }
  if (input.length != length) {
   return 'Not long enough';
  }
  return null;
 }

在任何情况下，与其扩展基本小部件，我更愿意创建一个新的小部件，其中包含具有一些固定属性的基本小部件，以及可以自定义的其他属性。这个例子不涉及表单字段，但我认为它可以更好地解释我的观点。

///if text is not null, icon is ignored
class RectButton extends StatelessWidget {
  final Function()? onPressed;
  final String? text;
  final IconData? icon;
  final Color color;
  const RectButton({this.text, this.icon, required this.onPressed, Key? key, this.color = mainLightColor}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(12.0),
      child: OutlinedButton(
          style: ButtonStyle(
            side: MaterialStateProperty.all(BorderSide(color: color)),
            overlayColor: MaterialStateColor.resolveWith((states) => color.withOpacity(0.5)),
            backgroundColor: MaterialStateColor.resolveWith((states) => color.withOpacity(0.3)),
          ),
          onPressed: onPressed,
          child: text != null
              ? Text(
                  text!,
                  style: TextStyle(fontWeight: FontWeight.bold, color: color),
                )
              : Icon(
                  icon,
                  color: color,
                )),
    );
  }
}

为了在所有应用程序中保持相同的外观和感觉，我创建了一个自定义按钮，上面有一些“不可见”小部件，允许我在不扩展基本小部件的情况下设置一些属性。我需要自定义的属性被传递给构造函数。

于 2022-01-12T09:49:12.343 回答