颤振如何实现应用主题切换 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要讲解了颤振如何实现应用主题切换,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

应用主题切换已经成为了一种流行的用户体验,丰富了应用整体UI视觉效果,例如,白天夜间模式切换。实现该功能的思想其实不难,就是将涉及主题的资源文件进行全局替换更新。说到这里,我想你肯定能联想到一种设计模式:观察者模式。多种观察对象(主题资源)来观察当前主题更新的行为(被观察对象),进行主题的更新。今天和大家分享在,颤振平台上如何实现主题更换。

效果

在颤振项目中,MaterialApp组件为开发者提供了设置主题的api:

 const MaterialApp ({
　　…
　　这一点。主题,//主题
　　…
　　})

通过主题属性,我们可以设置在MaterialApp下的主题样式.theme是ThemeData的对象实例:

ThemeData ({ 　　　　亮度亮度, 　　MaterialColor primarySwatch, 　　颜色primaryColor, 　　亮度primaryColorBrightness, 　　颜色primaryColorLight, 　　颜色primaryColorDark, 　　　　… 　　　　})

ThemeData中包含了很多主题设置,我们可以选择性的改变其中的颜色,字体等等,所以我们可以通过改变primaryColor来实现状态栏的颜色改变,并通过主题来获取当前,primaryColor颜色值,将其赋值到其他组件上即可。在触发主题更新行为时,通知ThemeData的primaryColor改变行对应颜色值只有了以上思路,接下来我们通过两种方式来展示如何实现主题的全局更新。

在实例中我们以一下主题颜色为主:

/* * 　　*主题选项　　*/进口& # 39;包:颤振/material.dart& # 39;; 　　　　最后ListthemeList=[ 　　Colors.black, 　　Colors.red, 　　Colors.teal, 　　Colors.pink, 　　Colors.amber, 　　Colors.orange, 　　Colors.green, 　　Colors.blue, 　　Colors.lightBlue, 　　Colors.purple, 　　Colors.deepPurple, 　　Colors.indigo, 　　Colors.cyan, 　　Colors.brown, 　　Colors.grey, 　　Colors.blueGrey 　　];

颤振中EventBus提供了事件总线的功能,以监听通知的方式进行主体间通信。我们可以在主。飞镖入口文件下注册主题修改的监听,通过EventBus发送通知来动态修改主题。核心代码如下:

 @override
　　空白initState () {
　　super.initState ();
　　应用程序。eventBus=new eventBus ();
　　themeColor=ThemeList [widget.themeIndex];
　　this.registerThemeEvent ();
　　}/* *
　　*注册主题切换监听
　　*/空白registerThemeEvent () {
　　Application.eventBus.on ()。听(ThemeChangeEvent> changeTheme()异步{
　　Application.eventBus。火(新ThemeChangeEvent (1));
　　}

了解反应,,反应Naitve开发的朋友对状态管理框架肯定都不陌生,例如Redux , Mobx,,通量等等。状态框架的实现可以帮助我们非常轻松的控制项目中的状态逻辑,使得代码逻辑清晰易维护.Flutter借鉴了反应的状态控制,同样产生了一些状态管理框架,例如flutter_redux, scoped_model,集团。接下来我们使用scoped_model的方式实现主题的切换只关于scoped_model的使用方式可以参考酒吧仓库提供的文档:https://pub.dartlang.org/packages/scoped_model

1。首先定义主题模型

/* * 　　*主题模型　　*创建由Songlcy 　　*/进口& # 39;包:scoped_model/scoped_model.dart& # 39;; 　　　　抽象类{ThemeStateModel扩展模型　　　　int _themeIndex; 　　得到themeIndex=比;_themeIndex; 　　　　空白changeTheme (int themeIndex)异步{ 　　_themeIndex=themeIndex; 　　notifyListeners (); 　　} 　　}

,在ThemeStateModel中,定义了对应的主题下标,changeTheme()方法为更改主题,并调用notifyListeners()进行全局通知。

2。注入模型

 @override
　　小部件构建(BuildContext上下文){
　　返回ScopedModel (
　　模型:MainStateModel (),
　　孩子:ScopedModelDescendant (
　　建造者:(上下文,孩子,模型){
　　返回MaterialApp (
　　主题:ThemeData (
　　primaryColor: themeList [model.themeIndex]
　　），
　　:首页(),
　　）;
　　}，
　　)
　　）;
　　}

3。修改主题

 changeTheme (int指数)异步{
　　int themeIndex=指数;
　　MainStateModel()的时候(上下文).changeTheme (themeIndex);
　　}颤振如何实现应用主题切换