专栏首页移动开发面面观The Key of Widget in Flutter

The Key of Widget in Flutter

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一样。

结语

对于key的使用,需要根据我们业务的具体情况,根据Flutter的渲染机制,灵活掌握。其核心就是Element与Widget的绑定关系,是类型绑定,还是key+类型的绑定。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 计算机网络学习笔记(一)

    当一个客户寻求服务时,他首先要找到服务的地址。有了这个地址,它就能找到对应的服务器。这就是IP地址,它也唯一标识了主机。

    Oceanlong
  • okhttp——RetryAndFollowUpInterceptor

    okhttp的网络请求采用interceptors链的模式。每一级interceptor只处理自己的工作,然后将剩余的工作,交给下一级interceptor。本...

    Oceanlong
  • Future备忘录

    Future是一个接口,它的主要目的,是为了我们能够方便的控制在线程中的任务的进度。在实际使用中,它常与Callable一起使用。本文主要为了理清,Java中,...

    Oceanlong
  • Flutter测试(二):在项目中进行 Widget 测试

    上回书对 Flutter 中 Widget 测试的官方 Demo 进行了简单的讲解,这篇文章我们对自己的项目进行 Widget 测试。

    Flutter笔记
  • Dubbo之服务暴露

    Dubbo 通过使用 dubbo:service配置或 @service在解析完配置后进行服务暴露,供服务消费者消费。

    ytao
  • 从零开始写一个抖音App——开始一、写在前面二、项目概述三、尾巴

    何时夕
  • JPEG-XS:用于IP视频的母片图像(mezzanine image)编解码器

    本帖参考T. Richter等人发表在SMPTE Motion Imaging Journal的文章JPEG-XS—A High-Quality Mezzani...

    用户1324186
  • PyTorch 的这些更新,你都知道吗?

    昱良
  • PyTorch 重磅更新,不只是支持 Windows

    这次版本的主要更新一些性能的优化,包括权衡内存计算,提供 Windows 支持,24个基础分布,变量及数据类型,零维张量,张量变量合并,支持 CuDNN 7.1...

    AI科技大本营
  • Spring Boot---(5)SpringBoot常用注解

    @SpringBootApplication: 这是Sprint Boot的标识,它包含@Configuration、@EnableAutoConfigura...

    IT云清

扫码关注云+社区

领取腾讯云代金券