江苏龙网

  1. 首页 > 人文 > >

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


『CSDN』不用掉一根头发！用 Flutter + Dart 快速构建一款绝美移动 App
本文插图
[图6] 自定义颜色的示例
主页 主页基本上就是一个列表 ， 里面展示了每个保单 ， 每个列表项可以展开显示保单的详细信息 ， 另外还有一个创建新保单的选项 。 因此 ， 每个列表项应该是有状态的 ， 因为列表项的外观会发生变化大 ， 但是整个页面可以是无状态的 。 主页显示了一个可变长度的列表 ， 但是在其生命周期内 ， 其中的元素和值不会发生变化 。 请注意 ， 如果我们没有将每个列表项分成独立的小部件（而是在一个类中处理所有内容） ， 那么页面就必须是有状态的 。
『CSDN』不用掉一根头发！用 Flutter + Dart 快速构建一款绝美移动 App
本文插图
[图7] MyHomePage 数据初始化 让我们从路由（图7）中的数据开始 。 每次导航到’/’时都会执行此处的逻辑 。 在这种情况下 ， 这种做法很方便 ， 因为每次我们显示主页画面时 ， 都会有最新的用户账号数据和已创建的保单 。 这样一来 ， 我们就解决了将来会遇到的问题：完成导向后如何刷新主页面 。 我们只需要导航回去即可 。在MyHomePage（homepage.dart）内 ， 你可以看到一些UI定义 。 页面的根名称为Scaffold ， 它负责设置应用程序栏、操作按钮、文档主体和其他各种选项 ， 实际上这就是通用的移动应用模板 。 未定义的部分会被省略该 。 这里的appBar是最小设置 ， 有一个floatActionButton来启动新的保单向导 ， backgroundColor已与当前主题的背景色挂钩（如果我们想改变颜色 ， 则需要保持一致性） ， 当然还有最主要的主体 。如前所述 ， 这些保单被包装在一个Future中 ， 表示它们还不能传递给ListView 。 这就是FutureBuilder<>的用途：实际上 ， 它是一个小部件 ， 可以根据Future的内部状态返回内容 。 我们可以使用快照（AsyncSnapshot）变量 ， 根据Future是否已完成或仍在进行中 ， 或者是否包含错误等 ， 返回不同的窗口小部件 。 对于我们来说 ， 如果已完成则返回一个ListView ， 否则返回一个加载指示器——非常标准的东西 。 最好将所有可能的错误处理包装到Helper类中的某个通用方法中 ， Helper类可以接受snapshot.connectionState并输出一些通用的错误信息 。 解决Future中的错误有很多方法 ， 但这里为了简洁起见 ， 我没有使用这些方法 。 因此 ， 一个Future只能是已完成或正在加载两种状态之一 。
『CSDN』不用掉一根头发！用 Flutter + Dart 快速构建一款绝美移动 App
本文插图
[图8] FutureBuilder 再来看看HomepageTile小部件 。 这是我们的第一个有状态的UI 。 每个有状态的小部件都包含小部件声明（图9）及其状态 ， 而状态才是最神奇的部分 。
『CSDN』不用掉一根头发！用 Flutter + Dart 快速构建一款绝美移动 App
本文插图
[图9] 有状态的小部件 小部件的UI在状态中通过build方法定义 。 因此 ， 每次调用setState(fn) ， 框架都会重新构建 ， 并使用新的属性值重新执行build(BuildContext)方法 。 此处 ， 我使用了_expanded字段值作为条件 ， 来决定应该返回_buildMiniTile还是更详细的_buildMaxiTile小部件 。 当然 ， 这可能只是一个简单的条件赋值问题 ， 但是我们可以利用AnimatedCrossFade小部件来美化 。 它的功能正如其名：根据crossFadeState（图10）让两个子部件交叉淡入淡出 。 由于每次setState调用都会重新构建小部件 ， 因此在两个以上的状态之间进行切换也是可能的 ， 但这种用法非常罕见 ， 因为通过特定数量的点击进入某个状态听起来有点像在戏弄用户或玩捉迷藏游戏 。 除非有强烈的视觉暗示 ， 否则不要这样做 。
『CSDN』不用掉一根头发！用 Flutter + Dart 快速构建一款绝美移动 App
本文插图


推荐阅读


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

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