Flutter自定义Widget最佳实践：函数式与类式（STF/STL）该如何选择？

问题背景 #

我对使用Widget函数和类（StatelessWidget/StatefulWidget，简称STL/STF）创建自定义Widget的最佳实践感到困惑。

两种实现示例 #

1. Widget函数实现

class FieldCustomWidget {
  static Widget textField(...) {
    return ...;
  }

  static Widget idCardNumberField(...) {
    return ...;
  }

  static Widget phoneField(...) {
    return ...;
  }
}

2. 类式（STL）实现

文本输入框组件

class TextFieldCustomWidget extends StatelessWidget {
  ...
  const TextFieldCustomWidget({Key? key, ...}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ...;
  }
}

身份证号输入框组件

class IdCardNumberFieldCustomWidget extends StatelessWidget {
  ...
  const IdCardNumberFieldCustomWidget({Key? key, ...}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ...;
  }
}

手机号输入框组件

class PhoneFieldCustomWidget extends StatelessWidget {
  ...
  const PhoneFieldCustomWidget({Key? key, ...}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ...;
  }
}

我正在使用Get状态管理，所有自定义Widget都可以用Widget函数或STL实现，请问哪种是最佳实践？还有其他实现方式吗？

最佳实践分析 #

1. 函数式Widget的适用场景 #

• 简单无状态通用组件：仅封装基础组件的样式、布局，无需保存状态、Key或额外逻辑时，静态函数写法更简洁，减少冗余代码。
• 同类型组件批量管理：像示例中的多个输入框，用工具类统一封装，调用时FieldCustomWidget.textField(...)更直观，便于归类维护。
• 配合GetX状态管理：若组件状态完全由GetX Controller控制，自身无需持有状态，函数式写法足够满足需求，避免不必要的类定义。

2. 类式Widget（STL/STF）的适用场景 #

• 需要独立状态/生命周期：即使使用GetX，若组件需处理局部状态（如输入框临时校验提示、焦点状态），或利用const构造优化性能，类式写法更合适。
• 需要Key标识组件：当组件需在列表复用、或通过Key保留状态时，类式Widget可直接接收Key参数，函数式写法无法规范处理此类场景。
• 组件需扩展/复用：若后续要基于组件派生子类，或实现特定Widget接口（如PreferredSizeWidget），类式写法是唯一选择。
• 代码规范与可维护性：复杂组件用类式写法结构更清晰，参数通过构造函数传递，IDE提示更友好，便于团队协作时理解组件职责。

3. 折中方案：函数式+类式结合 #

将通用逻辑用类式Widget封装，上层用函数式做快捷调用，兼顾两者优势：

// 底层类式组件，负责通用逻辑与性能优化
class _TextFieldCustom extends StatelessWidget {
  const _TextFieldCustom({Key? key, required this.hint, ...}) : super(key: key);
  
  final String hint;
  // 其他参数...

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(hintText: hint),
      // 通用样式与逻辑...
    );
  }
}

// 上层函数式封装，提供快捷调用与专属配置
class FieldCustomWidget {
  static Widget textField({String hint = '', ...}) {
    return _TextFieldCustom(hint: hint, ...);
  }

  static Widget idCardNumberField({String hint = '请输入身份证号', ...}) {
    return _TextFieldCustom(
      hint: hint,
      inputFormatters: [IdCardInputFormatter()],
      // 身份证号专属校验逻辑...
    );
  }
}

4. 其他实现方式 #

• HookWidget：借助flutter_hooks包，用函数式写法实现有状态组件，通过Hook管理局部状态，比StatefulWidget更简洁，支持状态逻辑复用，适合需要局部状态但不想写STF的场景：

class IdCardNumberField extends HookWidget {
  const IdCardNumberField({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final controller = useTextEditingController();
    final isValid = useState(false);
    
    useEffect(() {
      // 监听输入变化做校验
      controller.addListener(() {
        isValid.value = _validateIdCard(controller.text);
      });
      return null;
    }, [controller]);

    return TextField(
      controller: controller,
      decoration: InputDecoration(
        errorText: isValid.value ? null : '身份证号格式错误',
      ),
    );
  }
}

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