Flutter 重构：常用语封装 BottomSheetPhrasesMixin

一、来源

工作中涉及到 IM 页面开发，随着功能开发页面逻辑越来越多，就想把耦合度不高的需求模块分拆出去，经过研究发现一种 Mixin 文件拆分办法，同时支持接口拆分。
下面以 IM 常用语为例，效果图如下：

点击常用语弹窗如下：

二、使用示例

1、复用代码：

class _IMChatPageState extends State<IMChatPage> with
    BottomSheetPhrasesMixin {
//...

2、使用：

//展示提示语弹窗
choosePhrases(
  cb: (val) {
    debugPrint(val.phrases ?? "-");
  },
  onCancel: (){
    Navigator.of(context).pop();
  },
  onAdd: () {
    debugPrint("onAdd");
    Navigator.of(context).pop();
  }
);

三、源码

总结

1、核心是通过 Mixin 约束实现：

2、此种方案好处可以在mixin文件中关联 dispose 和 initState 方法，可以实现接口请求从主模块分离。如果不走接口分离，主页面动辄一堆请求接口，想想就可怕。只会把复杂度无限堆高，后期维护就成了老大难问题。

3、Mixin 文件封装弹窗也是极好的方式，flutter 中弹窗方法多且杂，我们可以通过mixin 文件将通用弹窗分类。大体分为 Alert、Dialog、Sheet等，将方法命名也可以进行约束，在此基础上封装形成标签多选、标签单选、DatePicker，Picker等，使用时只需要调用一个方法，大部分属性设置为默认参数即可。这样就可建立一个弹窗封装体系，一次性搞定现在的、未来的所有弹窗基础，不再需要新的弹窗每次都从零到一，而是从1-10000。

github