Flutter Key

當widget在widget tree中移動時,key可以保留它的狀態.

key可用於保留用戶的滾動位置,或在修改集合時保持狀態.

什麼時候需要Key

如果你還沒有用過key,說明你可能還不需要使用key.

事實也正是如此,大多數時候,我們不需要使用key.

但是如果你發現自己需要添加,刪除或重新排序處於某種狀態的相同類型的widget的集合的時候,可能就是需要用到key的時候了.

我們先用一個官方的例子來看一下key的作用 , 交換兩個只有顏色不同的widget

class KeyStudy extends StatefulWidget {
  @override
  _KeyStudyState createState() => _KeyStudyState();
}

class _KeyStudyState extends State<KeyStudy> {
  List<Widget> tiles;

  @override
  void initState() {
    super.initState();
    tiles = [StatelessColorfulWidget(), StatelessColorfulWidget()];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: tiles,
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.refresh),
          onPressed: () {
            setState(() {
              tiles.insert(1, tiles.removeAt(0));
            });
          }),
    );
  }
}

class StatelessColorfulWidget extends StatelessWidget {
  static List<Color> colorList = [Colors.blue, Colors.yellow, Colors.red];
  final defaultColor = colorList[new Random().nextInt(3)];

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: defaultColor,
    );
  }
}

代碼不復雜,我們先定義了一個無狀態的widget:StatelessColorfulWidget ,

然後在頁面上並列放置2個該widget.

通過點擊按鈕來調換這兩個widget的位置.

看起來很正常 , 操作也符合我們的預期 , 此時我們將StatelessColorfulWidget從StatelessWidget換成StatefulWidget,並將顏色存儲在state中 ,

class StatefulColorfulWidget extends StatefulWidget {
  StatefulColorfulWidget({Key key}) : super(key: key);

  @override
  _StatefulColorfulWidgetState createState() => _StatefulColorfulWidgetState();
}

class _StatefulColorfulWidgetState extends State<StatefulColorfulWidget> {
  Color defaultColor;

  @override
  void initState() {
    super.initState();
    defaultColor = StatelessColorfulWidget.colorList[new Random().nextInt(3)];
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: defaultColor,
    );
  }
}

代碼依舊不復雜 , 然後用StatefulColorfulWidget替代tiles中的StatelessColorfulWidget,來看一下效果:

我點了幾下按鈕,一點反應都沒有,但是此時如果加個key呢?

像這樣:

  @override
  void initState() {
    super.initState();
    tiles = [
      StatefulColorfulWidget(key: UniqueKey()),
      StatefulColorfulWidget(key: UniqueKey())
    ];
  }

之後我們看看效果:

可以看到,加了key之後,又能正常交換了.

注意 : 如果你在寫以上代碼來看效果的時候,記得每次修改重新運行app,因爲我們的tiles是定義在initState()中的,

熱重載不會執行initState()方法 , 所以可能效果與預期不符.

如果集合中的整個widget子樹是無狀態的, 則不需要key.

說到無狀態,就想起了cool , 確實, 這個key確實很cool.

爲什麼會這樣

在無狀態的widget中, Row爲其子widget提供了一組有序插槽.

對於每一個widget,Flutter都會構建一個相應的Element.

Element tree只保存有關每個widget的類型,以及對子元素的引用信息,

我們可以將 Element tree看做是Flutter應用程序的骨架,它顯示了應用程序的結構, 但可以用過引用原始widget來查找所有其他信息.

當我們交換行中widget的順序時,flutter會遍歷Element Tree來查看骨架的結構是否相同.

從父元素,也就是這裏的Row開始,然後檢查它的子元素,Element Tree會檢查新的widget和舊的widget的runTimeType和key是否相同.

如果是,就會更新對新的widget的引用, 在第一種情況下,我們使用的是StatelessWidget,因爲這個widget沒有key,所以flutter只檢查它的類型.

此時,我們再對StatefulWidget的情況進行同樣的分析:

基本與之前一樣,有同樣的Widget Tree和Element Tree,但是現在也有一對state對象,並將顏色的信息存儲到了這裏.

而不是像StatelessWidget一樣存儲在Widget自身中.

所以此時當我們交換2個wdiget的順序時,Flutter遍歷Element Tree,檢查widget的類型和key,並更新引用.

Flutter使用Element Tree及其相應的狀態來確定實際顯示的內容 , 所以看起來widget沒有正確交換.

而當我們使用了key之後,Flutter檢查會發現key不匹配 , 所以Flutter 會 deactive這些element, 並查找與這個key相同的element,找到後會更新其對widget的引用.

