The Key of Widget in Flutter

Oceanlong

发布于 2020-03-20 15:06:57

1.1K0

发布于 2020-03-20 15:06:57

The Key of Widget in Flutter

当我们刚开始使用Flutter，我们在继承StatelessWidget和StatefulWidget时，不会关注Key。整个界面的渲染通常也不会有什么问题。但当我们想要复用Widget，想要优化我们的渲染性能时，Key就成为了一个绕不过的话题。

一个问题

首先，我们需要明白Flutter的界面渲染原理。深入了解Flutter界面开发这一篇博客讲得非常清楚。当我们需要更新界面时，我们会通过setState的方式，让StatefulWidget遍历Widget树进行重建。

有时候，我们会发现，即使我们调用了setState，Widget也没有进行重建。

它的原因

原来，当我们用一个StatefulWidget渲染界面，其状态可能被我们储存在其State中。当我们修改Widget树中ChildWidget的位置，如果修改完成后，整个树的每一个Widget没有发生改变，Flutter也不会更新整个树。

上面一段话，非常绕且难懂。但我们很容易想象，Element树决定了页面最终展示到屏幕上的样子，Flutter会从上到下逐一对比Widget树和Element树中的每个节点，如果左右节点的类型一致，那么就认为该element仍然是有效的，可用复用。

一个粟子

我们用这样一个StatefulWidget，将其color储存在State中。

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

  @override
  State<StatefulWidget> createState() => StatefulColorfulTileState();
}

class StatefulColorfulTileState extends State<StatefulColorfulTile> {
  // 将 Color 储存在 StatefulColorfulTile 的 State StatefulColorfulTileState 中.
  Color color;

  @override
  void initState() {
    super.initState();
    color = UniqueColorGenaretor.getColor();
  }

  @override
  Widget build(BuildContext context) => buildColorfulTile(color);
}

class PositionedTiles extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => PositionedTilesState();
}

class PositionedTilesState extends State<PositionedTiles> {
  List<Widget> tiles;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Center(
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: tiles))),
        floatingActionButton: FloatingActionButton(
            child: Icon(Icons.sentiment_very_satisfied), onPressed: swapTiles));
  }
  void swapTiles() {
    setState(() {
      tiles.insert(1, tiles.removeAt(0));
    });
  }
}

当我们调用tiles.insert(1, tiles.removeAt(0));时，界面是不会更新的。因为对于Flutter来说，我们交换了两个一模一样的Widget，交换完成后，Widget树并没有变化。如果我们把ChildWidget换成StatelessWidget，且color信息储存在Widget中，界面就会更新，因为Flutter会认为这是两个完全不同的Widget。

那么，如果我们一定要用StatefulWidget来做ChildWidget时，我们应该怎么做呢？

很简单：

void initState() {
  super.initState();
  tiles = [
    // 使用 UniqueKey
    StatefulColorfulTile(key: UniqueKey()),
    StatefulColorfulTile(key: UniqueKey()),
  ];
}

我们给每一个StatefulWidget一个唯一的key。这样，当我们交换Widget时，Flutter就不会认为这两个Widget是一模一样的。

用在哪里

简而言之，当我们在一个容器下，放了多个相同的Widget对象时，我们就应该思考，这些Widget它们是否应该有个id，还是说它们本质上没有区别。

根据业务不同，它们的id，可能是字符(ValueKey)，可能是一个复杂的数据结构(ObjectKey)。或者，我们只是想让它们彼此唯一(UniqueKey)。

此外，我们知道Element是和State绑定的。所以，当你修改了相同类型的Widget节点位置，又想要保留它的状态时，你需要使用Key。

GlobalKey

官方文档

作用

允许widget在应用程序中的任何位置更改其parent而不丢失其状态。应用场景：在两个不同的屏幕上显示相同的widget，并保持状态相同。
可以在任何地方通过key.currentState获取其状态，甚至可以调用changeState()改变它的状态。所以，我们可以认为，用上GlobalKey的Widget，是需要伴随App整个生命周期的。像一个静态的Widget一样。