Flutter如何基于现有代码封装适配多场景的可复用TextField组件

只需要把固定的样式逻辑内置到组件内，将业务差异化的属性抽为入参即可，实现方案如下：

封装后的通用组件代码 #

import 'package:flutter/material.dart';

class CustomInputField extends StatelessWidget {
  // 必传入参
  final TextEditingController controller;
  final String hintText;
  final String labelText;
  final Icon prefixIcon;
  // 可选入参，内置默认值和原参考代码一致
  final TextInputType keyboardType;
  final TextInputAction textInputAction;
  final FormFieldValidator<String>? validator;
  final Function(String)? onFieldSubmitted;
  final double elevation;
  final EdgeInsets margin;
  final Color cardColor;
  final double borderRadius;

  const CustomInputField({
    super.key,
    required this.controller,
    required this.hintText,
    required this.labelText,
    required this.prefixIcon,
    this.keyboardType = TextInputType.text,
    this.textInputAction = TextInputAction.next,
    this.validator,
    this.onFieldSubmitted,
    this.elevation = 5,
    this.margin = const EdgeInsets.all(15),
    this.cardColor = Colors.white,
    this.borderRadius = 15.0,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: elevation,
      margin: margin,
      color: cardColor,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(borderRadius),
      ),
      child: TextFormField(
        controller: controller,
        keyboardType: keyboardType,
        textInputAction: textInputAction,
        validator: validator,
        onFieldSubmitted: onFieldSubmitted ?? (value) {
          // 默认提交逻辑，未自定义时自动失焦
          FocusScope.of(context).unfocus();
        },
        decoration: InputDecoration(
          prefixIcon: prefixIcon,
          hintText: hintText,
          border: const OutlineInputBorder(
            borderSide: BorderSide.none,
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(color: Colors.black, width: 2.0),
            borderRadius: BorderRadius.circular(borderRadius),
          ),
          labelText: labelText,
        ),
      ),
    );
  }
}

组件使用示例 #

传入对应参数即可生成不同类型的输入框，无需重复编写样式代码：

// 姓名输入框
CustomInputField(
  controller: _nameController,
  hintText: '请输入您的姓名',
  labelText: '姓名',
  prefixIcon: const Icon(Icons.person),
  validator: (value) {
    if(value == null || value.isEmpty) return '请输入姓名';
    return null;
  },
)
// 手机号输入框
CustomInputField(
  controller: _phoneController,
  hintText: '请输入您的手机号',
  labelText: '手机号',
  prefixIcon: const Icon(Icons.phone_android),
  keyboardType: TextInputType.phone,
  validator: (value) {
    if(value == null || value.length != 11) return '请输入合法的手机号';
    return null;
  },
)
// 邮箱输入框
CustomInputField(
  controller: _emailController,
  hintText: '请输入您的邮箱地址',
  labelText: '邮箱',
  prefixIcon: const Icon(Icons.mail),
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.done,
)

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