Flutter中如何利用继承实现多模块屏幕复用、减少重复代码？

第一步：抽象通用页面基类 #

先把所有页面共有的逻辑、同类型页面的通用逻辑分别抽成基类，所有业务页面只需要继承对应基类，仅实现差异化逻辑即可：

• 顶层通用页面基类 BasePage：封装所有页面都要用到的公共逻辑，包括页面生命周期钩子、权限校验、通用加载/错误态渲染、全局提示调用、路由跳转封装，所有页面均继承该基类
• 列表页基类 BaseListPage：封装分页、下拉刷新/上拉加载、批量操作、列表骨架屏、通用筛选栏布局逻辑，预留可重写钩子：getListApi()（传入业务模块对应的列表请求接口）、renderItem()（自定义列表项渲染规则）、filterHandler()（自定义筛选逻辑）、batchOperateHandler()（自定义批量操作逻辑）
• 详情页基类 BaseDetailPage：封装路由参数校验、详情接口请求、通用删除/分享操作、返回逻辑，预留可重写钩子：getDetailApi()（传入业务模块对应的详情请求接口）、renderDetailContent()（自定义详情区域渲染规则）、customOperateHandler()（实现模块专属操作，比如会议的加入会议、闹钟的立即响铃等）
• 新增/编辑页基类 BaseFormPage：两类页面逻辑高度重合直接合并封装，包含表单校验、提交/重置按钮逻辑、表单数据提交、编辑态详情自动回填逻辑，预留可重写钩子：getFormSchema()（传入业务模块专属的表单字段配置，比如会议要配置参会人、会议时间字段，闹钟要配置重复周期、响铃铃声字段）、getSubmitApi()（传入表单提交接口）、customFormValidator()（实现自定义表单校验规则）
• 搜索页基类 BaseSearchPage：封装搜索历史存储、搜索联想、搜索结果列表渲染逻辑，预留可重写钩子：getSearchApi()（传入业务模块对应的搜索接口）、renderSearchResultItem()（自定义搜索结果项渲染规则）、searchFilterHandler()（自定义搜索结果筛选逻辑）

第二步：业务模块页面快速实现 #

每个业务模块（会议/检查项/闹钟）的对应页面，只需要继承对应类型的基类，重写差异化的钩子即可完成开发，不需要重复写通用逻辑。以会议列表页为例：

// 直接继承通用列表基类
class MeetingListPage extends BaseListPage {
  // 仅重写和会议业务相关的差异化逻辑即可
  getListApi() {
    return '/api/meeting/list'
  }
  renderItem(item) {
    // 自定义会议列表项的渲染样式和字段
    return <MeetingItem data={item} />
  }
}

其余模块的页面开发逻辑完全一致，仅需要替换业务专属的接口、渲染规则、校验逻辑即可，通用逻辑100%复用基类实现。

可选优化方案 #

• 对于逻辑简单的页面，可以把基类的可变部分抽成配置项，不需要重写方法，初始化时传入listApi、itemComponent这类参数即可生成可用页面，进一步减少代码量
• 遇到和基类逻辑差异较大的特殊页面，可以直接重写基类的核心方法，不会被基类的默认逻辑限制
• 如果使用React/Vue这类框架，可以搭配混入（mixin）、组合式函数（composable）补充复用逻辑，和继承模式搭配使用覆盖更多复用场景

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