Flutter进阶-key的原理

在之前的篇幅介绍中，我们在构造函数中都没有使用key，只要继承于Widget的都默认有这个key属性，这是一个可选属性。下面我们通过案例来研究一个key的作用。

const MyApp({Key? key}) : super(key: key);

StatefulWidget中的key

先搭建一个页面，在页面的中间位置随机创建不同颜色的正方形

class _MyHomePageState extends State<MyHomePage> {
  List<SquareItem1> list = [
    const SquareItem1('上上上', key: ValueKey(111),),
    const SquareItem1('中中中', key: ValueKey(222),),
    const SquareItem1('下下下', key: ValueKey(333),)
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: list,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            list.removeAt(0);
          });
        },
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

其中SquareItem1的构造方法如下：const SquareItem1(this.title, {Key? key}) : super(key: key);

import 'dart:math';
import 'package:flutter/material.dart';
class SquareItem1 extends StatefulWidget {
  final String title;
  const SquareItem1(this.title, {Key? key}) : super(key: key);

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

class _SquareItem1State extends State<SquareItem1> {
  final color = Color.fromRGBO(
      Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1.0);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: color,
      child: Text(widget.title),
    );
  }
}

在点击按钮的时候，一次删除数组中的第一个元素 仔细看，通过实验对比可以明显的发现，此时顺序似乎是有点问题，那么问题出在哪里？

• 先看文字：文字的话似乎顺序没有问题，每一次都删除最上面的
• 再看颜色：颜色话倒像从是后面开始删除的，每次把最后一个删掉 带着这个疑问，我们再来看看StatelessWidget中的key

StatelessWidget中的key

这次继承的是StatelessWidget,其中SquareItem1的构造方法如下：SquareItem(this.title, {Key? key}) : super(key: key);

import 'dart:math';
import 'package:flutter/material.dart';

class SquareItem extends StatelessWidget {
  final String title;
  SquareItem(this.title, {Key? key}) : super(key: key);

  final color = Color.fromRGBO(
      Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1.0);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: color,
      child: Text(title),
    );
  }
}

经过观察发现，此次的remove的顺序没有问题，颜色和文字都能一一对应上。通过两边的代码对比发现唯一的差别可能就是color初始化的位置区别，一个是在State中初始化，一个是在Widget中初始化，那是不是就是这个原因呢，我们接着研究。

key的使用

在StatefulWidget中我们可以通过给key赋值来区分不同的Widget，示例

  List<SquareItem1> list = [
    const SquareItem1(
      '上上上',
      key: ValueKey(111),
    ),
    const SquareItem1(
      '中中中',
      key: ValueKey(222),
    ),
    const SquareItem1(
      '下下下',
      key: ValueKey(333),
    )
  ];

此时再运行发现颜色+文字删除的顺序正确了。所以我们有理由合理大胆的猜测，之所以在Stateful中数据紊乱是因为对应关系出了问题，那么到底是不是呢，我们看下API。StatelessWidget -> Widget 这里有一个方法canUpdate​

  static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }

Flutter是增量渲染，哪些需要更新的通过上面的那个方法来判断。所以当两个Widget都StatefulWidget的时候，如果不指定key的话，如果结构一样那么此时这个方法就会返回True

• 在Widget中保存的是Text
• 在Element中保存的是Color
• 在删除的时候，虽然我们删除了文字，但是由于没有指定key，所以canUpdate = true所以此时第一个Element的颜色指向了Widget的第二个，这也就是示例一中出现的问题。

当然如果再新增一个跟上面一模一样的小部件，此时没有用到了Element下有了新的指向就不会删除了。也就是说新增的color= Element下的颜色

Key的原理

Key本身是一个抽象类，有一个工厂构造方法，创建ValueKey,其直接子类主要有：LocalKey和GlobalKey

1. GlobalKey:帮助访问某一个Widget的信息
2. LocalKey: 用来区别哪个Element需要保留
   • const ValueKey(this.value);// 以值作为参数，数字、字符串
   • const ObjectKey(this.value);// 以对象作为参数
   • UniqueKey();// 创建唯一标识

GlobalKey的使用

import 'package:flutter/material.dart';

class GlobalDemo extends StatelessWidget {
  const GlobalDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
      ),
      body: const BodyCenter(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //外层需要调用内层的count++
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

class BodyCenter extends StatefulWidget {
  const BodyCenter({Key? key}) : super(key: key);

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

class _BodyCenterState extends State<BodyCenter> {
  int count = 0;
  String title = 'hello';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [Text(count.toString()), Text(title)],
        mainAxisAlignment: MainAxisAlignment.center,
      ),
    );
  }
}

在下面的设计中，外层是一个StatelessWidget中间的body是一个StatefulWidget,我们在外层onPress的时候，正常情况是无法更新内存的count的，此时用GlobalKey可以解决

1. 在外层初始化一个GlobalKey同时指定需要跟哪个State绑定final GlobalKey<_BodyCenterState> _globalKey = GlobalKey();
2. 内存小部件初始化的时候同步绑定body: BodyCenter(key: _globalKey),
3. 使用方式：

onPressed: () {
  _globalKey.currentState!.setState(() {
  _globalKey.currentState!.title =
     '上一次count=' + _globalKey.currentState!.count.toString();
      _globalKey.currentState!.count++;
    });
},

只要是属于当前子部件的树状结构中，这种方式都管用，都可以拿到子部件的数据。