flutter通过 GlobalKey 获取界面任意元素坐标尺寸

最新推荐文章于 2023-12-08 18:18:56 发布

一叶飘舟

最新推荐文章于 2023-12-08 18:18:56 发布

阅读量1.4k

点赞数

分类专栏： flutter 文章标签： flutter android

原文链接：https://www.jianshu.com/p/50ef665fe350

版权

flutter 专栏收录该内容

148 篇文章 77 订阅

订阅专栏

这篇博客介绍了在Flutter中如何获取屏幕任意元素的坐标和尺寸。通过使用 GlobalKey 和扩展方法，开发者可以轻松地获取Widget的RenderBox，进一步得到位置和大小信息，这对于实现特定交互或布局调整非常有用。

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

最初：

需求开发中遇到要获取屏幕任意元素坐标尺寸的功能，最终实现如下：

1. example：

//...
GlobalKey _globalKey = GlobalKey();

@override
Widget build(BuildContext context) {
    //...
    ElevatedButton.icon(
      icon: Icon(Icons.send),
      label: Text("发送"),
      // onPressed: () => ddlog('pressed'),
      key: _globalKey,
      onPressed: (){
        // _showCustomPopView();
        ddlog(_globalKey.position());// Offset(143.5, 117.0)
        ddlog(_globalKey.size);// Size(88.0, 48.0)
      },
    ),
    //...
}

2. extension 封装：

import 'package:flutter/material.dart';

extension BuildContextExt on BuildContext {

  /// 获取当前组件的 RenderBox
  RenderBox? renderBox() {
    return this.findRenderObject() is RenderBox ? (this.findRenderObject() as RenderBox) : null;
  }

  /// 获取当前组件的 position
  Offset? position({Offset offset = Offset.zero}) {
    return this.renderBox()?.localToGlobal(offset);
  }
}


extension GlobalKeyExt on GlobalKey{

  /// 获取当前组件的 RenderBox
  RenderBox? renderBox() => this.currentContext?.renderBox();

  /// 获取当前组件的 position
  Offset? position({Offset offset = Offset.zero}) => this.currentContext?.position(offset: offset);

  /// 获取当前组件的 Size
  Size? get size  => this.currentContext?.size;

}