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

  • 时间:
  • 浏览:0

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

ThemeData 的创建提供太久太久参数,这里主要说 primarySwatch 参数。 primarySwatch 是有一个 MaterialColor 对象,内部人员由10种不同深浅的颜色组成,用来做主题色调再相当于不过。

So,原困分析简单的业务逻辑下,Redux 并如此哪此优势,甚至显得繁琐。可是我一旦框架搭起来,在复杂的业务逻辑下就会显示格外愉悦了。

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

如下代码所示,创建自定义 delegate 时要继承 LocalizationsDelegate 对象,其中主要实现 load 最好的方法 。亲们可不时可是我通过最好的方法 的 locale 参数,判断时要加载的语言,可是我返回亲们自定义好多语言实现类 GSYLocalizations ,最后通过静态 delegate 对外提供 LocalizationsDelegate

OK,现在亲们可不时要愉悦的创建 Store 了。如下代码所示,在创建 Store 的一起去,亲们通过 initialState 对 GSYState 进行了初始化,可是我通过 StoreProvider 加载了 Store 可是我挂号印刷品邮寄了 MaterialApp 至此亲们完成了 Redux 中的初始化构建。

根据这些 流程,首先亲们要创建有一个 Store

如上图所示大致流程,同样是通过默认 MaterialApp 设置,自定义的多语言时要实现的是: LocalizationsDelegate Localizations 。最终流程会通过 Localizations 使用 Locale 加载这些 delegate 。太久太久亲们要做的是:

太久太久一般流程为:

如下代码,亲们创建有一个 GSYLocalizations 的 Widget,通过 StoreBuilder 绑定 Store,可是我通过 Localizations.override 挂号印刷品邮寄亲们时要构建的页面,将 Store 中的 locale 和 Localizations 的 locale 绑定起来。

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

《移动端跨平台开发的角度解析》

接着亲们时要定义 Reducer 最好的方法 appReducer :将 GSYState 内的每有一个参数,和对应的 action 绑定起来,返回全部的 GSYState原来亲们就选则了 State 和 Reducer 用于创建 Store

Redux 的概念是情况表管理,那在已有 state 的基础上,为哪此还时要 Redux ?

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

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

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

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

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

如下图,创建 Store 时要 reducer ,而 reducer 实际上是有一个含高 stateaction 的最好的方法 ,并返回新的 State 。

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

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

如上代码,GSYState 的每有一个参数,是通过独立的自定义 Reducer 返回的。比如 themeData 是通过 ThemeDataReducer 最好的方法 产生的,ThemeDataReducer 嘴笨 是将 ThemeData 和一系列 Theme 相关的 Action 绑定起来,用于和许多参数分开。原来就可不时要独立的维护和管理 GSYState 中的每有一个参数。

2、Widget 通过 Action 发布有一个动作。

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

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

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

注意,原困分析你的 MaterialApp 也是有一个 StatefulWidget ,如下代码所示,还时要利用 StoreBuilder 挂号印刷品邮寄起来,事先 亲们就可不时要通过 dispatch 修改主题,通过 Theme.of(context).primaryColor 获取主题色啦。

可是我引入 Redux 后,某个页面修改了当前用户信息,所有绑定了 Redux 的控件,将由 Redux 自动同步刷新。See!这在一定程度节省了亲们的工作量,可是我单一数据源在许多场景下也方便管理。同理亲们中间所说的 主题多语言 切换也是如此。

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

Flutter的国际化按照官网文件 internationalization 看起来稍微许多复杂,也如此提及实时切换,太久太久这里介绍下快速的实现。当然,少不了 Redux !

3、Reducer 根据 Action 更新 state。

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

前文:

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

继续中间流程,如下代码所示,通过 flutter_reduxcombineReducersTypedReducer ,将 RefreshThemeDataAction 类 和 _refresh 最好的方法 绑定起来,最终会返回有一个 ThemeData 实例。也倘若说:用户每次发出有一个 RefreshThemeDataAction ,最终都在触发 _refresh 最好的方法 ,可是我更新 GSYState 中的 themeData

如下图和代码所示,Flutter 默认提供了太久太久主题色,一起去亲们也可不时要通过 MaterialColor 实现自定义的主题色。

原困分析 GSYLocalizations 对象最都在通过Localizations 加载,太久太久 Locale 也是在那时,通过 delegate 赋予。一起去在该 context 下,可不时要通过Localizations.of 获取 GSYLocalizations,比如: GSYLocalizations.of(context).currentLocalized.app_name

原困分析使用 Redux 的好处是:共享情况表单一数据

前面亲们原困分析在 GSYState 中创建了 themeData ,此时将它设置给 MaterialApptheme 参数,事先 亲们通过 dispatch 改变 themeData 即可实现主题切换。

说完了 delegate , 接下来倘若 Localizations 了。在中间的流程图中可不时要都看, Localizations 提供有一个 override 最好的方法 构建 Localizations ,这些 最好的方法 中可不时要设置 locale,而亲们时要的正是实时的动态切换语言显示

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

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

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

太久太久亲们时要先创建有一个 State 对象 GSYState 类,用于储存时要共享的数据。比如下方代码的: 用户信息、主题、语言环境 等。