Flutter中向子组件传递可选参数的正确方式是什么？

我有React开发经验，现在用Flutter封装TextInputField组件来复用表单样式代码，但遇到了可选参数的问题：像borderColor这种能设默认值的参数没问题，但controller不知道怎么设成可选——我希望它和React一样可传可不传，但没法把默认值设为null，现在必须传这个参数。

已尝试的方法：

• 大量搜索资料
• 尝试使用位置参数而非命名参数
• 多次盲目修改代码

父组件代码 #

Form(
  key: _formKey,
  autovalidateMode: _validate,
  child: Column(
    children: <Widget>[
      const TextInputField(
        onValidate: validateEmail,
        label: 'Email',
        labelColor: colorInputLabel,
        radius: 40,
        inputAction: TextInputAction.next,
      ),
      const SizedBox(height: inputFieldSpace),
      const TextInputField(
        onValidate: validatePassword,
        label: 'Password',
        labelColor: colorInputLabel,
        obscured: true,
        radius: 40,
        inputAction: TextInputAction.done,
      ),
      const SizedBox(height: 40),
      OnboardingButton(
        text: 'Register',
        onTap: () {
          context.read<SigninBloc>().add(ValidateSigninEvent(_formKey));
        },
      )
    ],
  ),
);

子组件原始代码（存在问题） #

class TextInputField extends StatelessWidget {
  final String label;
  final Function(String? value) onValidate;
  final Color borderColor;
  final Color labelColor;
  final TextInputControl controller; // 类型错误且不可空

  const TextInputField(
      {Key? key,
      required this.label,
      required this.onValidate,
      this.borderColor = const Color.fromRGBO(223, 222, 227, 1),
      this.labelColor = const Color.fromARGB(255, 183, 182, 187),
      this.controller = null, // 不可空参数不能设默认null
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      // 错误的写法：Flutter里没有controller || null这种语法
      controller: controller || null,
      textInputAction: inputAction,
      obscureText: obscured,
      validator: (value) => onValidate(value),
      decoration: InputDecoration(
        labelText: label,
        labelStyle: TextStyle(fontSize: fontSize, color: labelColor),
        contentPadding: const EdgeInsets.symmetric(
          horizontal: 20,
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(radius),
          borderSide: BorderSide(color: borderColor),
        ),
        focusedErrorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(radius),
          borderSide: const BorderSide(color: Colors.red),
        ),
      ),
    );
  }
}

解决方案 #

要实现可选的controller参数，核心是利用Flutter的可空类型，具体步骤如下：

1. 将controller的类型声明为TextEditingController?（加?表示可空）
2. 在构造函数中把它设为可选命名参数，默认值设为null
3. 直接传递给TextFormField的controller参数即可（因为TextFormField的controller本身就是可空类型）

修改后的子组件代码 #

class TextInputField extends StatelessWidget {
  final String label;
  final FormFieldValidator<String> onValidate; // 使用Flutter标准验证类型
  final Color borderColor;
  final Color labelColor;
  final TextEditingController? controller; // 声明为可空类型
  final TextInputAction inputAction;
  final bool obscured;
  final double radius;
  final double fontSize;

  const TextInputField({
    Key? key,
    required this.label,
    required this.onValidate,
    this.borderColor = const Color.fromRGBO(223, 222, 227, 1),
    this.labelColor = const Color.fromARGB(255, 183, 182, 187),
    this.controller = null, // 可选参数，默认值为null
    required this.inputAction,
    this.obscured = false,
    required this.radius,
    required this.fontSize,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller, // 直接传递，无需额外处理
      textInputAction: inputAction,
      obscureText: obscured,
      validator: onValidate,
      decoration: InputDecoration(
        labelText: label,
        labelStyle: TextStyle(fontSize: fontSize, color: labelColor),
        contentPadding: const EdgeInsets.symmetric(horizontal: 20),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(radius),
          borderSide: BorderSide(color: borderColor),
        ),
        focusedErrorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(radius),
          borderSide: const BorderSide(color: Colors.red),
        ),
      ),
    );
  }
}

关键说明 #

• Flutter默认变量不可空，必须显式加?声明可空类型，才能将默认值设为null
• TextFormField的controller参数本身就是TextEditingController?类型，所以直接传递完全兼容
• 建议使用FormFieldValidator<String>作为验证函数的类型，这是Flutter表单的标准类型，更规范

内容的提问来源于stack exchange，提问作者Aaron Balthaser