Flutter Widget框架之旅

时间 2019-11-18

标签 flutter widget 框架之旅繁體版

原文原文链接

介绍
你好，世界
基本的小部件
使用材料组件
处理手势
根据输入更改小部件
把它们放在一块儿
响应小部件生命周期事件
key
全局Key

介绍

Flutter小部件采用现代反应式框架构建，从React中得到灵感。中心思想是你从小部件中构建你的UI。小组件描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当小部件的状态发生变化时，小部件会从新构建它的描述，该描述与前面的描述不一样，以肯定底层渲染树从一个状态转换到下一个状态所需的最小更改。html

注意：若是您想经过深刻了解某些代码来熟悉Flutter，请查看构建Flutter布局并为Flutter App添加交互功能。java

你好，世界

最小的Flutter应用程序只需使用一个小部件调用runApp函数：react

import 'package:flutter/material.dart';

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

runApp函数使用给定的Widget并使其成为Widget树的根。在此示例中，部件树由两个小部件组成，即Center部件及其子部件，即Text部件。框架强制根部件覆盖屏幕，这意味着文本“Hello, world”最终集中在屏幕上。文本方向须要在此实例中指定; 当使用MaterialApp部件时，将为您处理好，稍后将进行演示。git

在编写应用程序时，一般会根据您的部件是否管理任何状态来建立新的部件，这些部件是StatelessWidget或StatefulWidget的子类。部件的主要工做是实现一个build函数，它根据其余较低级别的部件描述部件。该框架将依次构建这些部件，直到该过程落在表明底层RenderObject的部件中，该部件计算并描述部件的几何形状。github

基本的部件

主要文章：部件集概述 - 布局模型json

Flutter带有一套强大的基本小部件，其中如下是很是经常使用的：架构

Text：Text小部件可以让您在应用程序中建立一段样式文本。
Row,Column：这些柔性小部件可以让您在水平(Row)和垂直(Column)方向上建立灵活的布局。其设计基于Web的Flexbox布局模型。
Stack：Stack小部件不是以线性方式(水平或垂直方向)进行堆叠，而是使用堆叠顺序将小部件堆叠在彼此之上。而后，您能够在堆栈的子项上使用Positioned小部件，以相对于堆栈的顶部，右侧，底部或左侧边缘定位它们。Stacks基于Web的绝对定位布局模型。
Container：Container小部件可以让您建立矩形视觉元素。一个容器能够装饰一个BoxDecoration，好比背景，边框或阴影。Container也能够有边距，填充和约束应用于其大小。另外，Container可使用矩阵在三维空间中转换。

如下是一些简单的小部件，它们结合了这些和其余小部件：app

import 'package:flutter/material.dart';

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

  // Fields in a Widget subclass are always marked "final".

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 56.0, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: new BoxDecoration(color: Colors.blue[500]),
      // Row is a horizontal, linear layout.
      child: new Row(
        // <Widget> is the type of items in the list.
        children: <Widget>[
          new IconButton(
            icon: new Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null disables the 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 is a conceptual piece of paper on which the UI appears.
    return new Material(
      // Column is a vertical, linear layout.
      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条目。它容许使用预约义的一组材料图标。框架

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

为了继承主题数据，许多小部件须要位于MaterialApp中才能正常显示。所以，咱们使用MaterialApp运行应用程序。less

MyAppBar小部件建立一个Container，其高度为56个设备无关像素，内部填充像素为8像素，均位于左侧和右侧。在容器内部，MyAppBar使用Row布局来组织其子项。中间的孩子，标题小部件被标记为Expanded，这意味着它扩展以填充其余孩子还没有消费的剩余可用空间。您能够有多个Expanded子项，并使用Expanded的flex参数肯定它们占用可用空间的比率。

MyScaffold小部件在垂直列中组织其子女。在列顶部，它放置了MyAppBar的一个实例，将应用程序栏传递给一个Text小部件用做其标题。将小部件做为参数传递给其余小部件是一种强大的技术，可让您建立能够以各类方式重用的通用小部件。最后，MyScaffold使用Expanded来填充剩余空间，其中包含一个中心消息。

使用材料组件

主要文章：小工具概述 - 材料组件

Flutter提供了许多小工具，可帮助您构建遵循Material Design的应用程序。材质应用程序以MaterialApp小部件开始，该小部件在应用程序根部建立了许多有用的小部件，其中包括一个Navigator，该导航器管理由字符串（也称为“routes”）标识的小部件堆栈。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 is a layout for the major Material Components.
    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 is the majority of the screen.
      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切换到material.dart的AppBar和Scaffold窗口小部件，咱们的应用程序开始查看更多的Material。例如，应用栏有一个阴影，标题文本会自动继承正确的样式。咱们还添加了一个浮动动做按钮，以便您采起措施。

请注意，咱们再次将小部件做为参数传递给其余小部件。Scaffold小部件将许多不一样的小部件做为命名参数，每一个小部件放置在适当位置的Scaffold布局中。一样，AppBar小部件容许咱们传递小部件以获取title小部件的leading和actiions。这种模式在整个框架中重复出现，而且在设计本身的小部件时可能会考虑到这一点。

处理手势

主要文章：Flutter的手势

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

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小部件没有可视化表示，而是检测用户作出的手势。当用户点击Container时，GestureDetector将调用其onTap回调，在这种状况下，将消息打印到控制台。您可使用GestureDetector检测各类输入手势，包括点击，拖动和缩放。

许多小部件使用GestureDetector为其余小部件提供可选的回调。例如，IconButton，RaisedButton和FloatingActionButton小部件具备onPressed回调，这些回调在用户轻击小部件时触发。

根据输入更改小部件

主要文章：StatefulWidget，State.setState

到目前为止，咱们只使用无状态的小部件。无状态小部件从他们的父部件接收参数，它们存储在final的成员变量中。当一个小部件被要求build时，它会使用这些存储的值来为它建立的小部件派生新的参数。

为了构建更复杂的体验 - 例如，以更有趣的方式对用户输入作出反应 - 应用程序一般会携带一些状态。Flutter使用StatefulWidgets来捕捉这个想法。 StatefulWidgets是特殊的小部件，它知道如何生成状态对象，而后用它来保持状态。考虑这个基本的例子，使用前面提到的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中，这两种类型的对象具备不一样的生命周期。小部件是临时对象，用于构建当前状态下的应用程序演示文稿。另外一方面，State对象在调用build()之间是持久的，容许它们记住信息。

上面的例子接受用户输入并直接在其构建方法中使用结果。在更复杂的应用程序中，小部件层次结构的不一样部分可能对不一样的问题负责; 例如，一个小部件可能呈现一个复杂的用户界面，其目标是收集特定信息（如日期或位置），而另外一个小部件可能会使用该信息来更改总体呈现。

在Flutter中，更改通知经过回调的方式“向上”流,而当前状态则“向下”流向呈现的无状态小部件。重定向这一流程的共同父母是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),
    ]);
  }
}

