当前位置:网站首页>flutter通过 GlobalKey 获取界面任意元素坐标尺寸
flutter通过 GlobalKey 获取界面任意元素坐标尺寸
2022-06-28 21:41:00 【一叶飘舟】
最初:
需求开发中遇到要获取屏幕任意元素坐标尺寸的功能,最终实现如下:
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;
}边栏推荐
- 17 `bs对象.节点名h3.parent` parents 获取父节点 祖先节点
- 河狸生存记:90后女博士与AI开发者们
- IPv6 comprehensive experiment
- 10、标准I/O输入输出重定向及管道
- Rosdep update using fishros to solve ros1/ros2 problems 2022
- LeetCode116. 填充每个节点的下一个右侧节点指针
- LeetCode123. 买卖股票的最佳时机III
- Lumiprobe non fluorescent alkyne research - dbco NHS ester
- 2022年股票在手机上开户安全吗?找谁可以办理?
- 零基础自学SQL课程 | SQL中的日期函数大全
猜你喜欢

Zero foundation self-study SQL course | complete collection of date functions in SQL

Postman introduction and installation steps
![[dynamic programming] p1018 linear DP: maximum product](/img/3f/b2f394f328c214937add7afa0568c3.jpg)
[dynamic programming] p1018 linear DP: maximum product

The rogue downloader named by 315 is back

CVPR 2022|极具创意&美感的文字生成方法!支持任意输入

An artifact extracted from a well-known software and paid by a group of people

AI deep dive of Huawei cloud

Lumiprobe protein labeling research scheme

Multinomial distribution (a discrete distribution)

How to analyze the relationship between enterprise digital transformation and data asset management?
随机推荐
10、标准I/O输入输出重定向及管道
LeetCode226. 翻转二叉树
Constructing the three-dimensional anti penetration of the actual combat defense system
CVPR 2022|极具创意&美感的文字生成方法!支持任意输入
LeetCode123. 买卖股票的最佳时机III
Zero foundation self-study SQL course | complete collection of date functions in SQL
LeetCode116. 填充每个节点的下一个右侧节点指针
Adding a markdown editor to lavel
LeetCode122. 买卖股票的最佳时机II
别再问我,UI自动化测试怎么做了……
#yyds干货盘点# 解决剑指offer: 连续子数组的最大和(二)
QStringLiteral(str)
Lumiprobe proteorange protein gel dye instructions
给朋友的忠告
Leetcode: merge K ascending linked lists_ twenty-three
Real time transformer: meituan's research on single image depth estimation
在哪个软件上开户比较安全,开户流程是什么?
Is it safe to open an account for stocks on mobile phones in 2022? Who can I ask?
go-cryptobin 常用加密解密库
Manual backup and restore of DHCP server