此處,交換之後,對第一個StatefulTileWidget進行檢查的時候,發現右側對應的StatefulileElement的key不匹配,會爲它尋找匹配的element

第二個也是如此 , 現在就可以正常更換widget了.

因爲如果要修改集合中的widget的數量或者順序,那麼key是很有用的.

此處我們舉例僅使用了顏色,但實際上我們在state中會存儲更加複雜的東西, 比如播放動畫,顯示用戶輸入的數據,滾動位置等等,這些都涉及到狀態.

所以,現在我們有一個場景,需要使用key,這個key應該放在哪裏呢?

將Key放在Widget樹的哪個位置

我們應該在widget樹的頂部指定一個需要保留的key.

至於爲神馬是在頂部,我們通過下面一個例子來看一下原因:

我很偷懶的用快捷方式爲這兩個StatefulColorfulWidget添加了Padding,然後我們看一下效果:

看起來好像不是交換啊?點擊按鈕時,widget 變成了隨機的顏色,爲什麼只是將widget用Padding包裹之後就變成了這樣呢?

(有人可能會發現widget的大小改變了,那是因爲之前的widget寬度是200,加了padding之後超出屏幕範圍了,我偷偷改小了)

下圖是添加了Padding之後的Widget Tree和Element Tree的樣子

當我們交換子項的位置時,Flutter的element到widget的匹配算法是一次查看樹的一個級別.

在第一級子項,一起都匹配正確,

但是在第二級時,Flutter會注意到element和widget的key不匹配,因此會停用這個element,去掉它們之間的關聯,

因爲我們此處使用的UniqueKey是LocalKey,這意味着當將widget和element匹配時,Flutter僅查找在樹中特定級別內相匹配的key.

因爲無法在該級別找到具有相同key的element,所以會創建一個新的,並初始化一個新的狀態 ,

在這種情況下,widget會有一個新的顏色.

當然,另外一個也會出現同樣的問題.

那如果我們在Padding添加key呢?Flutter就會找到正確的key來重新建立連接,就像前面的示例一樣.

所以,我們現在知道什麼時候使用key,以及將key放在哪裏了.

但是如果你去Flutter的文檔裏查看key,會發現有幾種不同的key,那麼我們該使用哪一個呢?

應該使用哪個Key

Key的種類

首先我們肯定要知道的是,key究竟有哪幾種?

GlobalKey : 在整個APP中唯一的鍵
LocalKey : 在具有相同父元素的Elements中，鍵必須唯一。

GlobalKey有兩種用途,它允許widget在App的任何位置更改父級而不會丟失狀態,或者可以使用它們在Widget Tree完全不同的部分中訪問有關另一個widget的信息.

比如要在兩個不同的屏幕顯示相同的widget,並保持所有相同的狀態, 此時可以使用GlobalKey.

而LocalKey又有以下幾個子類:

ObjectKey : 從對象中獲取其標識的鍵用作其值。
UniqueKey : 僅等於自身的Key。
ValueKey : 使用特定類型的值標識自己的鍵。
PageStorageKey : ValueKey的子類, 它定義了PageStorage值的保存位置。

PageStorageKey是用來存儲用戶滾動位置的專用key,因此APP可以保留它以供後面使用.

我們要注意3點:

1.在具有相同父元素的Elements中，鍵必須唯一。相比之下，GlobalKeys在整個應用程序中必須唯一。

2.Key的子類應該是LocalKey或GlobalKey的子類.

3.GlobalKey更爲昂貴,因此如果沒有必要,請使用ValueKey, ObjectKey, 或者 UniqueKey.

使用場景

在代辦事項列表應用程序中 , 我們可能希望待辦事項的文本是恆定且獨特的,這種情況,ValueKey是一個很好的選擇,因爲它的文本是value.

如果每個Widget有更復雜的數據組合,任何單個字段都有可能與另一個條目相同,但組合起來是唯一的,這時可以用ObjectKey.

如果集合中有多個具有相同值的widget,或者我們想確保每個widget與其他的widget不同,則可以使用UniqueKey.

我們的示例就是用的UniqueKey,因爲我們沒有任何其他常量數據存儲在我們的組件上,而且在構建widget之前,我們還不知道顏色是什麼.

小結

當你想要跨widget樹保留狀態時 , 應該使用key.

當修改相同類型的widget集合時, 要將key放在要保留的widget的樹的頂部.

並且要根據widget中存儲的數據類型選擇對應的key.

Flutter key

Flutter Key

什麼時候需要Key

爲什麼會這樣

將Key放在Widget樹的哪個位置

應該使用哪個Key

Key的種類

使用場景

小結

Android View的繪製過程複習

Flutter key

Flutter 複習總結

入門 Android Lint

集成FlutterBoost

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結