本文提出了一个简单的Flutter解耦demo
背景
社区目前同时接入了两个游戏业务，在上一篇文章社区SDK多业务适配（业务层）也介绍了一些业务层的多业务适配手段。通过模块化去定制功能可以有效避免业务间相互干扰，但对于通用功能包括UI的区别还只是逐个判断。
随着版本迭代，还要支持竖屏能力（如图），多业务x横竖屏导致适配复杂度加大，不同点越多越难适配；而且Flutter的嵌套式写法将UI和逻辑放在一起，哪怕只是UI小细节的不同也要用if-else区分，这种写法使得可读性比较差，维护成本变高，容易出错。
在产品策略和设计层虽然有尽量保持通用能力一致但还有各有风格，细节差异也不少，所以技术上做解耦还是很有必要的。
方案
最关键一步就是将Flutter嵌套写法中的UI和逻辑分离，即原来 Widget（UI、交互、数据） 变成 Cell = View（UI）+ ViewModel (交互) + 数据。这里用到了状态管理库Riverpod，与 Provider 类似，通过 Provider 和 Consumer 来实现状态管理，通过依赖注入的方式来共享和访问状态，相比Provider 使用上更简单直观、可扩展更强、提供更好的异步状态管理支持。
首先添加依赖项：
flutter_riverpod: ^2.3.6
然后创建一个全局状态容器：
void main() {
runApp(ProviderScope(child: MyApp()));
}
接下来就是改造后的几个主要成员，首先是Cell类，绑定了对应的View和ViewModel，除了常用的build绘制，还支持在initState和dispose做一些初始化和销毁的操作：
import 'package:flutter/cupertino.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'base_provider.dart';
import 'base_view_model.dart';
abstract class BaseCell<VM extends BaseViewModel>
extends ConsumerStatefulWidget {
late BaseVMProvider<VM> provider;
late Widget Function(BuildContext context, VM value) builder;
BaseCell({super.key}) {
this.provider = getVMProvider();
this.builder = getView();
}
BaseVMProvider<VM> getVMProvider();
Widget Function(BuildContext context, VM vm) getView();
Function(VM vm)? onInitState() {
return null;
}
Function(VM vm)? onDispose() {
return null;
}
@override
ConsumerState<BaseCell> createState() => BaseCellState<VM>();
}
class BaseCellState<VM extends BaseViewModel>
extends ConsumerState<BaseCell<VM>> {
@override
void initState() {
super.initState();
widget.onInitState()?.call(ref.read(widget.provider));
}
@override
void dispose() {
widget.onDispose()?.call(ref.read(widget.provider));
super.dispose();
}
@override
Widget build(BuildContext context) {
return widget.builder(context, ref.watch(widget.provider));
}
}
View类主要有一个ViewModel来处理除UI部分的功能：
import 'package:flutter/material.dart';
import 'base_view_model.dart';
abstract class BaseView<VM extends BaseViewModel> extends StatelessWidget {
final VM vm;
BaseView(this.vm);
}
ViewModel类主要是一个通知View做UI更新的接口：
import 'package:flutter/cupertino.dart';
abstract class BaseViewModel extends ChangeNotifier {
@protected
void refreshUI(Function block) {
block();
if (hasListeners) {
notifyListeners();
}
}
}
通用的状态生成器：
import 'package:flutter/cupertino.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
typedef BaseVMProvider<T extends ChangeNotifier>
= AutoDisposeChangeNotifierProvider<T>;
typedef BaseVMRef<T extends ChangeNotifier>
= AutoDisposeChangeNotifierProviderRef<T>;
class BaseVMProviderFactory {
static BaseVMProvider<T> create<T extends ChangeNotifier>(
T Function(BaseVMRef<T> ref) create) {
return ChangeNotifierProvider.autoDispose<T>((ref) {
return create(ref);
});
}
}
举个简单的使用例子，模拟请求返回数据后刷新界面：
目前只是一个初步demo，还需要具体实践下来不断完善，这种解耦思路还是可以参考的。
总结
如此，在定制横竖屏或不同业务的样式只要继承复写View即可，无需改动逻辑部分，使得适配过程更加高效和可靠。
