我要投搞

标签云

收藏小站

爱尚经典语录、名言、句子、散文、日志、唯美图片

当前位置:九肖六肖三肖全年资料 > 取标记组件 >

Flutter- 组件框架之旅

归档日期:08-07       文本归类:取标记组件      文章编辑:爱尚语录

  Flutter组件使用现代的响应式框架(react-style framework)建立,灵感来源React。核心思想,通过组件(widget)构建UI。通过给组件(Widgets)设置它们当前的配置(configuration )和状态(state)来描述它们(Widgets)的长相。当组件的状态发生改变,组件重建它的描述,为了确定过度到下一个状态所需最小改变,该描述是框架对比之前的描述等到的差异。

  英语太次,翻译不准确,个人理解大意:就是framework取得了前后两个状态的最小改变,没有变的属性不操作,改变了的算差值进行改变,而不是清空一个状态,再设置另一个状态。

  当写app时,你通常会创建 StatelessWidget 或 StatefulWidget的子类作为组件,继承那个类取决与你的组件是否管理状态state。一个组件的主要工作时实现build 方法,这个方法描述了这个组件与其他组件或子组件的条约(terms)。框架framework会依次创建这些组件,直到超出组件的底部,这代表计算和描述组件的几何形状的底层渲染对象RenderObject.

  MyScaffold组件在垂直列方向(vertical column)管理它的子控件。在列顶,它放了一个MyAppBar实例,传递一个Text组件做app bar的title。传递组件(Passing widgets)作为另一个组建的参数是一个强大的技术,它允许你创建的常用组件多样重用。最后,居中显示信心的MyScaffold使用Expanded来填充剩余的空间。

  注意,我们再次把组件作为参数传递给另一个组件。Scaffold需要许多不同的组件作为参数,他们将被放在Scaffold的适当位置。类似的,AppBar组件让我们传递组件作为 title组件的leading 和 actions 。这种模式遍布整个框架,你在设计自己的组件时也需要考虑。

  大部分app包含一些用户与系统交互的表单。第一步就是要创建一个可交互的app去检测输入的手势getsures。创建一个实例按钮来看看这是如何工作的:

  目前,我们仅使用了stateless组件。Stateless widgets从他们的父类接受参数,他们保存了 final 成员变量。当一个组件调用build时,它使用这些已存的值提取新参数(derive new arguments )来创建组件。

  你可能好奇,为什么StatefulWidget和State是分离的对象。在Flutter中,这两类对象有不同的生命周期。Widgets是临时对象,用于构建app当前状态的表达(presentation)。另一方面,State是在build()之间是持续的,允许他们记忆信息。

  上例中,接收用户输入和也接受它的build方法中的结果。在更复杂的app中,不同层级的组件可能负责不同关注点。例如,一个组件可能呈现复杂的用户界面,其目的是收集特定信息,如信息或位置,而另一个组件可能使用这些信息更改总体表现。

  在Flutter中,更改信息流依赖回调组件层次结构,当当前状态流向stateless组件。State就是父类重定向这些信息流。我们来看看实际中是如何工作的,这是一个稍微复杂的例子:

  请注意我们如何创建2个stateless组件,清晰分离了关注点:显示displaying计数器(CounterDisplay)和改变changing计数器(CounterIncrementor)。虽然最终结果和之前一样,但费力责任允许在单个组件中加入更多复杂性,同时保持父级的简单性。

  我们来思考一个更复杂的例子,把以上观点都汇聚在一起。我们来假设一个购物app,展示各种待售产品,并维护一个购物车用于购买。我们先来定义 presentation class-ShoppingListItem:

  ShoppingListItem继承自一个stateless 组件的通用模式。它保存来自它的构造函数接受的值给它的 final 成员变量,这些值在它的build方法中使用。例如,inCart切换两种可视外观,一个使用当前主题的primary颜色,另一个使用灰色gray。

  当用户点击条目,组件不直接改变它的inCart的值。而是调用父类的onCartChanged方法。这种模式让你保存状态state到更高的组件层级,这是状态持续更长时期的原因。这个例子中,保存在组件中的状态state通过runApp持续存在于app的生命周期中。

  当父类收到onCartChanged回调,父类将更新它的内部状态state,这将引发父类重建并新建一个带有新inCart值的新的ShopingListItem实例。虽然父类重建时创建一个新的ShoppingListItem实例,但是这个操作是廉价的,因为框架对比了新的组件和旧的组件,只应用不同的RenderObject。

  通过这种方式管理state,你不必分别为创建和更新子widget写代码,只需简单的实现build方法,它会处理两种情况。

  你可以使用keys来控制当一个组件重建时,框架将匹配那些其他组件。默认的,框架会根据他们的 runtimeType和他们出现的顺序匹配当前和前一个组件。带有keys的,框架(framework)会要求2个组件有相同的key和相同的runtimeType。

  当创建很多相同类型组件的实例时Keys是非常有用的。例如,上例中ShoppingList组件,创建了足够多的ShoppingListItem实例来填充它的可视区域:

  没有keys,当前创建的第一个entry会一直与前一次创建的第一个entry同步,即使列表中的第一个entry滚出屏幕而且不再可见。

  你可以使用全局keys唯一的标识子组件。全局keys必须在整个组件层级是全局唯一的,不像本地local key只需在兄弟之间唯一。因为他们全局唯一,可以用全局key检索与组件连接状态。

本文链接:http://odigallery.com/qubiaojizujian/408.html