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

任何的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: flutter
  material_design_icons_flutter: ^5.0.5955-rc.1
  get:

在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 = "消息";
  @override
  State<MessagePage> createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage> {

  final CounterController c = Get.put(CounterController());

  @override
  Widget 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 = "个人中心";
  @override
  State<UserCerterPage> createState() => _UserCerterPageState();
}

class _UserCerterPageState extends State<UserCerterPage> {

  late Future<Album> futureAlbum;

  Album album = Album(userId: 0, id: 0, title: '');

  @override
  void initState(){ 
    super.initState();
    futureAlbum =  fetchAlbum();
    futureAlbum.then((value) => setState(() {
      album = value;
    }));
  }
  // 获取到对应的state
  final CounterController c = Get.find();


  @override
  Widget 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}")),这种显示方式，才能更新生效。