Flutter key localKey globalKey 深入理解

最新推荐文章于 2024-08-13 19:07:01 发布

jike_yangyujing

最新推荐文章于 2024-08-13 19:07:01 发布

阅读量1.8k

点赞数 2

分类专栏： Flutter 文章标签： flutter flutter key localkey globalkey runtimeType

本文链接：https://blog.csdn.net/jike_yangyujing/article/details/103143425

版权

本文详细探讨了Flutter中的Key概念，解释了为何在statelessWidget和statefulWidget中使用Key的原因。通过实例展示了Key在不同场景下的使用，如ValueKey、ObjectKey、UniqueKey和GlobalKey等，强调了Key在维护Widget状态和元素匹配中的重要作用。最后，总结了何时、何处以及如何选择合适的Key类型。

摘要由CSDN通过智能技术生成

1. 什么是key

您可以使用key来控制框架将在widget重建时与哪些其他widget匹配。默认情况下，框架根据它们的runtimeType和它们的显示顺序来匹配。使用key时，框架要求两个widget具有相同的key和runtimeType。

Widget 更新机制

下面来来看Widget的源码。

@immutable
abstract class Widget extends DiagnosticableTree {
   
  const Widget({
    this.key });
  final Key key;
  ···
  static bool canUpdate(Widget oldWidget, Widget newWidget) {
   
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }
}

Widget 只是一个配置且无法修改，而 Element 才是真正被使用的对象，并可以修改。当新的 Widget 到来时将会调用 canUpdate 方法，来确定这个 Element是否需要更新。返回true时可以更新对element索引
canUpdate 对两个（新老） Widget 的 runtimeType 和 key 进行比较，从而判断出当前的 Element 是否需要更新

If the widgets have no key (their key is null), then they are considered a match if they have the same type, even if their children are completely different.

那么设么时候用key呢？

2. key的使用

实例

statelessWidget 实现两个颜色块交换

class StatelessContainer extends StatelessWidget {
   
  final Color randomCol = getRandomColor();
  @override
  Widget build(BuildContext context) {
   
    return Container(
      width: 100,
      height: 100,
      color: randomCol,
    );
  }
}

class MyHomePage extends StatefulWidget {
   
  MyHomePage({
   Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
   
List<Widget> widgets;

  //初始化加载资源
  @override
  void initState() {
   
    super.initState();
    widgets =  [
      StatelessContainer(),
      StatelessContainer()];
  }

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: widgets,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: switchWidget