江苏龙网

  1. 首页 > 人文 > >

『CSDN』不用掉一根头发！用 Flutter + Dart 快速构建一款绝美移动 App( 三 )


本文插图
[图2] CommonData CommonData是一个单例 ， 它有一个内部构造函数 ， 该构造函数将其唯一的实例存储在自己的某个静态字段中 。 CommonData类定义不会在应用程序的其他任何地方使用 ， 仅在这个文件中用于声明commonData实例 。 DictionariesService.get方法会返回Future<DictionariesService> ， 它实质上实是一个promise 。 这意味着我们可以使用await等它返回结果 ， 并在一切准备就绪后继续执行initialize ， 或者使用.then(…)并尽早返回 。 我们希望initialize在收到响应后完成 ， 因此我们使用await 。 稍后我们将介绍DictionaryService.get的实现 。经过一番研究后 ， 我发现在绘制UI之前运行commonData.initialize非常简单 ， 因此我们将其放到main中（如图3所示） 。
『CSDN』不用掉一根头发！用 Flutter + Dart 快速构建一款绝美移动 App
本文插图
[图3] 在运行应用之前初始化commonData 这样一来 ， 无论我们在应用任何位置 ， 都可以确信commonData已被初始化 ， 因为应用本身都是在initialize完成后执行的 。 这样的解决方案在许多情况下都很管用 ， 例如服务器存储的应用程序配置文件或主题、数据暂存、应用程序设置等 。 对于异步操作 ， 我们应该在主页画面上进行处理 ， 因为我们可以在主页画面上显示加载进度条 。 这样可以避免在应用启动时用户看到空白的屏幕 ， 然后怀疑应用程序是不是崩溃了 。 因此 ， 如果我们必须在应用程序正常启动之前做点什么 ， 那么最好是执行可预测、可忽略执行时间的操作 ， 或者创建一个单独的“加载”画面 ， 并显示一些动画和明确的“加载”消息 ， 让用户放心地等待操作执行 ， 并在完成操作后返回主页 。 这种“尴尬的预加载”就留在这里作为UX的反面教材吧 。下面 ， 让我们来看看main下方的MyApp类 。 它的主体主要是重写build(BuildContext)方法 ， 该方法会在每次重绘MyApp小部件时调用 。 我们的应用有多个画面：主页和创建保单向导的5个步骤（保单类型、产品、覆盖范围、投保人和投保对象） ， 因此我对相关主题进行了仔细研究（如图4所示） 。
『CSDN』不用掉一根头发！用 Flutter + Dart 快速构建一款绝美移动 App
本文插图
[图4] Flutter应用程序的导航研究 在Flutter中 ， 导航称为“路由” 。 我已经根据教程创建了一些路由（如图5所示） 。 默认的初始路由（MyHomePage小部件）和五个向导步骤 。 我们是否需要访问构建上下文尚有待观察 ， 但先放在这里总没有坏处 。
『CSDN』不用掉一根头发！用 Flutter + Dart 快速构建一款绝美移动 App
本文插图
[图5] Flutter应用中基本的路由
Material Design中的Flutter 值得一提的是 ， 由于我们的应用使用了Material控件集 ， 并且是MaterialApp实例 ， 因此我们可以按照Material Design原则快速修改外观 。 ThemeData类包含了“material design主题的颜色和版式数据” 。 在应用程序中可以通过静态方法Theme.of(BuildContext)访问ThemeData ， 改变它的各种属性 ， 以更改主题提供的默认值 。 现在 ， 我们只需设置primarySwatch（应用程序的主色调及各种明度的颜色）和accentColor（也是各种明度的颜色组合 ， 是应用的辅助色） 。 如果我们使用主题的默认值和/或生成的值（我们应尽力做到这一点） ， 则最终的UI看上去应该不会太差 。 如果我们不想使用默认的颜色 ， 则可以自定义颜色（如图6所示） 。 不过 ， 这需要进行大量的工作（除非客户提供了样式指导） ， 而且我不想破坏审美 ， 因此就按照简单的方法来吧 。 网上有无数的材质色样生成器 ， 如果你想提供“基本”的色调 ， 则可以生成一个 。 此外 ， 还有一个errorColor设置 ， 但是作为一个涉猎UI/UX领域多年的人 ， 我建议你谨慎使用这个设置 ， 因为标准的红色是错误指示的行业标准 。 即便颜色方案允许修改 ， 也应该尽量避免 ， 最多只是稍微修改一下明度即可 。这个过程也可以用来测试“热重载”：尝试更改主题颜色 ， 保存 ， 然后就能立即看到应用的变化 。 这个功能我非常满意 。


推荐阅读


上一篇：【央视网】国家新闻出版署开展“3&#183;15”印刷质量质检活动

下一篇：【黑奇士】入职小米六年，贪污24万，美女总监被判八个月