Flutter 中的数据共享

快来打我* 2022-09-04 05:46 204阅读 0赞

以前使用其他框架的时候，比如vue 会有vuex，react会有redux等数据共享方式。而刚使用flutter的时候，因为其编程语言和框架特性的不一样，可能一时半会很难上手。今天就来聊聊flutter中的数据共享。

一、InheritedWidget

InheritedWidget是flutter中的一个功能型的widget，适用于在widget树中共享数据的场景，比如我们在应用的根widget树中通过InheritedWidget共享了一个数据，那么在它所有的子widget中都可以获取到这个共享的数据。

class ShareDataWidget extends InheritedWidget {
      ShareDataWidget({
        required this.data,
        required Widget child
      }) :super(child: child);
    
    
      final int data; //需要在子树中共享的数据，保存点击次数
    
    
      //定义一个便捷方法，方便子树中的widget获取共享数据 “.of”方法通过向上传递传递的上下文树来返回使用它的小部件的实例。
      //使用 as 运算符将对象强制转换为特定类型
      //添加 ! 断言 表示非空，赋值成功
      static ShareDataWidget ? of(BuildContext context) {
        return context.getElementForInheritedWidgetOfExactType<ShareDataWidget>()!.widget as ShareDataWidget;
      }
    
    
      //该回调决定当data发生变化时，是否通知子树中依赖data的Widget
      @override
      bool updateShouldNotify(ShareDataWidget old) {
        //如果返回true，则子树中依赖(build函数中有调用)本widget
        //的子widget的`state.didChangeDependencies`会被调用
        return old.data != data;
      }
    }
    class TestWidget extends StatefulWidget{
      @override
      State<StatefulWidget> createState() { return TestWidgetState();
      }
    }
    class TestWidgetState extends State<TestWidget>{
      @override
      Widget build(BuildContext context) { return Text(ShareDataWidget.of(context)!.data.toString());
      }
    }
    class InheritedWidgetRoute extends StatefulWidget{
      @override
      State<StatefulWidget> createState() { return InheritedWidgetRouteState();
      }
    }
    class InheritedWidgetRouteState extends State<InheritedWidgetRoute>{
      int count = 0;
      @override
      Widget build(BuildContext context) {
        return Center(
          child: ShareDataWidget(
            data: count,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
                  child: TestWidget(),
                ),
                RaisedButton(
                  onPressed: (){
                    setState(() { count++; });
                    },
                  child: Text("点击+1"),
                ),
              ],
            ),
          ),
        );
      }
    
    
    }
    class StudyInheritedWidget extends StatelessWidget{
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("共享数据"),
          ),
          body: Container(
            child: InheritedWidgetRoute(),
          ),
        );
      }
    }

1. 在 CountInheritedWidget 中提供共享计数的数量 count

2. 同时为外部提供统一的获取 CountInheritedWidget 实例的 of 方法

3. 最后再重写 updateShouldNotify 方法，来通知依赖该共享 count 的子 widget 进行更新

二、eventBus

class CustomEvent {
      String msg;
      CustomEvent(this.msg);
    }
    EventBus eventBus = new EventBus();
    class FirstPage extends StatefulWidget {
      @override
      State<StatefulWidget> createState()=>_FirstPageState();
    }
    class _FirstPageState extends State<FirstPage> {
      String msg = "通知：";
      late StreamSubscription subscription;
      @override
      void initState() {
        //监听CustomEvent事件，刷新UI
        subscription = eventBus.on<CustomEvent>().listen((event) {
          print(event);
          setState(() {
            msg += event.msg;
          });
        });
        super.initState();
      }
    
    
      dispose() {
        subscription.cancel();//State销毁时，清理注册
        super.dispose();
      }
    
    
    
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text("First Page"),),
    
    
          body:Text(msg),
          floatingActionButton: FloatingActionButton(onPressed()=>Navigator.push(context,MaterialPageRoute(builder: (context) => SecondPage()))),
        );
      }
    }
    
    
    class SecondPage extends StatelessWidget {
    
    
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text("Second Page"),),
          body: RaisedButton(
              child: Text('Fire Event'),
              // 触发CustomEvent事件
              onPressed: ()=> eventBus.fire(CustomEvent("hello"))
          ),
        );
      }
    }

三、Provider

1、首先更新依赖包

flutter pub add provider

2、这个时候点开pubspec.yaml文件可以看到此时多了provider的依赖

![20210811145514230.png][]

