当前位置：首页 > news >正文

flutter: 用riverpod分离view层和viewmodel层

news 2026/5/5 19:31:04

一，安装

项目地址:

https://pub.dev/packages/flutter_riverpod

安装:

dependencies:flutter:sdk: fluttergo_router: ^17.2.3flutter_riverpod: ^3.2.1

二，代码：

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:myrouter/router/router.dart';void main() {// 包裹ProviderScope，使整个APP可以使用RiverpodrunApp(const ProviderScope(child: MyApp(),),);
}class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp.router(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),routerConfig: router,);}

router.dart

import 'package:myrouter/pages/home_page.dart';
import 'package:go_router/go_router.dart';
import 'package:myrouter/views/UserView.dart';final router = GoRouter(routes: [GoRoute(path: "/",builder: (context, state) => const HomePage(),),GoRoute(path: '/setting',builder: (context, state) {// ✨ 核心代码：从 state.uri.queryParameters 中提取参数final id = state.uri.queryParameters['id'] ?? 0;final name = state.uri.queryParameters['name'] ?? '';final idint = int.tryParse(id?.toString() ?? '') ?? 0;return UserView(id: idint,name: name,);},)
]);

UserModel.dart


class UserModel {final int id;final String name;UserModel({required this.id, required this.name});
}

home_page.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';class HomePage extends StatefulWidget {const HomePage({super.key});@overrideState<HomePage> createState() => _HomePageState();
}class _HomePageState extends State<HomePage> {@overrideWidget build(BuildContext context) {String name = '苏轼';int id = 123;return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text('主页'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('主页',style: TextStyle(fontSize: 40),),// 点击跳转到设置页面ElevatedButton(onPressed: () => GoRouter.of(context).push('/setting?name=${name}&id=${id}'),style: ElevatedButton.styleFrom(foregroundColor: Theme.of(context).colorScheme.onSecondary,backgroundColor: Theme.of(context).colorScheme.secondary,),child: const Text('跳转到设置页面'),)],),),);}
}

UserViewModel.dart

import 'package:flutter_riverpod/flutter_riverpod.dart';import '../models/userModel.dart';// ViewModel: 负责业务逻辑
class UserViewModel extends Notifier<UserModel?> {@overrideUserModel? build() => null; // 初始状态为空// 更新用户信息void setUser(int id, String name) {state = UserModel(id: id, name: name);}// 模拟修改用户信息的方法void updateUserInfo(int newId, String newName) {state = UserModel(id: newId, name: newName);}
}// 全局 Provider：让 View 可以访问这个 ViewModel
final userProvider = NotifierProvider<UserViewModel, UserModel?>(() {return UserViewModel();
});

UserView.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';import '../viewmodels/UserViewModel.dart';class UserView extends ConsumerStatefulWidget {final int id;final String name;const UserView({super.key, required this.id, required this.name});@overrideConsumerState<UserView> createState() => _DetailPageState();
}class _DetailPageState extends ConsumerState<UserView> {@overridevoid initState() {super.initState();// 💡 关键点：进入页面时，将路由参数存入 ViewModelFuture.microtask(() {ref.read(userProvider.notifier).setUser(widget.id, widget.name);});}@overrideWidget build(BuildContext context) {// 监听 ViewModel 中的数据变化final user = ref.watch(userProvider);return Scaffold(appBar: AppBar(title: const Text('详情页')),body: Center(child: user == null? const CircularProgressIndicator(): Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('ID: ${user.id}', style: const TextStyle(fontSize: 24)),Text('姓名: ${user.name}', style: const TextStyle(fontSize: 24)),const SizedBox(height: 20),ElevatedButton(onPressed: () {// ✨ 核心：调用 ViewModel 的方法修改数据ref.read(userProvider.notifier).updateUserInfo(101, "杨万里");},child: const Text('更新为杨万里'),),],),),);}
}