Flutter Widget框架概述

介紹

Flutter Widget采用現(xiàn)代響應(yīng)式框架構(gòu)建，這是從 React 中獲得的靈感，中心思想是用widget構(gòu)建你的UI。 Widget描述了他們的視圖在給定其當(dāng)前配置和狀態(tài)時(shí)應(yīng)該看起來像什么。當(dāng)widget的狀態(tài)發(fā)生變化時(shí)，widget會(huì)重新構(gòu)建UI，F(xiàn)lutter會(huì)對(duì)比前后變化的不同， 以確定底層渲染樹從一個(gè)狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需的最小更改（譯者語：類似于React/Vue中虛擬DOM的diff算法）。

注意: 如果您想通過代碼來深入了解Flutter，請(qǐng)查看 構(gòu)建Flutter布局 和 為Flutter App添加交互功能。

Hello World

一個(gè)最簡(jiǎn)單的Flutter應(yīng)用程序，只需一個(gè)widget即可！如下面示例：將一個(gè)widget傳給runApp函數(shù)即可：

import 'package:flutter/material.dart';

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

該runApp函數(shù)接受給定的Widget并使其成為widget樹的根。 在此示例中，widget樹由兩個(gè)widget:Center(及其子widget)和Text組成?？蚣軓?qiáng)制根widget覆蓋整個(gè)屏幕，這意味著文本“Hello, world”會(huì)居中顯示在屏幕上。文本顯示的方向需要在Text實(shí)例中指定，當(dāng)使用MaterialApp時(shí)，文本的方向?qū)⒆詣?dòng)設(shè)定，稍后將進(jìn)行演示。

在編寫應(yīng)用程序時(shí)，通常會(huì)創(chuàng)建新的widget，這些widget是無狀態(tài)的StatelessWidget或者是有狀態(tài)的StatefulWidget， 具體的選擇取決于您的widget是否需要管理一些狀態(tài)。widget的主要工作是實(shí)現(xiàn)一個(gè)build函數(shù)，用以構(gòu)建自身。一個(gè)widget通常由一些較低級(jí)別widget組成。Flutter框架將依次構(gòu)建這些widget，直到構(gòu)建到最底層的子widget時(shí)，這些最低層的widget通常為RenderObject，它會(huì)計(jì)算并描述widget的幾何形狀。

基礎(chǔ) Widget

主要文章: widget概述-布局模型

Flutter有一套豐富、強(qiáng)大的基礎(chǔ)widget，其中以下是很常用的：

• Text：該 widget 可讓創(chuàng)建一個(gè)帶格式的文本。
• Row、 Column： 這些具有彈性空間的布局類Widget可讓您在水平（Row）和垂直（Column）方向上創(chuàng)建靈活的布局。其設(shè)計(jì)是基于web開發(fā)中的Flexbox布局模型。
• Stack： 取代線性布局 (譯者語：和Android中的LinearLayout相似)，Stack允許子 widget 堆疊， 你可以使用 Positioned 來定位他們相對(duì)于Stack的上下左右四條邊的位置。Stacks是基于Web開發(fā)中的絕度定位（absolute positioning )布局模型設(shè)計(jì)的。
• Container： Container 可讓您創(chuàng)建矩形視覺元素。container 可以裝飾為一個(gè)BoxDecoration, 如 background、一個(gè)邊框、或者一個(gè)陰影。 Container 也可以具有邊距（margins）、填充(padding)和應(yīng)用于其大小的約束(constraints)。另外， Container可以使用矩陣在三維空間中對(duì)其進(jìn)行變換。

以下是一些簡(jiǎn)單的Widget，它們可以組合出其它的Widget：

import 'package:flutter/material.dart';

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

  // Widget子類中的字段往往都會(huì)定義為"final"

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 56.0, // 單位是邏輯上的像素（并非真實(shí)的像素，類似于瀏覽器中的像素）
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: new BoxDecoration(color: Colors.blue[500]),
      // Row 是水平方向的線性布局（linear layout）
      child: new Row(
        //列表項(xiàng)的類型是 <Widget>
        children: <Widget>[
          new IconButton(
            icon: new Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null 會(huì)禁用 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呈現(xiàn)的“一張紙”
    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(),
  ));
}

請(qǐng)確保在pubspec.yaml文件中，將flutter的值設(shè)置為：uses-material-design: true。這允許我們可以使用一組預(yù)定義Material icons。

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

為了繼承主題數(shù)據(jù)，widget需要位于MaterialApp內(nèi)才能正常顯示， 因此我們使用MaterialApp來運(yùn)行該應(yīng)用。