这个时候点击一下as右上角的这两个选项，更新一下全局的包

![20210811145514291.png][]

接下来打开main.dart文件

*  引入provider ：import 'package:provider/provider.dart';
 *  改写main，结构体大概如下

void main() {
      runApp(
        /// Providers are above [MyApp] instead of inside it, so that tests
        /// can use [MyApp] while mocking the providers
        MultiProvider(
          providers: [
            ChangeNotifierProvider(create: (_) => Counter()),
          ],
          child: const MyApp(),
        ),
      );
    }

其中create返回的是你放全局变量的类，这里我用一个外部的GlobalData类来承载全局变量

import 'package:flutter/material.dart';
    import 'package:provider/provider.dart';
    import 'routes/home/home.dart';
    import 'routes/mine/minehome.dart';
    import 'globalData.dart';
    void main() {
      runApp(MyApp());
    }
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MultiProvider(
          providers: [
            ChangeNotifierProvider(create: (_) => GlobalData()),
          ],
          child: Consumer<GlobalData>(
          builder: (context, darkModeProvider, _) {
            return MaterialApp(
                home: MyHomePage(),
            );
          },
    
    
        ));
      }
    }
    
    
    class MyHomePage extends StatelessWidget {
      MyHomePage({Key? key}) : super(key: key);
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 2,
          child: Scaffold(
            body: TabBarView(
              children: [
                Home(),
                MineHome(),
              ],
            ),
            bottomNavigationBar: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home),text: “home",),
                Tab(icon: Icon(Icons.perm_identity),text: “mine",)
              ],
              unselectedLabelColor: Colors.blueGrey,
              labelColor:Color(0xff8d4b0e),
              indicatorSize: TabBarIndicatorSize.label,
            ),
          ),
        );
      }
    }

gloablData.dart文件内容

