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

【Flutter3.8x】flutter从入门到实战基础教程(八):公共state的集中管理机制

ds 2025/8/5 15:41:50

任何的app都避免不了state的全局管理，原生也好，vue/react/angular也好，都会遇到全局state的业务

如何在flutter中，管理好全局的state也是我们需要考虑的问题。

官网中已经给我们列出了很多的解决方案，
参考地址：https://docs.flutter.cn/data-and-backend/state-mgmt/options

下面我们来实现下跨页面跨组件全局state共享，使用的第三方库是Get,官网文档地址 get 4.7.2

实现效果

模拟业务需求，在消息页面添加购物数据，在个人中心页面能同步购物数据，同时点击该条记录可以模拟清空购物车数据
请添加图片描述

代码实现

安装依赖，没有版本号，可以忽略不写

dependencies:flutter:sdk: fluttermaterial_design_icons_flutter: ^5.0.5955-rc.1get:

在lib文件下新建一个专门管理state的文件夹
在这里插入图片描述
在index.dart中创建我们需要的state

import 'package:get/get.dart';class CounterController extends GetxController{var count = 100.obs;increment() => count++;resetCount() => count.value = 0;
}

包括页面需要展示的数据count,以及我们需要改变数据的两个方法

准备工作完成，我们在widge中使用方法

修改根文件，我这里是main.dart

使用GetMaterialApp替换MaterialApp

void main() => runApp(GetMaterialApp(home: Home()));

在消息页面，我们使用定义好的state

import 'package:flutter/material.dart';
import 'package:flutter_app_01/store/index.dart';
import 'package:get/get.dart';class MessagePage extends StatefulWidget {const MessagePage({super.key});static const  String title = "消息";@overrideState<MessagePage> createState() => _MessagePageState();
}class _MessagePageState extends State<MessagePage> {final CounterController c = Get.put(CounterController());@overrideWidget build(BuildContext context) {return  Center(child:  Column(children: [Obx(() => Text("Clicks: ${c.count}")),ElevatedButton(onPressed:(){// Navigator.pushNamed(context, "/message-detail",arguments: { "id": "456"});c.increment();print(c.count);},// Navigator.push(context, MaterialPageRoute(builder: (context) => const MessageDetailPage(id:'123')));child: Text('添加到购物车'),), ],));}
}

在个人中心页面再次使用定义好的state

import 'package:flutter/material.dart';
import 'package:flutter_app_01/pages/mock/Album.dart';
import 'package:flutter_app_01/store/index.dart';
import 'package:flutter_app_01/utils/request.dart';
import 'package:get/get.dart';class UserCerterPage extends StatefulWidget {const UserCerterPage({super.key});static const  String title = "个人中心";@overrideState<UserCerterPage> createState() => _UserCerterPageState();
}class _UserCerterPageState extends State<UserCerterPage> {late Future<Album> futureAlbum;Album album = Album(userId: 0, id: 0, title: '');@overridevoid initState(){ super.initState();futureAlbum =  fetchAlbum();futureAlbum.then((value) => setState(() {album = value;}));}// 获取到对应的statefinal CounterController c = Get.find();@overrideWidget build(BuildContext context) {return Container(decoration: BoxDecoration(// color: Colors.red),child: ListView(children: [ListTile(leading: Icon(Icons.person),title: Text('个人资料'),onTap: () => {Navigator.pushNamed(context, '/profile')},),ListTile(leading: Icon(Icons.settings),title: Text('设置'),),ListTile(leading: Icon(Icons.unarchive_rounded),title: Text('TDdesign ui'),onTap: () => {Navigator.pushNamed(context, '/design-td')},),ListTile(leading: Icon(Icons.logout),title: Text('退出登录'),),ListTile(leading: Icon(Icons.exit_to_app),title: Text(album.title),),ListTile(leading: Icon(Icons.exit_to_app),// 使用Obx展示Get处理过的数据title: Obx(() => Text("Clicks: ${c.count}")),onTap: () {c.resetCount();},),],),);}
}

注意:在展示Get处理过的数据时，如果没做修改处理页面是不会更新的，但是打印的结果确实是最新的，是不是跟react、vue很像了
在这里插入图片描述
所以，我们必须在要使用这个数据的地方，改为title: Obx(() => Text("Clicks: ${c.count}")),这种显示方式，才能更新生效。