Widgets 介绍

Flutter 从 React 中吸取灵感，通过现代化框架创建出精美的组件。它的核心思想是用 widget 来构建你的 UI 界面。Widget 描述了在当前的配置和状态下视图所应该呈现的样子。当 widget 的状态改变时，它会重新构建其描述（展示的 UI），框架则会对比前后变化的不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

备忘

如果你想通过深入了解一些代码来更好地掌握 Flutter，请查阅 Codelab: Flutter 布局基础教程、 Flutter 中的布局 和 为你的 Flutter 应用加入交互体验 这三篇文章。

Hello world

创建一个最小的 Flutter 应用简单到仅需调用 runApp() 方法并传入一个 widget 即可：

  1. import 'package:flutter/material.dart';
  3. void main() {
  4.   runApp(
  5.     Center(
  6.       child: Text(
  7.         'Hello, world!',
  8.         textDirection: TextDirection.ltr,
  9.       ),
  10.     ),
  11.   );
  12. }

runApp() 函数会持有传入的 Widget，并且使它成为 widget 树中的根节点。在这个例子中，Widget 树有两个 widgets，Center widget 及其子widget ——Text 。框架会强制让根 widget 铺满整个屏幕，也就是说“Hello World”会在屏幕上居中显示。在这个例子我们需要指定文字的方向，当使用 MaterialApp widget 时，你就无需考虑这一点，之后我们会进一步的描述。

在写应用的过程中，取决于是否需要管理状态，你通常会创建一个新的组件继承StatelessWidget 或StatefulWidget。Widget 的主要工作是实现 build方法，该方法根据其它较低级别的 widget 来描述这个 widget。框架会逐一构建这些 widget，直到最底层的描述 widget 几何形状的RenderObject。

基础 widgets

Flutter 自带了一套强大的基础 widgets，下面列出了一些常用的：

TextText widget 可以用来在应用内创建带样式的文本。

Row, Column 这两个 flex widgets 可以让你在水平 (Row) 和垂直(Column) 方向创建灵活的布局。它是基于 web 的 flexbox 布局模型设计的。

Stack Stack widget 不是线性（水平或垂直）定位的，而是按照绘制顺序将 widget 堆叠在一起。你可以用 Positioned widget 作为Stack 的子 widget，以相对于 Stack 的上，右，下，左来定位它们。 Stack 是基于 Web 中的绝对位置布局模型设计的。

Container Container widget 可以用来创建一个可见的矩形元素。 Container 可以使用 BoxDecoration 来进行装饰，如背景，边框，或阴影等。 Container 还可以设置外边距、内边距和尺寸的约束条件等。另外，Container可以使用矩阵在三维空间进行转换。

下面是一些简单的 widget，它们结合了上面提到的 widget 和一些其他的 widget：

  1. import 'package:flutter/material.dart';
  3. class MyAppBar extends StatelessWidget {
  4.   MyAppBar({this.title});
  6.   // Fields in a Widget subclass are always marked "final".
  8.   final Widget title;
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return Container(
  13.       height: 56.0, // in logical pixels
  14.       padding: const EdgeInsets.symmetric(horizontal: 8.0),
  15.       decoration: BoxDecoration(color: Colors.blue[500]),
  16.       // Row is a horizontal, linear layout.
  17.       child: Row(
  18.         // <Widget> is the type of items in the list.
  19.         children: <Widget>[
  20.           IconButton(
  21.             icon: Icon(Icons.menu),
  22.             tooltip: 'Navigation menu',
  23.             onPressed: null, // null disables the button
  24.           ),
  25.           // Expanded expands its child to fill the available space.
  26.           Expanded(
  27.             child: title,
  28.           ),
  29.           IconButton(
  30.             icon: Icon(Icons.search),
  31.             tooltip: 'Search',
  32.             onPressed: null,
  33.           ),
  34.         ],
  35.       ),
  36.     );
  37.   }
  38. }
  40. class MyScaffold extends StatelessWidget {
  41.   @override
  42.   Widget build(BuildContext context) {
  43.     // Material is a conceptual piece of paper on which the UI appears.
  44.     return Material(
  45.       // Column is a vertical, linear layout.
  46.       child: Column(
  47.         children: <Widget>[
  48.           MyAppBar(
  49.             title: Text(
  50.               'Example title',
  51.               style: Theme.of(context).primaryTextTheme.title,
  52.             ),
  53.           ),
  54.           Expanded(
  55.             child: Center(
  56.               child: Text('Hello, world!'),
  57.             ),
  58.           ),
  59.         ],
  60.       ),
  61.     );
  62.   }
  63. }
  65. void main() {
  66.   runApp(MaterialApp(
  67.     title: 'My app', // used by the OS task switcher
  68.     home: MyScaffold(),
  69.   ));
  70. }