import 'package:flutter/foundation.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_blue/flutter_blue.dart';
    import 'package:provider/provider.dart';
    import 'dart:convert';
    import 'package:shared_preferences/shared_preferences.dart';
    import 'package:myflutter/models/index.dart';
    import 'package:flutter/material.dart';
    
    
    import './common/theme.dart';
    class GlobalData with ChangeNotifier, DiagnosticableTreeMixin {
    
    
      //是否已经登录
      bool _hasLogin = false;
    
    
      //用户信息
      late User _user;
    
    
       List <DeviceListItem> _globalDeviceList = <DeviceListItem>[];
    
    
       List <BindDevice> _gloablBindDeviceList = <BindDevice>[];
    
    
       List <BluetoothDevice> _globalConnectedDevices = <BluetoothDevice> [];
    
    
      int _count = 0;
    
    
      int _themeMode = 0;//0是浅色模式，1是深色模式
    
    
      ThemeData _globalTheme = lightTheme;
    
    
      bool get hasLogin => _hasLogin;
    
    
      int get count => _count;
    
    
      User get user => _user;
    
    
      List <DeviceListItem> get globalDeviceList => _globalDeviceList;
    
    
      List <BindDevice> get gloablBindDeviceList => _gloablBindDeviceList;
    
    
      List <BluetoothDevice> get globalConnectedDevices => _globalConnectedDevices;
    
    
      int get themeMode => _themeMode;
      ThemeData get  globalTheme => _globalTheme;
    
    
      void UpdateUserInfo(User user){
        _user = user;
        _hasLogin = true;
        notifyListeners();
        this.setUserToLocal(user,true);
      }
      void Logout(){
        _hasLogin = false;
        this.setUserToLocal(this._user,false);
        notifyListeners();
    
    
      }
    
    
      void UpdateGlobalDeviceList(List <DeviceListItem> deviceList){
        _globalDeviceList = deviceList;
        String deviceS = json.encode(deviceList);
        this.setDataToLocal(0,'myflutter_globalDeviceList',deviceS);
        notifyListeners();
    
    
      }
      void updateGlobalBindDevice(List <BindDevice> bindDevice){
        _gloablBindDeviceList = bindDevice;
        String deviceS = json.encode(bindDevice);
        this.setDataToLocal(0,'myflutter_globalBindDevice',deviceS);
        notifyListeners();
      }
    
    
      void addDeviceToConnectedDevices(device){
        _globalConnectedDevices.add(device);
      }
    
    
      void increment() {
        _count++;
        notifyListeners();
      }
    
    
      void setUserToLocal(User user,isLogin){
        if(isLogin){
          String userS = json.encode(user);
          this.setDataToLocal(0,'myflutter_userInfo',userS);
          this.setDataToLocal(1,'myflutter_hasLogin',true);
        }else{
          this.setDataToLocal(1,'myflutter_hasLogin',false);
    
    
        }
      }
    
    
      void setDataToLocal(type,key,value)async{
        SharedPreferences prefs = await SharedPreferences.getInstance();
        if(type == 0){
          await prefs.setString(key, value);
        }else if(type == 1){
          await prefs.setBool(key, value);
        }
      }
    
    
      void changeThemeMode(){
        if(_themeMode == 1){
          _themeMode = 0;
          _globalTheme = lightTheme;
        }else{
          _themeMode = 1;
          _globalTheme = darkTheme;
        }
        notifyListeners();
      }
    
    
      /// Makes `Counter` readable inside the devtools by listing all of its properties
      @override
      void debugFillProperties(DiagnosticPropertiesBuilder properties) {
        super.debugFillProperties(properties);
        properties.add(IntProperty('count', count));
    
    
      }
    }
    
    
    
    接下来 在其他页面中，使用
    import 'package:flutter/material.dart';
    import 'package:myflutter/routes/home/home.dart';
    import 'package:provider/provider.dart';
    import 'package:myflutter/globalData.dart';
    import '../login.dart';
    var homecolor = Color(0xff8d4b0e);
    
    
    class MineHome extends StatelessWidget {
      const MineHome({Key? key}) : super(key: key);
      void changeTheme(context){
        Provider.of<GlobalData>(context,listen: false).changeThemeMode();
      }
      @override
      Widget build(BuildContext context) {
        return Container(
    //      color: Color(0xfffff5f5f5),
          child: Column(
            children: [
              context
                  .watch<GlobalData>()
                  .hasLogin ? LoginWidget() : UnLoginWidget(),
              RaisedButton(onPressed: ()=>changeTheme(context), child: Text('切换主题'))
            ],
          )
        );
      }
    }
    
    
    class LoginWidget extends StatelessWidget{
    
    
      void logout(context){
        Provider.of<GlobalData>(context,listen: false).Logout();
      }
      @override
      Widget build(BuildContext context) {
        return Container(
          width:MediaQuery.of(context).size.width,
          height: 200,
          padding: EdgeInsets.only(left: 20,right: 20,),
    //      color: Colors.white,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Image.network(context.watch<GlobalData>().user.image,width: 60,height: 60,),
                  Container(
                      margin: EdgeInsets.only(left: 20),
                      child:Text(context.watch<GlobalData>().user.nickname)
                  )
                ],
              ),
              GestureDetector(
                child: Container(
                  width: 80,
                  height: 30,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('退出',style: TextStyle(color: homecolor,fontSize: 16),),
                    ],
                  ),
                  decoration: new BoxDecoration(
    //                color: Colors.white,
                    border: Border.all(color: homecolor),
                    borderRadius: BorderRadius.all(Radius.circular(8.0)),
                  ),
                ),
                onTap: () => {
                  logout(context)
                },
    
    
              ),
            ],
          ),
        );
    
    
      }
    }
    class UnLoginWidget extends StatelessWidget {
      void LoginMethod(context){
        Navigator.push( context,
            MaterialPageRoute(builder: (context) {
              return Login();
            }
            )
        );
      }
    
    
      @override
      Widget build(BuildContext context) {
        return Container(
          width:MediaQuery.of(context).size.width,
          height: 200,
          padding: EdgeInsets.only(left: 20,right: 20,),
    //      color: Colors.white,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Icon(Icons.person,size: 60,),
                  Container(
                    margin: EdgeInsets.only(left: 20),
                    child:Text('未登录'),
                  )
                ],
              ),
              GestureDetector(
                child: Container(
                  width: 80,
                  height: 30,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('登录',style: TextStyle(color: homecolor,fontSize: 16),),
                    ],
                  ),
                  decoration: new BoxDecoration(
    //                color: Colors.white,
                    border: Border.all(color: homecolor),
                    borderRadius: BorderRadius.all(Radius.circular(8.0)),
                  ),
                ),
                onTap: () => {
                  LoginMethod(context)
                },
    
    
              ),
            ],
          ),
        );
      }
    }

[20210811145514230.png]: /images/20220829/160d0042a3c94e4eb4dcdd2002be7bf3.png
[20210811145514291.png]: /images/20220829/6ada26bede314e1a9fa439402896f211.png