Flutter|解耦初实践

本文提出了一个简单的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即可，无需改动逻辑部分，使得适配过程更加高效和可靠。