在MyAppBar中創(chuàng)建一個(gè)Container，高度為56像素（像素單位獨(dú)立于設(shè)備，為邏輯像素），其左側(cè)和右側(cè)均有8像素的填充。在容器內(nèi)部， MyAppBar使用Row 布局來排列其子項(xiàng)。 中間的title widget被標(biāo)記為Expanded, ，這意味著它會(huì)填充尚未被其他子項(xiàng)占用的的剩余可用空間。Expanded可以擁有多個(gè)children， 然后使用flex參數(shù)來確定他們占用剩余空間的比例。

MyScaffold 通過一個(gè)Column widget，在垂直方向排列其子項(xiàng)。在Column的頂部，放置了一個(gè)MyAppBar實(shí)例，將一個(gè)Text widget作為其標(biāo)題傳遞給應(yīng)用程序欄。將widget作為參數(shù)傳遞給其他widget是一種強(qiáng)大的技術(shù)，可以讓您創(chuàng)建各種復(fù)雜的widget。最后，MyScaffold使用了一個(gè)Expanded來填充剩余的空間，正中間包含一條message。

使用 Material 組件

主要文章: Widgets 總覽 - Material 組件

Flutter提供了許多widgets，可幫助您構(gòu)建遵循Material Design的應(yīng)用程序。Material應(yīng)用程序以MaterialApp widget開始， 該widget在應(yīng)用程序的根部創(chuàng)建了一些有用的widget，其中包括一個(gè)Navigator， 它管理由字符串標(biāo)識(shí)的Widget棧（即頁面路由棧）。Navigator可以讓您的應(yīng)用程序在頁面之間的平滑的過渡。 是否使用MaterialApp完全是可選的，但是使用它是一個(gè)很好的做法。

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,
      ),
    );
  }
}

現(xiàn)在我們已經(jīng)從MyAppBar和MyScaffold切換到了AppBar和 Scaffold widget， 我們的應(yīng)用程序現(xiàn)在看起來已經(jīng)有一些“Material”了！例如，應(yīng)用欄有一個(gè)陰影，標(biāo)題文本會(huì)自動(dòng)繼承正確的樣式。我們還添加了一個(gè)浮動(dòng)操作按鈕，以便進(jìn)行相應(yīng)的操作處理。

請(qǐng)注意，我們?cè)俅螌idget作為參數(shù)傳遞給其他widget。該 Scaffold widget 需要許多不同的widget的作為命名參數(shù)，其中的每一個(gè)被放置在Scaffold布局中相應(yīng)的位置。 同樣，AppBar 中，我們給參數(shù)leading、actions、title分別傳一個(gè)widget。 這種模式在整個(gè)框架中會(huì)經(jīng)常出現(xiàn)，這也可能是您在設(shè)計(jì)自己的widget時(shí)會(huì)考慮到一點(diǎn)。

處理手勢(shì)

主要文章: Flutter中的手勢(shì)

大多數(shù)應(yīng)用程序包括某種形式與系統(tǒng)的交互。構(gòu)建交互式應(yīng)用程序的第一步是檢測(cè)輸入手勢(shì)。讓我們通過創(chuàng)建一個(gè)簡(jiǎn)單的按鈕來了解它的工作原理：

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并不具有顯示效果，而是檢測(cè)由用戶做出的手勢(shì)。 當(dāng)用戶點(diǎn)擊Container時(shí)， GestureDetector會(huì)調(diào)用它的onTap回調(diào)， 在回調(diào)中，將消息打印到控制臺(tái)。您可以使用GestureDetector來檢測(cè)各種輸入手勢(shì)，包括點(diǎn)擊、拖動(dòng)和縮放。

許多widget都會(huì)使用一個(gè)GestureDetector為其他widget提供可選的回調(diào)。 例如，IconButton、 RaisedButton、 和FloatingActionButton ，它們都有一個(gè)onPressed回調(diào)，它會(huì)在用戶點(diǎn)擊該widget時(shí)被觸發(fā)。

根據(jù)用戶輸入改變widget

主要文章: StatefulWidget, State.setState

到目前為止，我們只使用了無狀態(tài)的widget。無狀態(tài)widget從它們的父widget接收參數(shù)， 它們被存儲(chǔ)在final型的成員變量中。 當(dāng)一個(gè)widget被要求構(gòu)建時(shí)，它使用這些存儲(chǔ)的值作為參數(shù)來構(gòu)建widget。

