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.

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

相关推荐
我不只是切图仔31 分钟前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
该用户已不存在1 小时前
macOS是开发的终极进化版吗?
前端·后端
小豆包api1 小时前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
布列瑟农的星空2 小时前
大话设计模式——观察者模式和发布/订阅模式的区别
前端·后端·架构
龙在天2 小时前
Vue3 实现 B站 视差 动画
前端
KenXu2 小时前
F2C Prompt to Design、AI 驱动的设计革命
前端
小鱼儿亮亮2 小时前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界2 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说2 小时前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
农夫三拳_有点甜2 小时前
Flutter Expanded 组件总结
flutter