Flutter UI如何使用Provide实现主题切换详解

背景

provide是谷歌官方出品的一个状态管理框架，它允许在小部件树中传递数据，它被设计为scopedmodel的替代品，允许我们更加灵活地处理数据类型和数据

为什么需要状态管理

在进行项目的开发时，我们往往需要管理不同页面之间的数据共享，在页面功能复杂，状态达到几十个上百个的时候，我们会难以清楚的维护我们的数据状态，本文将以主题切换这个功能使用状态管理来讲解如何在flutter中使用provide这个状态管理框架

为什么选择provide

一开始项目使用的是scopedmodel，使用scopedmodel可以分离展示逻辑和业务逻辑，而且简单易用，但是scopedmodel有一些局限

如果模型较为复杂，当状态更新时，会有较多的不必要的更新

使用provide

• 当状态发生变化时，widget树会更新指定的节点，不会进行整颗widget树的更新
• provide有泛型的优势，相当于namespace的特性，使用过vuex的应该知道namespace的重要性，它将我们的状态分离开来
• provide被设计为scopedmodel的替代品，同样也有和scopedmodel的易用性
• provide提供了provide.stream可以以处理流的方式处理数据，不过目前还存在一些问题

项目地址

flutter-ui, 可参考项目中使用provide方法

效果

如何使用

添加依赖

查看

在pubspec.yaml中引入依赖

dependencies:
 provide: ^1.0.2 #数据管理层

执行

flutter packages get

在需要使用的页面中引入

import 'package:provide/provide.dart'

创建model （这才第一步）

新建 lib/store/models/config_state_model.dart 文件

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show changenotifier

class configinfo {
 string theme = 'red';
}
class configmodel extends configinfo with changenotifier {
 future $settheme(payload) async {
  theme = payload;
  notifylisteners();
 }
}

用法同scopedmodel差不多，不过不需要继承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 providers = providers()
..provide(provider.value(configmodel()))
..provide(provider.value(more()));

定义全局的provide （倒数第二）

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
  )
 );
}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。