注意咱们如何建立了两个新的无状态小部件，干净地分隔了显示计数器（CounterDisplay）和更改计数器（CounterIncrementor）的顾虑。尽管最终结果与前一个示例相同，但责任分离容许将更大的复杂性封装在各个小部件中，同时保持父项的简单性。

把它们放在一块儿

让咱们考虑一个更完整的例子，将上面介绍的概念聚集在一块儿。咱们将与一个假设的购物应用程序一块儿工做，该应用程序显示出售的各类产品，并维护用于预期购买的购物车。咱们首先定义咱们的演示类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小部件遵循无状态小部件的常见模式。它将它在构造函数中接收到的值存储在final的成员变量中，而后在build函数中使用它。例如，inCart布尔值能够在两个可视外观之间切换：一个使用当前主题的主要颜色，另外一个使用灰色。

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

当父级收到onCartChanged回调时，父级将更新其内部状态，这将触发父级重建并使用新的inCart值建立ShoppingListItem的新实例。尽管父级在重建时建立了ShoppingListItem的新实例，但该操做很便宜，由于该框架将新构建的小部件与先前构建的小部件进行比较，并仅将差别应用于基础RenderObject。

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

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，这意味着这个小部件存储可变状态。当ShoppingList小部件首次插入到树中时，框架将调用createState函数来建立_ShoppingListState的新实例，以便与该树中的该位置关联。（请注意，咱们一般使用前导下划线来命名State的子类，以指示它们是私有实现细节。）当此小部件的父级重建时，父级将建立ShoppingList的新实例，但该框架将从新使用树已存在的_ShoppingListState实例而不是再次调用createState。

要访问当前ShoppingList的属性，_ShoppingListState可使用其widget属性。若是父级重建并建立新的ShoppingList，则_ShoppingListState也将使用新的widget值重建。若是您但愿在小部件属性发生更改时收到通知，您能够覆盖didWargetWidget函数，该函数经过oldWidget传递，以便将旧小部件与当前widget进行比较。

在处理onCartChanged回调时，_ShoppingListState会经过添加或删除_shoppingCart中的产品来改变其内部状态。为了通知框架它改变了它的内部状态，它将这些调用包装在setState调用中。调用setState会将这个小部件标记为肮脏，并计划在下一次您的应用程序须要更新屏幕时从新构建它。若是您在修改窗口小部件的内部状态时忘记调用setState，则框架将不知道您的窗口小部件是脏的，而且可能不会调用窗口小部件的build函数，这意味着用户界面可能不会更新以反映已更改的状态。

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

响应小部件生命周期事件

主要文章：State

在StatefulWidget上调用createState以后，框架将新的状态对象插入树中，而后在状态对象上调用initState。State的一个子类能够覆盖initState来完成只须要发生一次的工做。例如，您能够覆盖initState来配置动画或订阅平台服务。 initState的实现须要经过调用super.initState来启动。

当一个状态对象再也不须要时，框架在状态对象上调用dispose。您能够覆盖dispose函数来执行清理工做。例如，您能够覆盖dispose以取消定时器或取消订阅平台服务。一般，经过调用super.dispose执行dispose。

按键

主要文章：Key

您可使用键来控制框架在小部件重建时哪一个小部件匹配哪一个其余小部件。默认状况下，框架根据它们的runtimeType和它们出现的顺序来匹配当前构建和之前构建中的小部件。使用键，框架要求两个小部件具备相同的key以及相同的runtimeType。

键在构建相同类型的部件的许多实例的部件中最有用。例如，ShoppingList窗口部件构建了足够的ShoppingListItem实例来填充其可见区域：

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

全局Key

主要文章：GlobalKey

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