之前讲flutter的渲染原理时我们知道flutter有三棵树：widgetTree，elementTree，renderObjectTree，widget包含了基本的配置信息，element决定要不要重新创建renderObject，而renderObject则负责实际的渲染工作。我们来看一个例子，代码如下：

main.dart

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("key demon"),
        ),
        body: Center(
            child:Column(children: [
              Box(Colors.red),
              Box(Colors.red),
              Box(Colors.orange),
            ],)
        ),
      ),
    );
  }
}

基础框架就不看了，主要是body里面放了三个box的widget，下面是box的代码：

class Box extends StatefulWidget{

  final color;
  Box(this.color);

  @override
  State createState() {
    return _BoxState();
  }

}

class _BoxState extends State{

  var count = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: const EdgeInsets.only(top: 30),
        alignment: AlignmentDirectional.center,
        child: RawMaterialButton(
          onPressed: () {
          setState(() {
            count++;
          });
        },
          child: Text("$count",textAlign: TextAlign.center,style: const TextStyle(fontSize: 50,color: Colors.white),),
          constraints: const BoxConstraints(minWidth: 80,minHeight: 80),
          fillColor: widget.color,
        )
      );
  }
}

很显然，box是一个statefulWidget，或根据传进来的color来改变自身的颜色，而它内部也有一个点击事件，用来改变state缓存的count变量，每次点击加一。运行效果如下图：

image.png

将第一个box点击几下使之变成5，运行效果如下图：

image.png

此时，如果我们把body里面的三个box最上面的一个去掉

        body: Center(
            child:Column(children: [
              // Box(Colors.red),
              Box(Colors.red),
              Box(Colors.orange),
            ],)
        ),

得到的效果应该是并列的两个box，上面的为红色，下面为橙色，且两个数字都为0，但实际热更新编译的效果却是上面一个的红色box数字是5，下面的橙色box数字为0。如下图：

image.png

为啥会这样呢？
我们知道，flutter的ui渲染包含widget，element和renderObject，widget作为配置信息比较轻量级，每一帧渲染的时候就会有一个新的widget对象产生，而element和renderObject却只有在widget类型发生改变或者所持有的key不一致时才会进行重建。

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

因此，就可以有下一张图：

image.png

当box1被删除后，box2顶了上来。实际上只是box的widget发生了变化，由box1的widget替换成了box2的widget，而element依然还是box1的element，因此该element里面的state并没有发生变化，state里面缓存的值也没有发生改变。对应的，renderObject也没有改变。
同样的，box3也是widget由box2替换成了box3的，element依然还是box2的，因为widget变化了，相应的颜色也变化了，所以渲染之后的效果就变成了橙色的。而state里面的值依然还是0。
box3下面没有元素了，所以对应的widget和element都变成了null，因此原来的box3的element和renderObject直接从各自的树上移除掉。
说了这么多，依然还只是引子，那么，假如将box1移除后我们想要得到的效果是box2和box3直接上移，它们的颜色和值都不改变，应该怎么做呢？
答案就是使用key。

key

key我们可以理解为每个控件所独有的一个ID，用以识别是哪个UI。有了key，element和renderObject就会被强行重建，从而得到所见即所得的效果。
key可以分为LocalKey和GlobalKey，字面上理解就是局部key和全局key。
具体分类如下：

image.png

LocalKey

LocalKey 直接继承至 Key，它应用于拥有相同父 Element 的小部件进行比较的情况，也就是上述例子中，有一个多子 Widget 中需要对它的子 widget 进行移动处理，这时候你应该使用Localkey。它也是我们日常用到的比较多的key。
Localkey 派生出了许多子类 key：
-ValueKey : ValueKey(‘String’)
-ObjectKey : ObjectKey(Object)
-UniqueKey : UniqueKey()
　　 - Valuekey 又派生出了 PageStorageKey : PageStorageKey(‘value’)
如果是statelessWidget，那么就没必要使用key了，因为每一帧widget都会重建；而statefulWidget由于使用了state，state当中通常会缓存很多需要在UI上展示的变量，它不会时常重建，所以就需要使用key来强制改变。

ValueKey

可以传入任何对象，比较的时候会对比它的内容是否一致。

  @override
  bool operator ==(Object other) {
    if (other.runtimeType != runtimeType)
      return false;
    return other is ValueKey
        && other.value == value;
  }

ObjectKey