请确认在 pubspec.yaml 文件中 flutter 部分有uses-material-design: true 这条，它能让你使用预置的 Material icons。

  1. name: my_app
  2. flutter:
  3.   uses-material-design: true

为了获得(MaterialApp)主题的数据，许多 Material Design 的 widget 需要在 MaterialApp 中才能显现正常。因此，请使用 MaterialApp 运行应用。

MyAppBar widget 创建了一个高 56 独立像素，左右内边距 8 像素的 Container。在容器内，MyAppBar 以 Row 布局来组织它的子元素。中间的子 widget（title widget），被标记为 Expanded，这意味着它会扩展以填充其它子 widget 未使用的可用空间。你可以定义多个Expanded 子 widget，并使用 flex 参数确定它们占用可用空间的比例。

MyScaffold widget 将其子 widget 组织在垂直列中。在列的顶部，它放置一个 MyAppBar 实例，并把 Text widget 传给它来作为应用的标题。把 widget 作为参数传递给其他 widget 是一个很强大的技术，它可以让你以各种方式创建一些可重用的通用组件。最后，MyScaffold 使用 Expanded来填充剩余空间，其中包含一个居中的消息。

有关更多信息，请参阅 布局。

使用 Material 组件

Flutter 提供了许多 widget，可帮助你构建遵循 Material Design 的应用。Material 应用以 MaterialApp widget 开始，它在你的应用的底层下构建了许多有用的 widget。这其中包括 Navigator，它管理由字符串标识的 widget 栈，也称为“routes”。Navigator 可以让你在应用的页面中平滑的切换。使用 MaterialApp widget 不是必须的，但这是一个很好的做法。

  1. import 'package:flutter/material.dart';
  3. void main() {
  4.   runApp(MaterialApp(
  5.     title: 'Flutter Tutorial',
  6.     home: TutorialHome(),
  7.   ));
  8. }
  10. class TutorialHome extends StatelessWidget {
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     // Scaffold is a layout for the major Material Components.
  14.     return Scaffold(
  15.       appBar: AppBar(
  16.         leading: IconButton(
  17.           icon: Icon(Icons.menu),
  18.           tooltip: 'Navigation menu',
  19.           onPressed: null,
  20.         ),
  21.         title: Text('Example title'),
  22.         actions: <Widget>[
  23.           IconButton(
  24.             icon: Icon(Icons.search),
  25.             tooltip: 'Search',
  26.             onPressed: null,
  27.           ),
  28.         ],
  29.       ),
  30.       // body is the majority of the screen.
  31.       body: Center(
  32.         child: Text('Hello, world!'),
  33.       ),
  34.       floatingActionButton: FloatingActionButton(
  35.         tooltip: 'Add', // used by assistive technologies
  36.         child: Icon(Icons.add),
  37.         onPressed: null,
  38.       ),
  39.     );
  40.   }
  41. }

现在我们已经从 MyAppBar 和 MyScaffold 切换到了 material.dart 中的 AppBar 和 Scaffold widget，我们的应用更“Material”了一些。例如，标题栏有了阴影，标题文本会自动继承正确的样式，此外还添加了一个浮动操作按钮。

注意，widget 作为参数传递给了另外的 widget。Scaffold widget 将许多不同的 widget 作为命名参数，每个 widget 都放在了 Scofford 布局中的合适位置。同样的，AppBar widget 允许我们给 leading、title widget 的 actions 传递 widget。这种模式在整个框架会中重复出现，在设计自己的 widget 时可以考虑这种模式。

有关更多信息，请参阅 Material 组件。

备忘

Material 是 Flutter 中两个自带的设计之一，如果想要以 iOS 为主的设计，可以参考 Cupertino components，它有自己版本的 CupertinoApp 和 CupertinoNavigationBar.。

处理手势

大多数应用都需要通过系统来处理一些用户交互。构建交互式应用程序的第一步是检测输入手势，这里通过创建一个简单的按钮来了解其工作原理：

  1. class MyButton extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return GestureDetector(
  5.       onTap: () {
  6.         print('MyButton was tapped!');
  7.       },
  8.       child: Container(
  9.         height: 36.0,
  10.         padding: const EdgeInsets.all(8.0),
  11.         margin: const EdgeInsets.symmetric(horizontal: 8.0),
  12.         decoration: BoxDecoration(
  13.           borderRadius: BorderRadius.circular(5.0),
  14.           color: Colors.lightGreen[500],
  15.         ),
  16.         child: Center(
  17.           child: Text('Engage'),
  18.         ),
  19.       ),
  20.     );
  21.   }
  22. }

