Flutter完整开发实战详解(四、 Redux、主题、国际化)

  • 时间:
  • 浏览:0
  • 来源:uu快3app赚钱_uu快3大小计划注册

说完了 delegate , 接下来而且 Localizations 了。在上面的流程图中可不也能看过, Localizations 提供4个多 override 最好的依据构建 Localizations ,這個最好的依据中可不也能设置 locale,而大伙儿 须要的正是实时的动态切换语言显示

前面大伙儿 将会在 GSYState 中创建了 themeData ,此时将它设置给 MaterialApptheme 参数,时候大伙儿 通过 dispatch 改变 themeData 即可实现主题切换。

接着大伙儿 须要定义 Reducer 最好的依据 appReducer :将 GSYState 内的每4个多 参数,和对应的 action 绑定起来,返回详细的 GSYState原先大伙儿 就选则了 State 和 Reducer 用于创建 Store

如下代码,最后将 GSYLocalizations 使用到 MaterialApp 中。通过 store.dispatch 切换 Locale 即可。

And then,接下来而且 使用了。如下代码所示,通过在 build 中使用 StoreConnector ,通过 converter 转化 store.state 的数据,最后通过 builder 返回实际须要渲染的控件,原先就完成了数据和控件的绑定。当然,你也可不也能使用StoreBuilder

将会使用 Redux 的好处是:共享情况报告单一数据

前文:

《移动端跨平台开发的深层解析》

1、Widget 绑定了 Store 中的 state 数据。

最后,当你须要触发更新的时候,只须要如下代码即可。

所以大伙儿 须要先创建4个多 State 对象 GSYState 类,用于储存须要共享的数据。比如下方代码的: 用户信息、主题、语言环境 等。

作为系列文章的第四篇,本篇主要介绍 Flutter 中 Redux 的使用,并结合Redux 完成实时的主题切换多语言切换功能。

那怎样实现实时的主题切换呢?当然是通过 Redux 啦!

上面提到的 GSYLocalizations 其实是4个多 自定义对象,如下代码所示,它会根据创建时的 Locale ,通过 locale.languageCode 判断返回对应的语言实体:GSYStringBase的实现类

如上代码,GSYState 的每4个多 参数,是通过独立的自定义 Reducer 返回的。比如 themeData 是通过 ThemeDataReducer 最好的依据产生的,ThemeDataReducer 其实是将 ThemeData 和一系列 Theme 相关的 Action 绑定起来,用于和有些参数分开。原先就可不也能独立的维护和管理 GSYState 中的每4个多 参数。

如上图,Redux 的主要由三次要组成:Store 、Action 、 Reducer

Flutter的国际化按照官网文件 internationalization 看起来稍微有些多样化,也这么 提及实时切换,所以这里介绍下快速的实现。当然,少不了 Redux !

如下图,创建 Store 须要 reducer ,而 reducer 实际上是4个多 包含 stateaction 的最好的依据,并返回新的 State 。

2、Widget 通过 Action 发布4个多 动作。

大伙儿 最终将实现如下图的效果,相应代码在 GSYGithubAppFlutter 中可找到,本篇 Flutter 中所使用的 Redux 库是 flutter_redux 。

最后的最后,在改变时记录情况报告,在启动时取出后dispatch,至此主题和多语言设置完成。

自此,第四篇终于开使英文英文了!(///▽///)

如上图所示大致流程,同样是通过默认 MaterialApp 设置,自定义的多语言须要实现的是: LocalizationsDelegate Localizations 。最终流程会通过 Localizations 使用 Locale 加载這個 delegate 。所以大伙儿 要做的是:

Redux 的概念是情况报告管理,那在已有 state 的基础上,为哪些地方还须要 Redux ?

So,将会简单的业务逻辑下,Redux 并没哪些地方地方优势,甚至显得繁琐。而且 一旦框架搭起来,在多样化的业务逻辑下就会显示格外愉悦了。

3、Reducer 根据 Action 更新 state。

《Flutter详细开发实战详解(二、 快速开发实战篇)》

ThemeData 的创建提供所以参数,这里主要说 primarySwatch 参数。 primarySwatch 是4个多 MaterialColor 对象,结构由10种不同深浅的颜色组成,用来做主题色调再大约不过。

OK,现在大伙儿 可不也能愉悦的创建 Store 了。如下代码所示,在创建 Store 的同時 ,大伙儿 通过 initialState 对 GSYState 进行了初始化,而且 通过 StoreProvider 加载了 Store 而且 国际国际包裹了 MaterialApp 至此大伙儿 完成了 Redux 中的初始化构建。

《Flutter详细开发实战详解(三、 打包与填坑篇)》

如下图和代码所示,Flutter 默认提供了所以主题色,同時 大伙儿 也可不也能通过 MaterialColor 实现自定义的主题色。

试想一下,App内有多个地方使用到登陆用户的数据,这时候将会某处对用户数据做了修改,各个页面的同步更新会是一件麻烦的事情。

《跨平台项目开源项目推荐》

根据這個流程,首先大伙儿 要创建4个多 Store

如下代码,大伙儿 创建4个多 GSYLocalizations 的 Widget,通过 StoreBuilder 绑定 Store,而且 通过 Localizations.override 国际国际包裹大伙儿 须要构建的页面,将 Store 中的 locale 和 Localizations 的 locale 绑定起来。

如下代码所示,创建自定义 delegate 须要继承 LocalizationsDelegate 对象,其中主要实现 load 最好的依据。大伙儿 可不也能是通过最好的依据的 locale 参数,判断须要加载的语言,而且 返回大伙儿 自定义好多语言实现类 GSYLocalizations ,最后通过静态 delegate 对外提供 LocalizationsDelegate

将会 GSYLocalizations 对象最总要通过Localizations 加载,所以 Locale 也是在那时,通过 delegate 赋予。同時 在该 context 下,可不也能通过Localizations.of 获取 GSYLocalizations,比如: GSYLocalizations.of(context).currentLocalized.app_name

注意,将会你的 MaterialApp 也是4个多 StatefulWidget ,如下代码所示,还须要利用 StoreBuilder 国际国际包裹起来,时候大伙儿 就可不也能通过 dispatch 修改主题,通过 Theme.of(context).primaryColor 获取主题色啦。

而且 引入 Redux 后,某个页面修改了当前用户信息,所有绑定了 Redux 的控件,将由 Redux 自动同步刷新。See!这在一定程度节省了大伙儿 的工作量,而且 单一数据源在有些场景下也方便管理。同理大伙儿 上面所说的 主题多语言 切换也是这么 。

4、更新 Store 中 state 绑定的 Widget。

所以一般流程为:

Flutter 作为响应式框架,通过 state 实现跨帧渲染的逻辑,难免而且 你与 ReactReact Native 联系起来,而其中 React“广为人知”Redux 情况报告管理,其其实 Flutter 中同样适用。

《Flutter详细开发实战详解(一、Dart语言和Flutter基础)》

Flutter 中官方默认就支持主题设置,MaterialApp 提供了 theme 参数设置主题,过可不也还还还能不能通过 Theme.of(context) 获取到当前的 ThemeData 用于设置控件的颜色字体等。

继续上面流程,如下代码所示,通过 flutter_reduxcombineReducersTypedReducer ,将 RefreshThemeDataAction 类 和 _refresh 最好的依据绑定起来,最终会返回4个多 ThemeData 实例。也而且 说:用户每次发出4个多 RefreshThemeDataAction ,最终总要触发 _refresh 最好的依据,而且 更新 GSYState 中的 themeData