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.

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

相关推荐
neter.asia1 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫2 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年21 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_22 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891124 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾26 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu28 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym32 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫34 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫37 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js