為了構(gòu)建更復(fù)雜的體驗(yàn) - 例如，以更有趣的方式對(duì)用戶輸入做出反應(yīng) - 應(yīng)用程序通常會(huì)攜帶一些狀態(tài)。 Flutter使用StatefulWidgets來滿足這種需求。StatefulWidgets是特殊的widget，它知道如何生成State對(duì)象，然后用它來保持狀態(tài)。 思考下面這個(gè)簡(jiǎn)單的例子，其中使用了前面提到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是單獨(dú)的對(duì)象。在Flutter中，這兩種類型的對(duì)象具有不同的生命周期： Widget是臨時(shí)對(duì)象，用于構(gòu)建當(dāng)前狀態(tài)下的應(yīng)用程序，而State對(duì)象在多次調(diào)用build()之間保持不變，允許它們記住信息(狀態(tài))。

上面的例子接受用戶點(diǎn)擊，并在點(diǎn)擊時(shí)使_counter自增，然后直接在其build方法中使用_counter值。在更復(fù)雜的應(yīng)用程序中，widget結(jié)構(gòu)層次的不同部分可能有不同的職責(zé)； 例如，一個(gè)widget可能呈現(xiàn)一個(gè)復(fù)雜的用戶界面，其目標(biāo)是收集特定信息（如日期或位置），而另一個(gè)widget可能會(huì)使用該信息來更改整體的顯示。

在Flutter中，事件流是“向上”傳遞的，而狀態(tài)流是“向下”傳遞的（譯者語：這類似于React/Vue中父子組件通信的方式：子widget到父widget是通過事件通信，而父到子是通過狀態(tài)），重定向這一流程的共同父元素是State。讓我們看看這個(gè)稍微復(fù)雜的例子是如何工作的：

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),
    ]);
  }
}

注意我們是如何創(chuàng)建了兩個(gè)新的無狀態(tài)widget的！我們清晰地分離了 顯示 計(jì)數(shù)器（CounterDisplay）和 更改 計(jì)數(shù)器（CounterIncrementor）的邏輯。 盡管最終效果與前一個(gè)示例相同，但責(zé)任分離允許將復(fù)雜性邏輯封裝在各個(gè)widget中，同時(shí)保持父項(xiàng)的簡(jiǎn)單性。

整合所有

讓我們考慮一個(gè)更完整的例子，將上面介紹的概念匯集在一起??。我們假設(shè)一個(gè)購(gòu)物應(yīng)用程序，該應(yīng)用程序顯示出售的各種產(chǎn)品，并維護(hù)一個(gè)購(gòu)物車。 我們先來定義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是無狀態(tài)的。它將其在構(gòu)造函??數(shù)中接收到的值存儲(chǔ)在final成員變量中，然后在build函數(shù)中使用它們。 例如，inCart布爾值表示在兩種視覺展示效果之間切換：一個(gè)使用當(dāng)前主題的主色，另一個(gè)使用灰色。

當(dāng)用戶點(diǎn)擊列表項(xiàng)時(shí)，widget不會(huì)直接修改其inCart的值。相反，widget會(huì)調(diào)用其父widget給它的onCartChanged回調(diào)函數(shù)。 此模式可讓您在widget層次結(jié)構(gòu)中存儲(chǔ)更高的狀態(tài)，從而使?fàn)顟B(tài)持續(xù)更長(zhǎng)的時(shí)間。在極端情況下，存儲(chǔ)傳給runApp應(yīng)用程序的widget的狀態(tài)將在的整個(gè)生命周期中持續(xù)存在。

當(dāng)父項(xiàng)收到onCartChanged回調(diào)時(shí)，父項(xiàng)將更新其內(nèi)部狀態(tài)，這將觸發(fā)父項(xiàng)使用新inCart值重建ShoppingListItem新實(shí)例。 雖然父項(xiàng)ShoppingListItem在重建時(shí)創(chuàng)建了一個(gè)新實(shí)例，但該操作開銷很小，因?yàn)镕lutter框架會(huì)將新構(gòu)建的widget與先前構(gòu)建的widget進(jìn)行比較，并僅將差異部分應(yīng)用于底層RenderObject。

我們來看看父widget存儲(chǔ)可變狀態(tài)的示例：

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，這意味著這個(gè)widget可以存儲(chǔ)狀態(tài)。 當(dāng)ShoppingList首次插入到樹中時(shí)，框架會(huì)調(diào)用其 createState 函數(shù)以創(chuàng)建一個(gè)新的_ShoppingListState實(shí)例來與該樹中的相應(yīng)位置關(guān)聯(lián)（請(qǐng)注意，我們通常命名State子類時(shí)帶一個(gè)下劃線，這表示其是私有的）。 當(dāng)這個(gè)widget的父級(jí)重建時(shí)，父級(jí)將創(chuàng)建一個(gè)新的ShoppingList實(shí)例，但是Flutter框架將重用已經(jīng)在樹中的_ShoppingListState實(shí)例，而不是再次調(diào)用createState創(chuàng)建一個(gè)新的。

