一、RenderObject定义
官方定义,RenderObject : An object in the render tree.即渲染树中的一个对象,负责布局及绘制。
二、Widget 、Element 、RenderObject 关系
Widget 描述 Element 的配置信息,是 Flutter 框架里的核心类层次结构,一个 Widget 是用户界面某一部分的不可变描述。Widgets 可以转为 Elements,Elements 管理着底层的渲染树。
- Widget实际上就是Element的配置数据,Widget树实际上是一个配置树,而真正的UI渲染树是由Element构成。Widget只是描述显示元素的一个配置数据,真正代表屏幕上显示元素的类是Element。一个Widget对象可以对应多个Element对象。(相同的widget可以同时存在)
- UI树由一个个独立的Element节点构成。组件最终的显示、渲染都是通过RenderObejct来完成的,
- 从创建到渲染的大体流程是:根据Widget生成Element,然后创建相应的RenderObejct并关联到Element.renderObject属性上,最后再通过RenderObject来完成布局排列和绘制。他们的依赖关系是:Element树根据Widget树生成,而渲染树又依赖于Element树。
三、利用RenderObject获取widget定位
我们可以知道最终页面的显示、渲染是根据renderObject来确定的,所以可以利用renderObject的属性findRenderObject()来获取widget的定位坐标。
1.给需要定位的组件添加GlobalKey
GlobalKey _globalKey = new GlobalKey();
TextField(
key: _globalKey,
style: TextStyle(
fontSize: 15.0,
color: Colors.black),
textInputAction: TextInputAction.next,
)
2.获取组件坐标
RenderBox renderObject = _globalKey.currentContext.findRenderObject();
var offset = renderBox.localToGlobal(Offset.zero); //组件坐标
var underOffset = renderBox.localToGlobal(Offset(0.0, renderBox.size.height)); //组件下方坐标
var coordinate_x=offset.dx; //x坐标
var coordinate_y=offset.dy; //y坐标