从Flutter到Flight 7:Pop

嘿,又是我。 不,我没有消失。 第三季度是……大约四分之一。 我编码为业余爱好,因此我根据自己有多少空闲时间来增加和减少活动。 您知道会花费很多时间吗? 工作。 工作需要花费大量时间,尤其是当某个业余程序员在计算关键任务项目的截止日期时,对孩子充满热情的时候。 另外,我当然也开始了另一个业余爱好编码项目。 我在这里引导我内心的埃隆·马斯克。 话虽这么说,我的清单应用程序并没有取得太大进展。

但是我确实有一些要快速谈论的关于我的应用程序导航的事情。 如果您还记得,我正在构建我的应用程序,以便为飞行员提供更好的清单体验。 到目前为止,我的大部分帖子都是关于我构建的编辑器的。 今天,我们将深入了解实际使用清单。 对于该应用程序,我有一些非常严格的准则:

  • 一次仅显示一项。 我不希望可以浏览所有项目的滚动列表。 这给了飞行员虚假的安全保证,他可以掩盖一切,后来才发现他过快地瞥了一眼却错过了一些东西。 当然,我本人从未经历过。 我总是仔细阅读我的清单。 虔诚地。
  • 用户交互区域应尽可能地受限制。 在压力大的情况下,繁忙的GUI很难导航。
  • 紧急检查表应该非常容易提取。 有关压力情况,请参见上文。

好的,那么,如何进行快速视频演示?

除了进入和离开清单之外,没有任何按钮按下会导致导航。 单击大复选标记? 不,不是导航。 按下后退按钮? 仍然没有导航。 切换到新清单? 三击,你出局了。 仍然没有导航。 在幕后,我有一些类可以计算当前清单项目。 每次单击按钮都会告诉这些类使用新对象更新当前项目。 然后,UI调用setState并根据(新)当前项进行重绘。

现在,我们已经看了一个视频,并且给了我高层次的概述,让我们看一些使一切变为现实的代码。 起点是一个称为UseBook的类,它实际上只是状态对象UseBookState的外壳。 这是UseBookState的初始化函数:

首先,我们要隐藏系统镶边。 几乎没有什么比一点点白光烦人的了,它毁了原本完美的节省夜视的简约UI。 这也隐藏了Android后退按钮,我希望用户在使用清单时不要与之交互。 但这是一件小事。 此功能最重要的部分是第6至11行。在这些行中,导航路径字符串被传递到我的模型对象,该模型对象将必要的JSON文件加载到内存中,并将其转换为navigator对象,我们将使用该对象来实际导航清单。 io对象仅用于将当前导航状态持久保存到磁盘。 如果用户退出应用程序并被操作系统终止,则这种持久性将允许该应用程序从用户所在的确切项目重新启动。

UseBookState类中发生的大部分事情都包含在build方法中:

让我们跳过前12行,它们仅处理错误/“页面加载” UI和页面标题。 第13行是魔术的开始:WillPopScope小部件。 此小部件可拦截所有尝试弹出导航器的尝试,并让我确定它何时真正发生。 我在willPop方法中执行此willPop ,如下所示:

请记住,导航器是我的课程,不是Flutter的课程。 名称可能不是一个好选择,是吗?

如果我的导航模型对象能够基于其自身的内部后退堆栈返回,则可以这样做,并且不允许弹出Flutter导航器。 这在第4行中以false的返回值表示。否则,Flutter可以执行其操作,将用户带回到主页,并显示系统镶边。 第8行的返回值true告诉Flutter导航器可以继续弹出。 除了响应我的弹出尝试外,按下Android后退按钮时也会调用此小方法。 因此,如果用户向上/向下滑动并手动访问后退按钮,则该应用仍将正常运行。

我真正要谈论的最后一件事是当应用程序在清单项之间导航时发生的淡入/淡入。 您有没有注意到酷的效果? 我花了很长时间才弄清楚。 在最长的时间里,我一直坚持使用Flutter的导航器加载带有新项目内容的页面,然后在旧页面和新页面之间进行淡入淡出过渡的想法。 然后我想也许我会创建一些内部类,以扩展Flutter的动画类,从而使当前内容淡出,使新内容淡出,最后将当前内容设置为新内容。 所有这些对我来说似乎太复杂了。

经过一段令人尴尬的长时间之后,我才意识到我对这个问题的想法完全过分了。 该过程实际上非常简单:

  1. 淡出页面
  2. 告诉导航模型对象在任何地方导航
  3. 淡入页面

Flutter使此操作变得异常简单。 构建方法的第40行中的AnimatedOpacity小部件促进了整个过程。 您会注意到AnimatedOpacity小部件的子级是称为_buildBody的方法。 此方法只是根据当前项目的类型(正常项目,是/否问题,列表结尾)以不同的方式呈现页面。 如果我们看看我使用复选标记按钮渲染普通项目的方法……

…您将看到该按钮最终调用了一个名为fadeTransition的函数。 在此功能中,您可以清楚地看到我上面概述的三步过程。 第24行淡出页面,第27行执行完淡入淡出后的导航逻辑,而第29行和第30行由于具有新内容而在页面中淡出。 超级简单,而且正是我想要的效果,这样项目之间的过渡就更少了。 最重要的是,只需设置状态并更新不透明度值即可完成AnimatedOpacity的工作。 Flutter借助其Animated *小部件套件使这些小效果如此轻松,令我感到惊讶。

如果您想了解所有事物如何联系在一起,则可以使用UseBook和UseBookState类的全部内容。 我不会在这篇文章中内联它,因为它是一个很大的文件。 它必须绘制4个不同的页面,具体取决于当前项目的性质,以及弹出笔记和导航至其他清单的弹出窗口。 我想我可以将代码分成不同的类和文件,但是GUI的子元素在UseBook之外没有多大意义,也不会在任何地方重复使用。 我不觉得只为了减少文件中的行数而使我的类复杂化。

我实际上对该文件的设计感到非常满意。 UseBookState类实际上只是呈现GUI。 几乎没有业务逻辑。 我的模型类处理了所有导航项目的复杂逻辑(并且可能非常复杂),这些模型类已进行了广泛的单元测试。 我想我在某种程度上设法将关注点分离开了。

所以现在我无法再推迟用户管理了。 老实说:如果我决定放弃这个项目,那么用户管理将是原因。 我以前从未创建过用户管理流程,它们看起来有点复杂,我需要学习我不熟悉的新技术(Firebase),而我发现整个过程很无聊。 此时,该应用程序可以创建和使用清单。 有一些我想做得更好的事情,但几乎所有事情都在那里。 除了管理用户帐户和在云中持久保存用户清单之外,其他所有操作。 从我站着的位置那感觉就像是艰苦的努力。

总结一下:我们将看到未来。 我想开始使用该应用程序,这样我就能弄清楚什么是好的,哪些是真的不起作用。 一直以来,我将计划用户帐户管理过程并尝试使用Firebase。 仍有很多工作要做,但已经做了很多工作。 Flutter仍然很棒。 确实,这是该项目到目前为止取得成功的唯一原因。