GestureDetector widget 没有可视化的展现，但它能识别用户的手势。当用户点击 Container 时，GestureDetector 会调用其 onTap() 回调，在这里会向控制台打印一条消息。你可以使用 GestureDetector 检测各种输入的手势，包括点击，拖动和缩放。

许多 widget 使用 GestureDetector 为其他 widget 提供可选的回调。例如，IconButton、RaisedButton 和 FloatingActionButton widget 都有 onPressed() 回调，当用户点击 widget 时就会触发这些回调。

有关更多信息，请参阅 Flutter 中的手势。

根据用户输入改变 widget

到目前为止，这个页面仅使用了无状态的 widget。无状态 widget 接收的参数来自于它的父 widget，它们储存在 final 成员变量中。当 widget 需要被 build() 时，就是用这些存储的变量为创建的 widget 生成新的参数。

为了构建更复杂的体验，例如，以更有趣的方式对用户输入做出反应—应用通常带有一些状态。Flutter 使用 StatefulWidgets 来实现这一想法。StatefulWidgets 是一种特殊的 widget，它会生成 State 对象，用于保存状态。看看这个基本的例子，它使用了前面提到的RaisedButton：

  1. class Counter extends StatefulWidget {
  2.   // This class is the configuration for the state. It holds the
  3.   // values (in this case nothing) provided by the parent and used by the build
  4.   // method of the State. Fields in a Widget subclass are always marked "final".
  6.   @override
  7.   _CounterState createState() => _CounterState();
  8. }
  10. class _CounterState extends State<Counter> {
  11.   int _counter = 0;
  13.   void _increment() {
  14.     setState(() {
  15.       // This call to setState tells the Flutter framework that
  16.       // something has changed in this State, which causes it to rerun
  17.       // the build method below so that the display can reflect the
  18.       // updated values. If you change _counter without calling
  19.       // setState(), then the build method won't be called again,
  20.       // and so nothing would appear to happen.
  21.       _counter++;
  22.     });
  23.   }
  25.   @override
  26.   Widget build(BuildContext context) {
  27.     // This method is rerun every time setState is called,
  28.     // for instance, as done by the _increment method above.
  29.     // The Flutter framework has been optimized to make rerunning
  30.     // build methods fast, so that you can just rebuild anything that
  31.     // needs updating rather than having to individually change
  32.     // instances of widgets.
  33.     return Row(
  34.       children: <Widget>[
  35.         RaisedButton(
  36.           onPressed: _increment,
  37.           child: Text('Increment'),
  38.         ),
  39.         Text('Count: $_counter'),
  40.       ],
  41.     );
  42.   }
  43. }

您可能想知道为什么 StatefulWidget 和 State 是独立的对象。在 Flutter 中，这两种类型的对象具有不同的生命周期。Widget 是临时对象，用于构造应用当前状态的展示。而 State 对象在调用 build() 之间是持久的，以此来存储信息。

上面的示例接受用户输入并直接在其 build() 方法中直接使用结果。在更复杂的应用中，widget 层次不同的部分可能负责不同的关注点；例如，一个 widget 可能呈现复杂的用户界面，来收集像日期或位置这样特定的信息，而另一个 widget 可能使用该信息来改变整体的展现。

在 Flutter 中，widget 通过回调得到状态改变的通知，同时当前状态通知给其他 widget 用于显示。重定向这一流程的共同父级是 State，下面稍微复杂的示例显示了它在实践中的工作原理：

  1. class CounterDisplay extends StatelessWidget {
  2.   CounterDisplay({this.count});
  4.   final int count;
  6.   @override
  7.   Widget build(BuildContext context) {
  8.     return Text('Count: $count');
  9.   }
  10. }
  12. class CounterIncrementor extends StatelessWidget {
  13.   CounterIncrementor({this.onPressed});
  15.   final VoidCallback onPressed;
  17.   @override
  18.   Widget build(BuildContext context) {
  19.     return RaisedButton(
  20.       onPressed: onPressed,
  21.       child: Text('Increment'),
  22.     );
  23.   }
  24. }
  26. class Counter extends StatefulWidget {
  27.   @override
  28.   _CounterState createState() => _CounterState();
  29. }
  31. class _CounterState extends State<Counter> {
  32.   int _counter = 0;
  34.   void _increment() {
  35.     setState(() {
  36.       ++_counter;
  37.     });
  38.   }
  40.   @override
  41.   Widget build(BuildContext context) {
  42.     return Row(children: <Widget>[
  43.       CounterIncrementor(onPressed: _increment),
  44.       CounterDisplay(count: _counter),
  45.     ]);
  46.   }
  47. }

