Flutter--RenderObject之获取widget定位

一、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坐标