Flutter面向对象模式：如何复用StatefulWidget及State类重复代码？

针对你提到的两个StatefulWidget及关联State类存在大量重复代码的问题，下面提供两种可行的实现模式，并给出选择建议：

一、基于继承的实现方式（适配你尝试的继承思路） #

如果想通过继承复用通用逻辑，需要借助泛型绑定Widget与State的关联关系，具体实现如下：

1. 定义抽象基类Widget #

abstract class PersonPage<T extends PersonPage<T>> extends StatefulWidget {
  // 通用属性，比如区分性别的参数
  final String gender;

  const PersonPage({super.key, required this.gender});

  // 抽象方法，让子类返回对应State实例
  _PersonState<T> createState();
}

2. 定义通用State基类 #

把获取数据、通用布局等重复逻辑放到这里，用抽象方法留出走差异化的口子：

abstract class _PersonState<T extends PersonPage<T>> extends State<T> {
  late PersonData personData;

  @override
  void initState() {
    super.initState();
    _fetchPersonData();
  }

  // 通用的服务器数据获取逻辑
  Future<void> _fetchPersonData() async {
    personData = await ApiService.fetchPerson(widget.gender);
    setState(() {});
  }

  // 通用UI布局框架
  Widget _buildCommonLayout() {
    return Column(
      children: [
        Text('姓名：${personData.name}'),
        Text('年龄：${personData.age}'),
        _buildGenderSpecificContent(), // 子类实现差异化内容
      ],
    );
  }

  // 抽象方法，子类必须实现的差异化部分
  Widget _buildGenderSpecificContent();
}

3. 子类实现（ManPage/WomanPage） #

// ManPage实现
class ManPage extends PersonPage<ManPage> {
  const ManPage({super.key}) : super(gender: 'male');

  @override
  _ManPageState createState() => _ManPageState();
}

class _ManPageState extends _PersonState<ManPage> {
  @override
  Widget _buildGenderSpecificContent() {
    return const Text('男性专属内容');
  }

  // 如需覆盖通用逻辑，可重写父类方法
  @override
  Future<void> _fetchPersonData() async {
    // 自定义前置逻辑
    await super._fetchPersonData();
    // 自定义后置逻辑
  }
}

// WomanPage实现
class WomanPage extends PersonPage<WomanPage> {
  const WomanPage({super.key}) : super(gender: 'female');

  @override
  _WomanPageState createState() => _WomanPageState();
}

class _WomanPageState extends _PersonState<WomanPage> {
  @override
  Widget _buildGenderSpecificContent() {
    return const Text('女性专属内容');
  }
}

这种方式适合通用逻辑占比极高、差异化极少的场景，但要注意继承带来的耦合问题，后续扩展可能受限。

二、基于组合的实现方式（Flutter官方推荐） #

Flutter的设计哲学更推崇组合而非继承，核心是把通用逻辑拆分成独立单元，再在具体页面中组合使用，灵活性更高：

1. 抽离通用数据逻辑 #

把服务器请求等业务逻辑封装到独立类：

class PersonRepository {
  static Future<PersonData> fetchPerson(String gender) async {
    // 通用网络请求逻辑
    final response = await http.get(Uri.parse('https://api.example.com/person?gender=$gender'));
    if (response.statusCode == 200) {
      return PersonData.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('加载用户数据失败');
    }
  }
}

2. 封装通用UI组件 #

把重复的展示布局封装成独立Widget：

class PersonInfoCard extends StatelessWidget {
  final PersonData personData;
  final Widget genderSpecificContent;

  const PersonInfoCard({
    super.key,
    required this.personData,
    required this.genderSpecificContent,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('姓名：${personData.name}'),
        Text('年龄：${personData.age}'),
        genderSpecificContent,
      ],
    );
  }
}

3. 具体页面组合使用 #

以ManPage为例，仅处理差异化逻辑，通用部分通过组合引入：

class ManPage extends StatelessWidget {
  const ManPage({super.key});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<PersonData>(
      future: PersonRepository.fetchPerson('male'),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('错误：${snapshot.error}');
        } else {
          return PersonInfoCard(
            personData: snapshot.data!,
            genderSpecificContent: const Text('男性专属内容'),
          );
        }
      },
    );
  }
}

WomanPage的实现逻辑完全一致，仅需修改请求参数和差异化内容即可。

三、模式选择建议 #

• 继承：仅在通用逻辑极其固定、子类几乎无扩展需求时使用，缺点是耦合度高，后续修改基类可能影响所有子类。
• 组合：优先推荐，符合Flutter设计思想，代码低耦合、易维护，新增页面时只需组合已有单元即可，学习成本也更低，适合新手快速上手。

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