注意创建两个新的无状态 widget 的方式，它清楚地分离了 显示 计数器（CounterDisplay）和 改变 计数器（CounterIncrementor）。尽管最终结果与前面的示例相同，但是责任的分离将更大的复杂性封装在各个 widget 中，保证了父级的简单性。

有关更多信息，请参阅：

整合在一起

下面是一个更完整的示例，汇集了上面介绍的概念：假定一个购物应用显示各种出售的产品，并在购物车中维护想购买的物品。首先定义一个用于展示的类，ShoppingListItem：

  1. class Product {
  2.   const Product({this.name});
  3.   final String name;
  4. }
  6. typedef void CartChangedCallback(Product product, bool inCart);
  8. class ShoppingListItem extends StatelessWidget {
  9.   ShoppingListItem({Product product, this.inCart, this.onCartChanged})
  10.       : product = product,
  11.         super(key: ObjectKey(product));
  13.   final Product product;
  14.   final bool inCart;
  15.   final CartChangedCallback onCartChanged;
  17.   Color _getColor(BuildContext context) {
  18.     // The theme depends on the BuildContext because different parts of the tree
  19.     // can have different themes.  The BuildContext indicates where the build is
  20.     // taking place and therefore which theme to use.
  22.     return inCart ? Colors.black54 : Theme.of(context).primaryColor;
  23.   }
  25.   TextStyle _getTextStyle(BuildContext context) {
  26.     if (!inCart) return null;
  28.     return TextStyle(
  29.       color: Colors.black54,
  30.       decoration: TextDecoration.lineThrough,
  31.     );
  32.   }
  34.   @override
  35.   Widget build(BuildContext context) {
  36.     return ListTile(
  37.       onTap: () {
  38.         onCartChanged(product, inCart);
  39.       },
  40.       leading: CircleAvatar(
  41.         backgroundColor: _getColor(context),
  42.         child: Text(product.name[0]),
  43.       ),
  44.       title: Text(product.name, style: _getTextStyle(context)),
  45.     );
  46.   }
  47. }

ShoppingListItem widget 遵循无状态 widget 的通用模式。它将构造函数中接受到的值存储在 final 成员变量中，然后在 build() 函数中使用它们。例如，inCart 布尔值使两种样式进行切换：一个使用当前主题的主要颜色，另一个使用灰色。

当用户点击列表中的一项，widget 不会直接改变 inCart 的值，而是通过调用从父 widget 接收到的 onCartChanged 函数。这种方式可以在组件的生命周期中存储状态更长久，从而使状态持久化。甚至，widget 传给 runApp() 的状态可以持久到整个应用的生命周期。

当父级接收到 onCartChanged 回调时，父级会更新其内部状态，从而触发父级重建并使用新的 inCart 值来创建新的 ShoppingListItem 实例。尽管父级在重建时会创建 ShoppingListItem 的新实例，但是由于框架会将新构建的 widget 与先前构建的 widget 进行比较，仅将差异应用于底层的 RenderObject，这种代价是很小的。

这里有一个示例展示父组件是如何存储可变状态：

  1. class ShoppingList extends StatefulWidget {
  2.   ShoppingList({Key key, this.products}) : super(key: key);
  4.   final List<Product> products;
  6.   // The framework calls createState the first time a widget appears at a given
  7.   // location in the tree. If the parent rebuilds and uses the same type of
  8.   // widget (with the same key), the framework re-uses the State object
  9.   // instead of creating a new State object.
  11.   @override
  12.   _ShoppingListState createState() => _ShoppingListState();
  13. }
  15. class _ShoppingListState extends State<ShoppingList> {
  16.   Set<Product> _shoppingCart = Set<Product>();
  18.   void _handleCartChanged(Product product, bool inCart) {
  19.     setState(() {
  20.       // When a user changes what's in the cart, you need to change
  21.       // _shoppingCart inside a setState call to trigger a rebuild.
  22.       // The framework then calls build, below,
  23.       // which updates the visual appearance of the app.
  25.       if (!inCart)
  26.         _shoppingCart.add(product);
  27.       else
  28.         _shoppingCart.remove(product);
  29.     });
  30.   }
  32.   @override
  33.   Widget build(BuildContext context) {
  34.     return Scaffold(
  35.       appBar: AppBar(
  36.         title: Text('Shopping List'),
  37.       ),
  38.       body: ListView(
  39.         padding: EdgeInsets.symmetric(vertical: 8.0),
  40.         children: widget.products.map((Product product) {
  41.           return ShoppingListItem(
  42.             product: product,
  43.             inCart: _shoppingCart.contains(product),
  44.             onCartChanged: _handleCartChanged,
  45.           );
  46.         }).toList(),
  47.       ),
  48.     );
  49.   }
  50. }
  52. void main() {
  53.   runApp(MaterialApp(
  54.     title: 'Shopping App',
  55.     home: ShoppingList(
  56.       products: <Product>[
  57.         Product(name: 'Eggs'),
  58.         Product(name: 'Flour'),
  59.         Product(name: 'Chocolate chips'),
  60.       ],
  61.     ),
  62.   ));
  63. }

