--- highlight: a11y-dark theme: smartblue --- > 本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！ ## 1. 引言 😆上节杰哥手把手带着大伙基于 **dio + riverpod** 封装了一波网络请求，一手无脑定义 **Provider**，发起请求 **refresh()** ，监听值变化 **watch()** ，异步任务执行完，无需手动 **setState()** 更新UI，与状态关联的 **Widget** 会自动更新。 🤡 这套玩法也被我搬运到公司项目上了，正当我以为会收获一堆 "**大佬**🐂🍺" 的 **虚假吹捧**，结果同事看了我的代码，反而提出了 **问题**： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40b7661ccb014ca08a5f414f3caa9577~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=778&h=503&s=105217&e=png&b=282a36) 我一看，立马和同事 **讨(zheng)论** 起来了： - 🐔：封装的结果只是不用写setState()，你这样写UI和逻辑还是混到一起了啊？ - 🦆：em... 我感觉还好，就一些简单的逻辑处理，弹Toast、存数据、关页面，都是和Widget无关的操作。 - 🐔：不对，这些应该分离出来，不该出现在UI层的，就是 **Riverpod** 做不了这个，我才想试试 **Bloc** 的。 😳 啊？**Riverpod** 做不了这个？看到他还在用 **Riverpod** 老版定义 **Provider** 的写法，而不是通过 **@riverpod** 注解生成，我感觉他大概率还没玩透 **Riverpod**，不过也合理，毕竟 **官方文档** 确实写得那么一言难尽🤣。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/acead64c916e46d8b2fc8d54f33b0210~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=121&h=104&s=10594&e=png&b=fafafa) 那本节就引入 **ViewModel** 的 **概念**，用 **Riverpod** 中特殊的 **Provider** → **Notifier** 来实现 **UI与逻辑** 的分离。 ## 2. 概念相关 😄 所谓的 **ViewModel** 就是在 **View**(视图) 和 **Model** (数据) 中间添加一个 **桥梁**，包含View层所需的数据和逻辑，但不包含 View(**Widget**) 相关的代码。通常会暴露出数据和命令，如用户操作的响应函数(**回调**)，并且会监听Model的变化，以便更新自己的 **状态**。**MVVM** (Model-View-ViewModel) 模式，可以帮我们构建一个结构清晰、易于维护和测试的应用程序。😏接着手撕一个例子帮助大家理解这种模式~ ### 2.1. Model 代表应用程序的 **数据模型**，负责存储数据、定义数据结构和处理数据相关的逻辑。 ```dart class UserModel { final String id; final String name; final String email; UserModel({required this.id, required this.name, required this.email}); factory UserModel.fromJson(Map json) { return UserModel( id: json['id'] as String, name: json['name'] as String, email: json['email'] as String, ); } } ``` ### 2.2. ViewModel ```dart class UserViewModel extends ChangeNotifier { UserModel? _user; // 暴露数据 UserModel? get user => _user; // 暴露命令 void fetchUserData() async { var response = await Dio().get("https://mock.apifox.com/m1/4081539-3719383-default/flutter_article/testUser"); Map? responseObject = response.data; _user = UserModel.fromJson(responseObject?['data']); // 通知View层更新 notifyListeners(); } } ``` ### 2.3. View 代表 **用户界面** 的部分，通过监听 ViewModel 的状态变化来更新自己，这里使用 **ChangeNotifierProvider** 来连接ViewModel和View，实现数据的 **双向绑定** (ViewModel的状态变化可以自动反映到View上，View上的UI操作可以通过调用 ViewModel 的方法来影响应用的状态或数据)： ```dart void main() { runApp(const MvvmApp()); } class MvvmApp extends StatelessWidget { const MvvmApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return ChangeNotifierProvider(create: (context) => UserViewModel(), child: const MaterialApp(home: UserView())); } } class UserView extends StatelessWidget { const UserView({Key? key}) : super(key: key); @override Widget build(BuildContext context) { final viewModel = Provider.of(context); return Scaffold( appBar: AppBar(title: const Text('User')), body: Center( child: viewModel.user == null ? ElevatedButton( onPressed: () { // 用户交互触发数据加载 viewModel.fetchUserData(); }, child: const Text('Load User'), ) : Text("Hello, ${viewModel.user!.name}, your email is ${viewModel.user!.email}")), ); } } ``` **运行输出结果如下**： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/33c7df76c4674756a9d7e2f5117e6b1b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=575&h=71&s=11623&e=png&b=fefafe) 😄 还是非常好理解的，然后 **状态** 又可以细分为两类： - **数据/应用状态**：如用户登录信息、应用的配置信息等。 - **页面/UI状态**：如Widget的当前选中状态、用户在表单中输入的数据、滚动位置、动画状态等。然后需要把这些状态及与状态有关的逻辑都在到 **ViewModel** 中，在Flutter中的表现就是维护一个大的**Notifier**。 ## 3. 用 Riverpod 实现 ViewModel 层 > **Tips**：对 Riverpod 不了解或不熟的童鞋，可以先移步至[《十五、玩转状态管理之——Riverpod使用详解》](https://juejin.cn/post/7359402114018689076)了解下用法。这里使用 **Riverpod 2.0** 新增的 **NotifierProvider** 来实现~ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d67287bb724d4e44b908dfbeef50819f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=628&h=305&s=98841&e=png&b=fdfcfc) 先不用 **@riverpod** 注解自动生成Provider的写法~ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d66b6811352d4267b00d3410daa7921b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=709&h=168&s=53418&e=png&b=282a36) 调用处： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/caafbc45866044e38189d31c8ec90a02~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=606&h=537&s=120083&e=png&b=282a36) 如果没有 **Flutter Riverpod Snippets** 或 **Github Copilot** 插件补全，定义Provider还是挺麻烦的，😆 用 **@riverpod注解** 解君愁~ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af8b9878f86c453f929a726a596daa04~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=698&h=180&s=43118&e=png&b=282a36) 调用处无需另外定义Provider变量，直接调： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/739f318f52b84e76959fdc41bad28bbc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=581&h=265&s=55824&e=png&b=282a36) 懵逼的话，点开下生成的源码就知道了~ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c65eac35af449debb71f751f6d9ce64~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=452&h=227&s=41191&e=png&b=282a36) 😋 不得不说 **注解生成Provider真香** ❗️ ## 4. 实战示例：引入 ViewModel 改造登录页 🤔 公司项目代码不太好展示，随手写个Demo演示下，大概流程： - **主页面**：显示去登录按钮，点击后跳转登录页。 - **登录页**：输入账号密码点击登录按钮，触发登录，登录成功，弹提示，回传登录信息，关闭页面。 - **主界面**：判断收到登录信息，刷新页面，显示登录信息。 😄 先粗暴地实现一波，然后再改造~ ### 4.1. 改造前创建下登录信息的Model类 → **LoginInfo**，就一个 **用户名** 和 **登录时间** 的字段，定义下 **fromJson()** ： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e0d8933af5e1407aaf8e30ee2a4ee0a3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=354&h=262&s=22324&e=png&b=282a36) **主页面** (main.dart)： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/23de7d10fc884ff998da6525a39ac3aa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=712&h=457&s=85588&e=png&b=282a36) **登录页** (login_page.dart)： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a2f9ce530464ac586570923b5398553~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=594&h=518&s=100236&e=png&b=292b37) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/11095247ee1b4d82ac3dedd216726e73~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=520&h=679&s=104374&e=png&b=282a36) **运行效果如下**： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e7988b9de7e43718cee568858cb6a09~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=324&h=648&s=615642&e=gif&f=34&b=fef9fe) ### 4.2. 改造后 😆 确实粗暴，接着开始我们的改造，先定义一个大的 **State类** 来存 **数据 & UI** 相关的状态，然后定义一个 **命名构造函数-initial()** 来创建一个初始状态，接着定义一个 **实例方法-copyWith()** 用于基于当前状态创建一个新的状态： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/73941259c3844856bda975f6dc5b9785~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=629&h=391&s=60578&e=png&b=282a36) 接着，把 **逻辑** 相关都丢到 **ViewModel(Notifier)** 中，这里的难点估计是 **弹窗** 或 **页面跳转**，拿不到当前的 **context**。如果是 **异步操作** 中使用传入 **BuildContext**，会显示 "**Don't use 'BuildContext's across async gaps.** " 的 **警告**： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39763327410844e7a5993daa97e6e212~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=512&h=119&s=27816&e=png&b=323541) 上面的例子，如果在5s内，用户跳转到别的页面，原先的 **BuildContext(本质是Element引用)** 所对应的Widget可能已经不在Widget树中了，此时，尝试使用这个 BuildContext 将会引发运行时错误。一种常见的解决方式： > 定义一个 **GlobalKey** 类型的 **顶层变量**，在创建 **MaterialApp** 时，通过 **navigatorKey** 属性传入，然后就可以在应用的 **任何地方** 使用 **navigatorKey.currentContext** 来获取 **BuildContext**。然后需要注意下，它可能会返回 **null** 值，你能确保它不会空的话就用 **!** ，否则还是老老实实判空~ 😄 定义一个全局的 **showSnackBar()** 和 **pop()** 代码方便代码复用： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47815e332c654af89ca0a5189c0eacec~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=623&h=244&s=39438&e=png&b=282a36) 通过 **@rivperod** 注解定义一个Notifier，重写 **build()** 返回 **LoginPageState.initial()** 初始化的状态对象，登录方法完善下逻辑，请求响应成功，设置 **state** 值为 **state.copyWith(loginInfo: loginInfo)** ，具体代码： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c4e926cc0b64bebab3c700c68448747~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=536&h=436&s=69533&e=png&b=282a36) 😄 然后是登录页： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50c8a2addf454d74845d520e8413c7aa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=537&h=759&s=140919&e=png&b=282a36) 🤣 现在是真的一点 **逻辑** 都没有了，最后的 **主页面**，直接 **watch()** → **loginPageVMProvider**，loginInfo没值显示去登录按钮，有值显示登录信息： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/753d857d19874829a2b6028e4eb9340d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=639&h=642&s=118413&e=png&b=282a36) 😄 **ref.watch(loginPageVMProvider).loginInfo** 这样的写法会在 **loginPageVMProvider** 的 **任何状态变化**时都触发 Widget 重建，而无论 **loginInfo** 是否发生变化。比如，调用的另外一个获取banner的方法，更新了另一个 **子状态**，也会触发： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2ceac08c0ebd4b92808bae1b0dc21d28~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=693&h=167&s=32033&e=png&b=282a36) 😏 如果只关心某个 **子状态**，可以用 **select()** 来指定一个函数，从Provider的状态中选择一个子状态，只有当这个子状态发生变化时，才会触发依赖于它的 Widget 的重建，**更细粒度的监听**，可以减少不必要的Widget重建，提高性能~ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab2261fcb9a546ff870e68cbd79858e9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=565&h=54&s=13922&e=png&b=282a36) ## 5. 小结 💁‍♂️ 本节在上节封装的基础上，引入了ViewModel的概念，利用 Riverpod 实现了 **UI与逻辑的完全分离**，使得代码编写起来更清爽。另外，关于Riverpod的，有些同学可能担心定义了那么多 **Provider的全局变量**，会不会有什么性能影响？其实问题不太大，因为默认是 **懒加载** 的，只有在 **首次调用时才初始化**，而且默认使用的 **AutoDisposeNotifier**，当没有任何监听器监听它时(**ref.watch/ref.listen**)，它会 **自动被清理**。 😄 对Riverpod不熟悉的建议还是多看几遍[《十五、玩转状态管理之——Riverpod使用详解》](https://juejin.cn/post/7359402114018689076)或者官方文档，看都了就用得溜了。如在本文阅读过程中有什么问题或者更好的封装思路，欢迎评论区讨论一波，集思广益，谢谢🙏 **附**：完整的代码 (只是方便演示才写在一起，实际开发可按需放到对应的文件或包中~) ```dart /// login_model.dart import 'package:dio/dio.dart'; import 'package:flutter/material.dart'; import 'package:hello_flutter/main.dart'; import 'package:riverpod_annotation/riverpod_annotation.dart'; part 'login_model.g.dart'; class LoginInfo { final String userName; final String loginTime; LoginInfo({ required this.userName, required this.loginTime, }); factory LoginInfo.fromJson(Map json) { return LoginInfo( userName: json['userName'], loginTime: json['loginTime'], ); } } class LoginPageState { final TextEditingController userNameController; final TextEditingController passwordController; final LoginInfo? loginInfo; LoginPageState({this.loginInfo, required this.userNameController, required this.passwordController}); LoginPageState.initial() : userNameController = TextEditingController(), passwordController = TextEditingController(), loginInfo = null; LoginPageState copyWith({ TextEditingController? userNameController, TextEditingController? passwordController, LoginInfo? loginInfo, }) { return LoginPageState( userNameController: userNameController ?? this.userNameController, passwordController: passwordController ?? this.passwordController, loginInfo: loginInfo ?? this.loginInfo, ); } } @riverpod class LoginPageVM extends _$LoginPageVM { @override LoginPageState build() => LoginPageState.initial(); Future login() async { final userName = state.userNameController.text; final password = state.passwordController.text; if (userName.isEmpty || password.isEmpty) { showSnackBar("请输入帐号或密码"); } else { var response = await Dio().post( "https://mock.apifox.com/m1/4081539-3719383-default/flutter_article/testLogin", data: {'username': userName, 'password': password}, ); var data = response.data['data']; if (response.data['errorCode'] == 200) { var loginInfo = LoginInfo.fromJson(data); state = state.copyWith(loginInfo: loginInfo); showSnackBar("登录成功"); pop(result: loginInfo); } else { showSnackBar("登录失败"); } } } } import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'login_model.dart'; /// login_page.dart → 登录页 class LoginPage extends ConsumerStatefulWidget { const LoginPage({super.key}); @override ConsumerState createState() => _LoginPageState(); } class _LoginPageState extends ConsumerState { @override Widget build(BuildContext context) { var loginState = ref.watch(loginPageVMProvider); var loginVM = ref.watch(loginPageVMProvider.notifier); return Scaffold( appBar: AppBar( title: const Text('登录页', style: TextStyle(color: Colors.white)), backgroundColor: Colors.red, iconTheme: const IconThemeData(color: Colors.white), ), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ TextField( controller: loginState.userNameController, decoration: const InputDecoration( labelText: '用户名', border: OutlineInputBorder(), ), ), const SizedBox(height: 20.0), TextField( controller: loginState.passwordController, decoration: const InputDecoration( labelText: '密码', border: OutlineInputBorder(), ), obscureText: true, ), const SizedBox(height: 20.0), MaterialButton( onPressed: () { loginVM.login(); }, color: Colors.red, padding: const EdgeInsets.symmetric(vertical: 16.0), child: const Text('登录', style: TextStyle(color: Colors.white)), ), ], ), ), ); } } /// main.dart → 主页面 import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:hello_flutter/api_client.dart'; import 'login_model.dart'; import 'login_page.dart'; final GlobalKey navigatorKey = GlobalKey(); void showSnackBar(String message) { if (navigatorKey.currentContext != null) { ScaffoldMessenger.of(navigatorKey.currentContext!).showSnackBar(SnackBar(content: Text(message))); } } void pop({T? result}) { if (navigatorKey.currentContext != null) { if(result != null) { Navigator.pop(navigatorKey.currentContext!, result); } else { Navigator.pop(navigatorKey.currentContext!); } } } void main() { ApiClient.init("https://mock.apifox.com/m1/4081539-3719383-default/flutter_article/"); runApp(const ProviderScope(child: MyApp())); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp(home: const HomePage(), navigatorKey: navigatorKey); } } class HomePage extends StatefulWidget { const HomePage({super.key}); @override State createState() => _HomePageState(); } class _HomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Home')), body: Center(child: Consumer(builder: (context, ref, child) { LoginInfo? loginInfo = ref.watch(loginPageVMProvider.select((value) => value.loginInfo)); return loginInfo == null ? ElevatedButton( onPressed: () { Navigator.push(context, MaterialPageRoute(builder: (context) => const LoginPage())); }, child: const Text('去登录'), ) : Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('用户名：${loginInfo.userName}'), Text('登录时间：${loginInfo.loginTime}'), ], ); }))); } } ```