要訪問當(dāng)前ShoppingList的屬性，_ShoppingListState可以使用它的widget屬性。 如果父級(jí)重建并創(chuàng)建一個(gè)新的ShoppingList，那么 _ShoppingListState也將用新的widget值重建（譯者語：這里原文檔有錯(cuò)誤，應(yīng)該是_ShoppingListState不會(huì)重新構(gòu)建，但其widget的屬性會(huì)更新為新構(gòu)建的widget）。 如果希望在widget屬性更改時(shí)收到通知，則可以覆蓋didUpdateWidget函數(shù)，以便將舊的oldWidget與當(dāng)前widget進(jìn)行比較。

處理onCartChanged回調(diào)時(shí)，_ShoppingListState通過添加或刪除產(chǎn)品來改變其內(nèi)部_shoppingCart狀態(tài)。 為了通知框架它改變了它的內(nèi)部狀態(tài)，需要調(diào)用setState。調(diào)用setState將該widget標(biāo)記為”dirty”(臟的)，并且計(jì)劃在下次應(yīng)用程序需要更新屏幕時(shí)重新構(gòu)建它。 如果在修改widget的內(nèi)部狀態(tài)后忘記調(diào)用setState，框架將不知道您的widget是”dirty”(臟的)，并且可能不會(huì)調(diào)用widget的build方法，這意味著用戶界面可能不會(huì)更新以展示新的狀態(tài)。

通過以這種方式管理狀態(tài)，您不需要編寫用于創(chuàng)建和更新子widget的單獨(dú)代碼。相反，您只需實(shí)現(xiàn)可以處理這兩種情況的build函數(shù)。

響應(yīng)widget生命周期事件

主要文章: State

在StatefulWidget調(diào)用createState之后，框架將新的狀態(tài)對(duì)象插入樹中，然后調(diào)用狀態(tài)對(duì)象的initState。 子類化State可以重寫initState，以完成僅需要執(zhí)行一次的工作。 例如，您可以重寫initState以配置動(dòng)畫或訂閱platform services。initState的實(shí)現(xiàn)中需要調(diào)用super.initState。

當(dāng)一個(gè)狀態(tài)對(duì)象不再需要時(shí)，框架調(diào)用狀態(tài)對(duì)象的dispose。 您可以覆蓋該dispose方法來執(zhí)行清理工作。例如，您可以覆蓋dispose取消定時(shí)器或取消訂閱platform services。 dispose典型的實(shí)現(xiàn)是直接調(diào)用super.dispose。

Key

主要文章: Key_

您可以使用key來控制框架將在widget重建時(shí)與哪些其他widget匹配。默認(rèn)情況下，框架根據(jù)它們的runtimeType和它們的顯示順序來匹配。 使用key時(shí)，框架要求兩個(gè)widget具有相同的key和runtimeType。

Key在構(gòu)建相同類型widget的多個(gè)實(shí)例時(shí)很有用。例如，ShoppingList構(gòu)建足夠的ShoppingListItem實(shí)例以填充其可見區(qū)域：

• 如果沒有key，當(dāng)前構(gòu)建中的第一個(gè)條目將始終與前一個(gè)構(gòu)建中的第一個(gè)條目同步，即使在語義上，列表中的第一個(gè)條目如果滾動(dòng)出屏幕，那么它將不會(huì)再在窗口中可見。
• 通過給列表中的每個(gè)條目分配為“語義” key，無限列表可以更高效，因?yàn)榭蚣軐⑼綏l目與匹配的語義key并因此具有相似（或相同）的可視外觀。 此外，語義上同步條目意味著在有狀態(tài)子widget中，保留的狀態(tài)將附加到相同的語義條目上，而不是附加到相同數(shù)字位置上的條目。

全局 Key

主要文章: GlobalKey

您可以使用全局key來唯一標(biāo)識(shí)子widget。全局key在整個(gè)widget層次結(jié)構(gòu)中必須是全局唯一的，這與局部key不同，后者只需要在同級(jí)中唯一。由于它們是全局唯一的，因此可以使用全局key來檢索與widget關(guān)聯(lián)的狀態(tài)。