首页 > 其他分享 >Flutter widget_id: key 的使用

Flutter widget_id: key 的使用

时间:2024-03-01 17:24:03浏览次数:12  
标签:widget Widget GlobalKey key var identityHashCode Flutter

Flutter widget id(唯一标识): key

key 的作用

  • Key 是一个附加到元素(widgets, semantics, render objects等)的标识符。
  • 它用于控制框架是否应将旧widget与当前树中的其他widget匹配起来。
  • 简单来说,Keys的作用主要在于保持状态和在widget树重建时识别哪些widget是相同的。

key 的分类

  1. LocalKey
  • ValueKey
    • 当你希望Flutter能够区分同类型的两个或多个widget时,可以使用 ValueKey
    • ValueKey 应该使用一个在当前上下文中唯一的值来创建
    • 通过传入的 value 来比较两个 key 是否相等
    • 代码
/// 正确执行没有任何错误
void main() {
  var valKey1 = const ValueKey(1);
  var valKey2 = const ValueKey(1);
  assert(identityHashCode(valKey1) == identityHashCode(valKey2));
}
  • ObjectKey
    • 根据引用是否相同判断是否是同一个 key
    • 代码
void main() {
  var value = 1; // 同一个对象实例
  var objectKey1 = ObjectKey(value);
  var objectKey2 = ObjectKey(value);

  // 由于objectKey1和objectKey2是用同一个对象实例(value)创建的,
  print(identityHashCode(objectKey1) == identityHashCode(objectKey2)); /// False, 此时如果想要相同必须使用const关键字
  print(objectKey1 == objectKey2); /// True
}
  • UniqueKey
    • 没有任何参数
    • 直接返回一个唯一的 UniqueKey instance
    • 代码
void main() {
  var uniqueKey1 = UniqueKey();
  var uniqueKey2 = UniqueKey();
  /// 直接出错
  assert(identityHashCode(uniqueKey1) == identityHashCode(uniqueKey2));
}
  1. GlobalKey(会有一些性能影响)
  • GlobalKey
    • 没有参数,直接返回一个 unique 的 globalKey
    • GlobalKey 可以有多个,每个 GlobalKey 都是全局唯一的。
    • 每个 GlobalKey 应该只赋给一个 Widget。一个 Widget 不应该同时有多个 GlobalKey。
    • GlobalKey 的作用是在整个应用程序的上下文中唯一标识一个 Widget,它可以用来访问 Widget 的状态或者是用在动画中的 Widget 之间的转换。
    • 使用 GlobalKey 可以跨组件和组件树层级访问 Widget 的状态,控制 Widget 或是访问其他与 Widget 相关的功能。
  • GlobalObjectKey
    • GlobalObjectKey 比 GlobalKey 更加特定,因为它关联了一个具体的对象,并且这个对象的标识符用于确定 Widget 的唯一性。

标签:widget,Widget,GlobalKey,key,var,identityHashCode,Flutter
From: https://www.cnblogs.com/sqmw/p/18047396

相关文章

  • QVTKOpenGLNativeWidget中绘制vtkButtonWidget
    本文探讨了如何结合Qt和VTK(VisualizationToolkit)开发图形用户界面(GUI),通过一个具体的案例,详细介绍了如何在Qt应用程序中嵌入VTK渲染器,并创建交互式的图形元素,如按钮,以实现更丰富的用户体验。文章还深入剖析了如何处理按钮点击事件,以及如何将Qt的图像数据转换为VTK格式。介绍:在......
  • Flutter 定义局部路由 Navigator
    Flutter中,通常我们使用Navigator来管理全局的页面路由,在整个应用中维护一个路由堆栈。但是,有些情况下你可能需要一个局部路由,也就是在应用的某个部分内部维护一个独立的路由堆栈,而不影响全局路由。为了实现这一点,你可以在你的应用中创建一个新的Navigator局部路由简单使用......
  • Isolate线程通信 flutter
    A、B互传消息A、B都创建自己的接收端口和发送端口A将自己的发送端口发送给对面B,B才能拿到A的发送端口,给A发送消息A监听自己的接收端口,拿到B发给自己的消息B监听自己的接收端口,拿到A发给自己的消息voidfunction_main()async{print("当前线程:"+Isolate.current.debu......
  • Flutter 页面跳转并返回数据
     主页面FutureonSubmit()async{finalresult=awaitGet.to(constPageGoodsSelectList());print(result.name);goodsId.value=result.id;setState((){goodsname.value=result.name;});}调用onSubmit跳转到下一个页面 onChildT......
  • 常用vtkWidget的作用和效果
    常用vtkWidget的作用和效果:vtkImageCroppingRegionsWidget:作用:vtkImageCroppingRegionsWidget是一个用于裁剪图像数据的小部分区域的交互式部件。它允许用户在图像上选择感兴趣的区域,并将其用作图像裁剪的参数。效果:当使用vtkImageCroppingRegionsWidget时,用户可以在图像上......
  • java 替换Map中key的值
    importjava.util.*;importjava.util.stream.Collectors;publicclassMapKeyReplacement{publicstaticvoidmain(String[]args){//假设我们有如下的List<Map<String,String>>List<Map<String,String>>list=Arrays.asL......
  • 为什么iOS包比Android包大 flutter
    由于Android系统已经内置了Skia,所以Flutter在打包APK(Android应用安装包)时,不需要再将Skia打入APK中,但iOS系统并未内置Skia,所以构建iPA时,也必须将Skia一起打包 安卓1.在debug模式下,so库打入了x86_64、x86、arm64-v8a,总共22.28M2.在release模式下,so库只有armeabi-v7a,总共3.4......
  • Vue学习笔记19--key的原理
    react、vue中key的作用(key的原理?):虚拟DOM中key的作用:key是虚拟DOM对象的标识,当张贴中的数据发生变化时,vue会根据--新数据,生成新的虚拟DOM,随后vue进行新虚拟DOM与旧虚拟DOM的差异比较。比较规则如下:对比规则旧虚拟DOM中找到了与新虚拟DOM相同的key若虚拟DOM中内容没......
  • Flutter界面跳转
    第一种带参数跳转import'package:flutt/scrond_page.dart';import'package:flutt/third_page.dart';import'package:flutter/cupertino.dart';import'package:flutter/material.dart';voidmain(){runApp(constCupertinoApp(......
  • Flutter 使用inspector 调试UI
    1.在AndroidStudio中点击Flutterinspector2.点击FlutterPerformace-openDevtool在浏览器中调试3.点选中widget可以在widget树中和模拟器中相互点击调试、相应控件会高亮4.其他功能 ......