Flutter UI使用provide实现主题切换

terry 2年前 (2023-09-23) 阅读数 64 #移动小程序

provide是Google官方出品的状态管理框架Flutter-Provide。它允许在小部件树中传递数据。它被设计为 ScopedModel 的替代品，它可以让我们更灵活地处理数据。类型和数据

为什么需要状态管理

在开发项目时，我们经常需要管理不同页面之间的数据交换。如果页面功能复杂，状态达到几十上百，我们就很难保持我们的数据状态清晰。本文将通过主题切换功能使用状态管理来讲解如何在 Flutter 中使用 Provider 状态管理框架

为什么选择 Provide

项目一开始使用的是 ScopedModel。可以将显示逻辑和业务逻辑分离，简单易用，但是 ScopedModel 有一定的局限性

如果模型比较复杂，状态更新的时候会出现更多不必要的更新

使用 Provide

当状态。用过vuex的应该都知道namespace的重要性。它将我们的状态分离
Provide 被设计为 ScopedModel 的替代品，并且也具有与 ScopedModel 相同的简单用法
Provide 提供了 Provide.stream 以流的方式处理数据，但是仍然存在一些问题

项目地址

flutter-ui，可以参考项目中offer方法的使用

效果

使用方法

添加依赖

查看pub-install

引入依赖

引入。执行

flutter packages get
复制代码

在需要使用的页面引入

import 'package:provide/provide.dart'
复制代码

Create Model（这是第一步）

新建lib/store/models/config_state_model.dart文件，但不是必须的'继承Model类，在ChangeNotifier中混合即可，通过NotifyListeners通知监听器刷新

封装Store（是的，我们已经差不多完成这里的所有步骤了）

创建一个新的lib/store/index.dart文件

import 'package:flutter/material.dart'
import 'package:provide/provide.dart'
    show
        Providers
        Provider,
        Provide,
        ProviderNode;
import './models/config_state_model.dart' show ConfigModel;

class Store {
    //  我们将会在main.dart中runAPP实例化init
    static init({model, child, dispose = true}) {
        final providers = Providers()
            ..provide(Provider.value(ConfigModel()));
        return ProviderNode(
            child: child,
            providers: providers,
            dispose: dispose
        );
    }
    
    //  通过Provide小部件获取状态封装
    static connect<T>({builder, child, scope}) {
        return Provide<T>(
            builder: builder,
            child: child,
            scope: scope
        );
    }
    
    //  通过Provide.value<T>(context)获取封装
    static T value<T>(context, {scope}) {
        return Provide.value<T>(context, scoped: scoped);
    }
}
复制代码

如果需要管理多个状态，只需

final Provider = Provider() ..provide(Provider.value(ConfigModel())) ..provide(Provider.value(More( )));

定义全局提供（倒数第二个）

lib /main.dart 文件

import 'package:flutter/material.dart';
import 'package:efox_flutter/store/index.dart'
    show Store, ConfigModel;

// 将状态放入到顶层
void main() => runApp(Store.init(child: MainApp()));
class MainApp extends StatefulWidget {
    @override
    MainAppState createState() => MainAppState();
}
class MainAppState extends State<MainApp> {
    @override
    Widget build(BuildContext context) {
        //  获取Provide状态
        return Store.connect<ConfigModel>(
            builder: (context, child, model) {
                return MaterialApp(
                    theme: ThemeData(
                        primaryColor: Color(model.theme)
                    )
                );
            }
        );
    }
}

复制代码

更改主题状态（已完成）

import 'package:flutter/material.dart';
import 'package:efox_flutter/store/index.dart'
    show ConfigModel, Store;

/**
* name: 颜色名称 如 red
* color：颜色值
* context： 上下文
*/
Widget Edage(name, color, context) {
    return GestrueDetector(
        onTap: () {
            // 修改主题状态
            Store.value<ConfigModel>(context).$setTheme(name)
        }
        child: Container(
            color: Color(color),
            height: 30,
            widtg: 30
        )
    );
}

作者：YYDev链接：https://ju. im/post/5ca5e240f265da30c1725021
来源：掘金
版权归作者所有。如需商业转载，请联系求作者授权。非商业转载请来源。