ShoppingList 类继承自 StatefulWidget，这意味着这个 widget 存储着可变状态。当 ShoppingList 首次插入到 widget 树中时，框架调用 createState() 函数来创建 _ShoppingListState的新实例，以与树中的该位置相关联。（注意，State 的子类通常以下划线开头进行命名，表示它们的实现细节是私有的）当该 widget 的父 widget 重建时，父 widget 首先会创建一个 ShoppingList 的实例，但是框架会复用之前创建的 _ShoppingListState，而不会重新调用 createState。

为了访问当前 ShoppingList 的属性，_ShoppingListState 可以使用它的 widget 属性。当父组件重建一个新的 ShoppingList 时，_ShoppingListState 会使用新的 widget 值来创建。如果希望在 widget 属性更改时收到通知，则可以重写 didUpdateWidget() 函数，该函数将 oldWidget 作为参数传递，以便将 oldWidget 与当前 widget。

当处理 onCartChanged 回调时，_ShoppingListState 通过增加或删除 _shoppingCart 中的产品来改变其内部状态。为了通知框架它改变了它的内部状态，需要调用 setState()。调用 setState() 会将该 widget 标记为“dirty”（脏的），并且计划在下次应用需要更新屏幕时重新构建它。如果在修改 widget 的内部状态后忘记调用 setState，框架将不知道这个 widget 是“dirty”(脏的)，并且可能不会调用 widget 的 build() 方法，这意味着用户界面可能不会更新以展示新的状态。通过以这种方式管理状态，你不需要编写用于创建和更新子 widget 的单独代码。相反，你只需实现 build 函数，它可以处理这两种情况。

响应 widget 的生命周期事件

在 StatefulWidget 上调用 createState() 之后，框架将新的状态对象插入到树中，然后在状态对象上调用 initState()。State 的子类可以重写 initState 来完成只需要发生一次的工作。例如，重写 initState 来配置动画或订阅平台服务。实现 initState 需要调用父类的 super.initState 方法来开始。

当不再需要状态对象时，框架会调用状态对象上的 dispose() 方法。可以重写dispose 方法来清理状态。例如，重写 dispose 以取消计时器或取消订阅平台服务。实现 dispose 时通常通过调用 super.dispose 来结束。

有关更多信息，请参阅 State。

Keys

使用 key 可以控制框架在 widget 重建时与哪些其他 widget 进行匹配。默认情况下，框架根据它们的 runtimeType以及它们的显示顺序来匹配。使用 key 时，框架要求两个 widget 具有相同的 key 和 runtimeType。

Key 在构建相同类型 widget 的多个实例时很有用。例如，ShoppingList widget，它只构建刚刚好足够的 ShoppingListItem 实例来填充其可见区域：

  • 如果没有 key，当前构建中的第一个条目将始终与前一个构建中的第一个条目同步，在语义上，列表中的第一个条目如果滚动出屏幕，那么它应该不会再在窗口中可见。

  • 通过给列表中的每个条目分配为“语义” key，无限列表可以更高效，因为框架将通过相匹配的语义 key 来同步条目，并因此具有相似（或相同）的可视外观。此外，语义上同步条目意味着在有状态子 widget 中，保留的状态将附加到相同的语义条目上，而不是附加到相同数字位置上的条目。

有关更多信息，请参阅 Key API。

全局 key

全局 key 可以用来标识唯一子 widget。全局 key 在整个 widget 结构中必须是全局唯一的，而不像本地 key 只需要在兄弟 widget 中唯一。由于它们是全局唯一的，因此可以使用全局 key 来检索与 widget 关联的状态。

有关更多信息，请参阅 GlobalKey API。