Flutter Widget移动UI框架怎么使用Material和密匙Key(flutter,material,widget,开发技术)

Flutter是谷歌的移动UI框架，可以在IOS和Android上快速构建高质量的本地用户界面。Flutter可以使用现有代码。

在世界上，Flutter正被越来越多的开发人员和组织使用，Flutter是完全免费和开源的。这也是构建未来Google Fuchsia应用程序的主要方式。

runApp函数接受给定的小部件，并使其成为小部件树的根。在本例中，小部件树由两个小部件组成：Center（及其子小部件）和Text。框架强制根小部件覆盖整个屏幕，这意味着文本“Hello，world”将位于屏幕中心。需要在text实例中指定文本显示的方向。使用MaterialApp时，将自动设置文本方向，稍后将进行演示。 编写应用程序时，通常会创建新的小部件。这些小部件是无状态无状态小部件或有状态有状态小部件。具体选择取决于小部件是否需要管理某些状态。小部件的主要工作是实现一个构建函数来构建自己。小部件通常由一些较低级别的小部件组成。Flutter框架将依次构建这些小部件，直到构建最低级别的子小部件。这些最低级别的小部件通常是RenderObject，它将计算和描述小部件的几何结构。

Flutter提供了许多小部件来帮助构建遵循Material Design的应用程序。Material应用程序从MaterialApp小部件开始，它在应用程序的根位置创建一些有用的小部件，包括一个Navigator，它管理由字符串标识的小部件堆栈（即页面路由堆栈）。导航器允许应用程序在页面之间平滑过渡。是否使用MaterialApp是完全可选的，但使用它是一个很好的做法。 Scaffold是Material中主要的布局组件.

让我们考虑一个更完整的示例，它将上面介绍的概念结合在一起。让我们假设一个显示各种待售产品并维护购物车的购物应用程序。让我们先定义ShoppingListItem：

ShoppingListItem小部件是无状态的。它将在构造函数中接收的值存储在最终成员变量中，然后在构建函数中使用它们。例如，inCart布尔值表示在两种视觉呈现效果之间切换：一种使用当前主题的主色，另一种使用灰色。 当用户单击列表项时，小部件不会直接修改其inCart值。相反，小部件将调用其父小部件赋予它的onCartChanged回调函数。此模式允许在小部件层次结构中存储更高的状态，从而使状态持续更长时间。在极端情况下，存储并传递给runApp应用程序的小部件的状态将持续整个生命周期。 当父项收到onCartChanged回调时，父项将更新其内部状态，这将触发父项使用新的inCart值重新生成ShoppingListItem的新实例。尽管父ShoppingListItem在重建时创建了一个新实例，但操作成本很低，因为Flutter框架会将新构建的小部件与先前构建的小组件进行比较，并且只将差异应用于底层RenderObject。

可以使用该键控制在重新构建小部件时框架将匹配哪些其他小部件。默认情况下，框架根据其runtimeType和显示顺序进行匹配。当使用键时，框架要求两个小部件具有相同的键和runtimeType。 键对于构建相同类型的小部件的多个实例非常有用。例如，ShoppingList构建了足够的ShoppingListItem实例来填充其可见区域： 如果没有密钥，则当前生成中的第一个项将始终与上一个生成中的首个项同步。即使在语义上，如果列表中的第一个项目滚动到屏幕外，它在窗口中也不再可见。 通过将列表中的每个项目指定为“语义”键，无限列表可以更有效，因为框架将使项目与匹配的语义键同步，从而具有相似（或相同）的视觉外观。此外，语义同步条目意味着在有状态的子窗口小部件中，保留状态将附加到相同的语义条目，而不是附加到相同编号位置的条目。

将第一行文本放入容器，然后在底部添加8个像素。列中的第二个子项（也是文本）显示为灰色。 标题行中的最后两项是红星图标和文本“41”。将整行放在容器中，沿每条边填充32个像素。