Flutter Widget框架概述

时间 2019-11-20

标签 flutter widget 框架概述繁體版

原文原文链接

Flutter Widget采用现代响应式框架构建，这是从 React 中得到的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会从新构建UI，Flutter会对比先后变化的不一样，以肯定底层渲染树从一个状态转换到下一个状态所需的最小更改（译者语：相似于React/Vue中虚拟DOM的diff算法）html

注意: 若是您想经过代码来深刻了解Flutter，请查看构建Flutter布局和为Flutter App添加交互功能。react

Hello World

一个最简单的Flutter应用程序，只需一个widget便可！以下面示例：将一个widget传给runApp函数便可：git

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Center(
      child: new Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

该runApp函数接受给定的Widget并使其成为widget树的根。在此示例中，widget树由两个widget:Center(及其子widget)和Text组成。框架强制根widget覆盖整个屏幕，这意味着文本“Hello, world”会居中显示在屏幕上。文本显示的方向须要在Text实例中指定，当使用MaterialApp时，文本的方向将自动设定，稍后将进行演示。github

在编写应用程序时，一般会建立新的widget，这些widget是无状态的StatelessWidget或者是有状态的StatefulWidget，具体的选择取决于您的widget是否须要管理一些状态。widget的主要工做是实现一个build函数，用以构建自身。一个widget一般由一些较低级别widget组成。Flutter框架将依次构建这些widget，直到构建到最底层的子widget时，这些最低层的widget一般为RenderObject，它会计算并描述widget的几何形状。web

Flutter有一套丰富、强大的基础widget，其中如下是很经常使用的：算法

Text：该 widget 可以让建立一个带格式的文本。浏览器
Row、 Column：这些具备弹性空间的布局类Widget可以让您在水平（Row）和垂直（Column）方向上建立灵活的布局。其设计是基于web开发中的Flexbox布局模型。架构
Stack：取代线性布局 (译者语：和Android中的LinearLayout类似)，Stack容许子 widget 堆叠，你可使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。app
Container： Container 可以让您建立矩形视觉元素。container 能够装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也能够具备边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可使用矩阵在三维空间中对其进行变换。框架

如下是一些简单的Widget，它们能够组合出其它的Widget：

import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget {
  MyAppBar({this.title});

  // Widget子类中的字段每每都会定义为"final"

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 56.0, // 单位是逻辑上的像素（并不是真实的像素，相似于浏览器中的像素）
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: new BoxDecoration(color: Colors.blue[500]),
      // Row 是水平方向的线性布局（linear layout）
      child: new Row(
        //列表项的类型是 <Widget>
        children: <Widget>[
          new IconButton(
            icon: new Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null 会禁用 button
          ),
          // Expanded expands its child to fill the available space.
          new Expanded(
            child: title,
          ),
          new IconButton(
            icon: new Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Material 是UI呈现的“一张纸”
    return new Material(
      // Column is 垂直方向的线性布局.
      child: new Column(
        children: <Widget>[
          new MyAppBar(
            title: new Text(
              'Example title',
              style: Theme.of(context).primaryTextTheme.title,
            ),
          ),
          new Expanded(
            child: new Center(
              child: new Text('Hello, world!'),
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(
    title: 'My app', // used by the OS task switcher
    home: new MyScaffold(),
  ));
}

请确保在pubspec.yaml文件中，将flutter的值设置为：uses-material-design: true。这容许咱们可使用一组预约义Material icons。

name: my_app
flutter:
  uses-material-design: true

为了继承主题数据，widget须要位于MaterialApp内才能正常显示，所以咱们使用MaterialApp来运行该应用。

在MyAppBar中建立一个Container，高度为56像素（像素单位独立于设备，为逻辑像素），其左侧和右侧均有8像素的填充。在容器内部， MyAppBar使用Row 布局来排列其子项。中间的title widget被标记为Expanded, ，这意味着它会填充还没有被其余子项占用的的剩余可用空间。Expanded能够拥有多个children，而后使用flex参数来肯定他们占用剩余空间的比例。

MyScaffold 经过一个Column widget，在垂直方向排列其子项。在Column的顶部，放置了一个MyAppBar实例，将一个Text widget做为其标题传递给应用程序栏。将widget做为参数传递给其余widget是一种强大的技术，可让您建立各类复杂的widget。最后，MyScaffold使用了一个Expanded来填充剩余的空间，正中间包含一条message。

使用 Material 组件

Flutter提供了许多widgets，可帮助您构建遵循Material Design的应用程序。Material应用程序以MaterialApp widget开始，该widget在应用程序的根部建立了一些有用的widget，其中包括一个Navigator，它管理由字符串标识的Widget栈（即页面路由栈）。Navigator可让您的应用程序在页面之间的平滑的过渡。是否使用MaterialApp彻底是可选的，可是使用它是一个很好的作法。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'Flutter Tutorial',
    home: new TutorialHome(),
  ));
}

class TutorialHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Scaffold是Material中主要的布局组件.
    return new Scaffold(
      appBar: new AppBar(
        leading: new IconButton(
          icon: new Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: new Text('Example title'),
        actions: <Widget>[
          new IconButton(
            icon: new Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
      //body占屏幕的大部分
      body: new Center(
        child: new Text('Hello, world!'),
      ),
      floatingActionButton: new FloatingActionButton(
        tooltip: 'Add', // used by assistive technologies
        child: new Icon(Icons.add),
        onPressed: null,
      ),
    );
  }
}

如今咱们已经从MyAppBar和MyScaffold切换到了AppBar和 Scaffold widget，咱们的应用程序如今看起来已经有一些“Material”了！例如，应用栏有一个阴影，标题文本会自动继承正确的样式。咱们还添加了一个浮动操做按钮，以便进行相应的操做处理。

请注意，咱们再次将widget做为参数传递给其余widget。该 Scaffold widget 须要许多不一样的widget的做为命名参数，其中的每个被放置在Scaffold布局中相应的位置。一样，AppBar 中，咱们给参数leading、actions、title分别传一个widget。这种模式在整个框架中会常常出现，这也多是您在设计本身的widget时会考虑到一点。

处理手势

大多数应用程序包括某种形式与系统的交互。构建交互式应用程序的第一步是检测输入手势。让咱们经过建立一个简单的按钮来了解它的工做原理：

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: () {
        print('MyButton was tapped!');
      },
      child: new Container(
        height: 36.0,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        decoration: new BoxDecoration(
          borderRadius: new BorderRadius.circular(5.0),
          color: Colors.lightGreen[500],
        ),
        child: new Center(
          child: new Text('Engage'),
        ),
      ),
    );
  }
}

该GestureDetector widget并不具备显示效果，而是检测由用户作出的手势。当用户点击Container时， GestureDetector会调用它的onTap回调，在回调中，将消息打印到控制台。您可使用GestureDetector来检测各类输入手势，包括点击、拖动和缩放。

许多widget都会使用一个GestureDetector为其余widget提供可选的回调。例如，IconButton、 RaisedButton、和FloatingActionButton ，它们都有一个onPressed回调，它会在用户点击该widget时被触发。

到目前为止，咱们只使用了无状态的widget。无状态widget从它们的父widget接收参数，它们被存储在final型的成员变量中。当一个widget被要求构建时，它使用这些存储的值做为参数来构建widget。

为了构建更复杂的体验 - 例如，以更有趣的方式对用户输入作出反应 - 应用程序一般会携带一些状态。 Flutter使用StatefulWidgets来知足这种需求。StatefulWidgets是特殊的widget，它知道如何生成State对象，而后用它来保持状态。思考下面这个简单的例子，其中使用了前面提到RaisedButton：

class Counter extends StatefulWidget {
  // This class is the configuration for the state. It holds the
  // values (in this nothing) provided by the parent and used by the build
  // method of the State. Fields in a Widget subclass are always marked "final".

  @override
  _CounterState createState() => new _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _increment() {
    setState(() {
      // This call to setState tells the Flutter framework that
      // something has changed in this State, which causes it to rerun
      // the build method below so that the display can reflect the
      // updated values. If we changed _counter without calling
      // setState(), then the build method would not be called again,
      // and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance
    // as done by the _increment method above.
    // The Flutter framework has been optimized to make rerunning
    // build methods fast, so that you can just rebuild anything that
    // needs updating rather than having to individually change
    // instances of widgets.
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: _increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $_counter'),
      ],
    );
  }
}

您可能想知道为何StatefulWidget和State是单独的对象。在Flutter中，这两种类型的对象具备不一样的生命周期： Widget是临时对象，用于构建当前状态下的应用程序，而State对象在屡次调用build()之间保持不变，容许它们记住信息(状态)。

上面的例子接受用户点击，并在点击时使_counter自增，而后直接在其build方法中使用_counter值。在更复杂的应用程序中，widget结构层次的不一样部分可能有不一样的职责；例如，一个widget可能呈现一个复杂的用户界面，其目标是收集特定信息（如日期或位置），而另外一个widget可能会使用该信息来更改总体的显示。

在Flutter中，事件流是“向上”传递的，而状态流是“向下”传递的（译者语：这相似于React/Vue中父子组件通讯的方式：子widget到父widget是经过事件通讯，而父到子是经过状态），重定向这一流程的共同父元素是State。让咱们看看这个稍微复杂的例子是如何工做的：

class CounterDisplay extends StatelessWidget {
  CounterDisplay({this.count});

  final int count;

  @override
  Widget build(BuildContext context) {
    return new Text('Count: $count');
  }
}

class CounterIncrementor extends StatelessWidget {
  CounterIncrementor({this.onPressed});

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return new RaisedButton(
      onPressed: onPressed,
      child: new Text('Increment'),
    );
  }
}

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => new _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _increment() {
    setState(() {
      ++_counter;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Row(children: <Widget>[
      new CounterIncrementor(onPressed: _increment),
      new CounterDisplay(count: _counter),
    ]);
  }
}

注意咱们是如何建立了两个新的无状态widget的！咱们清晰地分离了显示计数器（CounterDisplay）和更改计数器（CounterIncrementor）的逻辑。尽管最终效果与前一个示例相同，但责任分离容许将复杂性逻辑封装在各个widget中，同时保持父项的简单性。

整合全部

让咱们考虑一个更完整的例子，将上面介绍的概念聚集在一块儿。咱们假设一个购物应用程序，该应用程序显示出售的各类产品，并维护一个购物车。咱们先来定义ShoppingListItem：

class Product {
  const Product({this.name});
  final String name;
}

typedef void CartChangedCallback(Product product, bool inCart);

class ShoppingListItem extends StatelessWidget {
  ShoppingListItem({Product product, this.inCart, this.onCartChanged})
      : product = product,
        super(key: new ObjectKey(product));

  final Product product;
  final bool inCart;
  final CartChangedCallback onCartChanged;

  Color _getColor(BuildContext context) {
    // The theme depends on the BuildContext because different parts of the tree
    // can have different themes.  The BuildContext indicates where the build is
    // taking place and therefore which theme to use.

    return inCart ? Colors.black54 : Theme.of(context).primaryColor;
  }

  TextStyle _getTextStyle(BuildContext context) {
    if (!inCart) return null;

    return new TextStyle(
      color: Colors.black54,
      decoration: TextDecoration.lineThrough,
    );
  }

  @override
  Widget build(BuildContext context) {
    return new ListTile(
      onTap: () {
        onCartChanged(product, !inCart);
      },
      leading: new CircleAvatar(
        backgroundColor: _getColor(context),
        child: new Text(product.name[0]),
      ),
      title: new Text(product.name, style: _getTextStyle(context)),
    );
  }
}

该ShoppingListItem widget是无状态的。它将其在构造函数中接收到的值存储在final成员变量中，而后在build函数中使用它们。例如，inCart布尔值表示在两种视觉展现效果之间切换：一个使用当前主题的主色，另外一个使用灰色。

当用户点击列表项时，widget不会直接修改其inCart的值。相反，widget会调用其父widget给它的onCartChanged回调函数。此模式可以让您在widget层次结构中存储更高的状态，从而使状态持续更长的时间。在极端状况下，存储传给runApp应用程序的widget的状态将在的整个生命周期中持续存在。

当父项收到onCartChanged回调时，父项将更新其内部状态，这将触发父项使用新inCart值重建ShoppingListItem新实例。虽然父项ShoppingListItem在重建时建立了一个新实例，但该操做开销很小，由于Flutter框架会将新构建的widget与先前构建的widget进行比较，并仅将差别部分应用于底层RenderObject。

咱们来看看父widget存储可变状态的示例：

class ShoppingList extends StatefulWidget {
  ShoppingList({Key key, this.products}) : super(key: key);

  final List<Product> products;

  // The framework calls createState the first time a widget appears at a given
  // location in the tree. If the parent rebuilds and uses the same type of
  // widget (with the same key), the framework will re-use the State object
  // instead of creating a new State object.

  @override
  _ShoppingListState createState() => new _ShoppingListState();
}

class _ShoppingListState extends State<ShoppingList> {
  Set<Product> _shoppingCart = new Set<Product>();

  void _handleCartChanged(Product product, bool inCart) {
    setState(() {
      // When user changes what is in the cart, we need to change _shoppingCart
      // inside a setState call to trigger a rebuild. The framework then calls
      // build, below, which updates the visual appearance of the app.

      if (inCart)
        _shoppingCart.add(product);
      else
        _shoppingCart.remove(product);
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Shopping List'),
      ),
      body: new ListView(
        padding: new EdgeInsets.symmetric(vertical: 8.0),
        children: widget.products.map((Product product) {
          return new ShoppingListItem(
            product: product,
            inCart: _shoppingCart.contains(product),
            onCartChanged: _handleCartChanged,
          );
        }).toList(),
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(
    title: 'Shopping App',
    home: new ShoppingList(
      products: <Product>[
        new Product(name: 'Eggs'),
        new Product(name: 'Flour'),
        new Product(name: 'Chocolate chips'),
      ],
    ),
  ));
}

ShoppingList类继承自StatefulWidget，这意味着这个widget能够存储状态。当ShoppingList首次插入到树中时，框架会调用其 createState 函数以建立一个新的_ShoppingListState实例来与该树中的相应位置关联（请注意，咱们一般命名State子类时带一个下划线，这表示其是私有的）。当这个widget的父级重建时，父级将建立一个新的ShoppingList实例，可是Flutter框架将重用已经在树中的_ShoppingListState实例，而不是再次调用createState建立一个新的。

要访问当前ShoppingList的属性，_ShoppingListState可使用它的widget属性。若是父级重建并建立一个新的ShoppingList，那么 _ShoppingListState也将用新的widget值重建（译者语：这里原文档有错误，应该是_ShoppingListState不会从新构建，但其widget的属性会更新为新构建的widget）。若是但愿在widget属性更改时收到通知，则能够覆盖didUpdateWidget函数，以便将旧的oldWidget与当前widget进行比较。

处理onCartChanged回调时，_ShoppingListState经过添加或删除产品来改变其内部_shoppingCart状态。为了通知框架它改变了它的内部状态，须要调用setState。调用setState将该widget标记为”dirty”(脏的)，而且计划在下次应用程序须要更新屏幕时从新构建它。若是在修改widget的内部状态后忘记调用setState，框架将不知道您的widget是”dirty”(脏的)，而且可能不会调用widget的build方法，这意味着用户界面可能不会更新以展现新的状态。

经过以这种方式管理状态，您不须要编写用于建立和更新子widget的单独代码。相反，您只需实现能够处理这两种状况的build函数。

在StatefulWidget调用createState以后，框架将新的状态对象插入树中，而后调用状态对象的initState。子类化State能够重写initState，以完成仅须要执行一次的工做。例如，您能够重写initState以配置动画或订阅platform services。initState的实现中须要调用super.initState。

当一个状态对象再也不须要时，框架调用状态对象的dispose。您能够覆盖该dispose方法来执行清理工做。例如，您能够覆盖dispose取消定时器或取消订阅platform services。 dispose典型的实现是直接调用super.dispose。

Key

您可使用key来控制框架将在widget重建时与哪些其余widget匹配。默认状况下，框架根据它们的runtimeType和它们的显示顺序来匹配。使用key时，框架要求两个widget具备相同的key和runtimeType。

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

若是没有key，当前构建中的第一个条目将始终与前一个构建中的第一个条目同步，即便在语义上，列表中的第一个条目若是滚动出屏幕，那么它将不会再在窗口中可见。
经过给列表中的每一个条目分配为“语义” key，无限列表能够更高效，由于框架将同步条目与匹配的语义key并所以具备类似（或相同）的可视外观。此外，语义上同步条目意味着在有状态子widget中，保留的状态将附加到相同的语义条目上，而不是附加到相同数字位置上的条目。

全局 Key

您可使用全局key来惟一标识子widget。全局key在整个widget层次结构中必须是全局惟一的，这与局部key不一样，后者只须要在同级中惟一。因为它们是全局惟一的，所以可使用全局key来检索与widget关联的状态。

Flutter Widget框架概述

Hello World

基础 Widget

使用 Material 组件

处理手势

根据用户输入改变widget

整合全部

响应widget生命周期事件

Key

全局 Key