可以传入任何参数，比较的时候会比较它的指针是否一致，即是否为同一个对象。

  @override
  bool operator ==(Object other) {
    if (other.runtimeType != runtimeType)
      return false;
    return other is ObjectKey
        && identical(other.value, value);
  }

UniqueKey

不需要传任何参数，每次刷新都会生成一个新的值，通常用于动画的过渡当中。比如：

         AnimatedSwitcher(
              duration: const Duration(seconds: 1),
              child: Text("no keyrrths", key: UniqueKey()),
            )

每次改变文字时，假如不传uniqueKey，就不会有动画的渐变效果，而如果传了UniqueKey，则会有渐变动画效果。因为不传uniqueKey时，每次都只会认为text的widget发生了变化，只会将text的widget给替换为新的widget，而element还是同一个不会变化，所以会认为UI没有发生变化，因此不会改变；而如果传了uniqueKey时，每次widget比较时都会因为自身的key不一致而被认为是不同的widget，导致会重建element和renderObject，前后两个UI不一致，此时就会发生动画效果。

GlobalKey

全局变量，顾名思义，整个应用程序里都是唯一的，所以同一个globalKey只能作用在一个widget上。可以通过globalKey拿到所对应的state和element或者widget，用以改变state的状态或者变量值，以及刷新UI。不过不推荐这样做，一般推荐通过控制外面的变量来刷新UI。

        floatingActionButton: FloatingActionButton(
          onPressed: (){
            var state = (_globalKey as BoxState);
            state.count++;
            state.setState(() {
            });
          },
          child: const Icon(Icons.add),
        ),

（注意，这里带下划线的变量为私有变量，文件外部引用不到）

滑块游戏

接下来使用ReorderableListView来做一个滑块的小游戏。
主要包含两个文件：main.dart和move_game.dart(发现假如使用大写命名dart文件就会报一堆波浪线警告)
main.dart

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  MyApp({Key? key}) : super(key: key);
  final _globalKey = GlobalKey();
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("key demon"),
        ),
        body: Center(
          child: MoveGameWidget(key:_globalKey),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            changeMoveGameStateByGlobalKey();
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }

  changeMoveGameStateByGlobalKey(){
    var state = _globalKey.currentState as MoveGameState;
    state.shuffle();
    state.setState(() {
    });
  }
}

move_game.dart

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


  @override
  State createState() {
    return MoveGameState();
  }
}

class MoveGameState extends State {

  final boxes = [Box2(Colors.blue.shade100, "100",key: UniqueKey()),
    Box2(Colors.blue.shade200, "200",key: UniqueKey()),
    Box2(Colors.blue.shade300, "300",key: UniqueKey()),
    Box2(Colors.blue.shade400, "400",key: UniqueKey()),
    Box2(Colors.blue.shade500, "500",key: UniqueKey()),
    Box2(Colors.blue.shade600, "600",key: UniqueKey()),
    Box2(Colors.blue.shade700, "700",key: UniqueKey()),];

  @override
  void initState() => shuffle();

  shuffle(){
    boxes.shuffle();
  }


  @override
  Widget build(BuildContext context) {
    return ReorderableListView(
        onReorder: (int oldIndex, int newIndex) {
          print("oldIndex ="+oldIndex.toString()+",newIndex ="+newIndex.toString());
          var tmp = boxes.removeAt(oldIndex);
          boxes.insert(newIndex, tmp);
        },
        children:boxes);
  }
}

class Box2 extends StatelessWidget {
  final Color color;
  final String tag;

  const Box2(this.color, this.tag,{Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      width: 40,
      height: 50,
      alignment: Alignment.center,
      margin: const EdgeInsets.all(10),
      child: Text(tag,textAlign: TextAlign.center,style: const TextStyle(fontSize: 30,color: Colors.deepOrange),),
    );
  }
}

效果如下：

image.png

短短几十行代码就实现了色块的滑动插入功能。每个色块长按都可以滑动到指定位置，初始化的时候会调用shuffle函数将数组顺序打乱，按照数字顺序排好之后，点击加号按钮又会将顺序打乱，则又可以继续移动滑块了。
这里有两个地方用到了key，一个是点加号刷新的时候，会通过globalKey找到moveGameWidget的state从而进行数组重排；另外一个就是每个色块都拥有一个单独的uniqueKey，每次刷新都与之前不同，所以会进行element重建，从而形成过渡动画。

Flutter之key的原理和使用

main.dart

key

LocalKey

ValueKey

ObjectKey

UniqueKey

GlobalKey

滑块游戏

你可能感兴趣的:(Flutter之key的原理和使用)