flutter开发实战-获取Widget的大小及位置

flutter开发实战-获取Widget的大小及位置

最近开发过程中需要获取Widget的大小及位置,这时候就需要使用到了GlobalKey了和WidgetsBinding.instance.addPostFrameCallback了

一、addPostFrameCallback

该函数的作用:

flutter中的界面组件Widget每一帧渲染在界面上,addPostFrameCallback功能是在每一帧绘制完成后再回调执行自定义的方法

例如在绘制完成后,根据获取Widget的大小及位置

dart 复制代码
@override
  void initState() {
    // TODO: implement initState
    super.initState();

    WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
      if (mounted) {
        updateElementFrame();
      }
    });
  }

二、GlobalKey

GlobalKey可以方便地帮助我们获取指定Widget的状态、大小、位置,还可以很方便用来调用指定Widget的方法。

经常用在父子组建Widget调用:https://blog.csdn.net/gloryFlow/article/details/131960753

这里使用GlobalKey来获取大小、位置。

代码如下

dart 复制代码
void updateElementFrame() {
    if (mounted) {
      GlobalKey globalKey = widget.key as GlobalKey;
      if (globalKey.currentContext != null) {
        RenderBox renderBox =
        globalKey.currentContext!.findRenderObject() as RenderBox;
        // offset.dx , offset.dy 就是控件的左上角坐标
        Offset offset = renderBox.localToGlobal(Offset.zero);
        //获取size
        Size size = renderBox.size;
      }
    }
  }

三、小结

flutter开发实战-获取Widget的大小及位置。需要使用到了GlobalKey了和WidgetsBinding.instance.addPostFrameCallback.

学习记录,每天不停进步。

相关推荐
蓝天白云下遛狗6 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come1123430 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿3 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再3 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref