在上一篇文章中,我们了解了如何获取元素大小的原理。那么如何在程序中直接获取本元素的大小和位置呢？

在android中，我们可以直接在元素渲染完成时获取元素大小，直接通过View.getWidth,View.getHeight方法，ios也类似，可以在渲染完成的时候获取到大小。

那么在flutter中，我们获取大小也必须在元素渲染完成的时候才行，而有些应用场景要求在第一时间获取到这个元素的大小。那么怎么在第一时间判断元素渲染完成呢？flutter中的WidgetsBuiding这个类就可以用来判断:

WidgetsBinding.instance.addPostFrameCallback

官方注释

Schedule a callback for the end of this frame.
This callback is run during a frame, just after the persistent frame callbacks (which is when the main rendering pipeline has been flushed).
Post-frame callbacks cannot be unregistered. They are called exactly once.

这个方法在一帧的最后调用，并且只调用一次。

使用这个方法就可以在判断渲染完成，并获取到元素的大小。

 @override
  void didChangeDependencies() {
    WidgetsBinding.instance.addPostFrameCallback(_onAfterRendering);
    super.didChangeDependencies();
  }

  @override
  void didUpdateWidget(T oldWidget) {
    WidgetsBinding.instance.addPostFrameCallback(_onAfterRendering);
    super.didUpdateWidget(oldWidget);
  }


  void _onAfterRendering(Duration timeStamp){
      //这里编写获取元素大小和位置的方法
  }

为什么在这两个方法增加事件绑定，可以参考这里，这里不再累述。

获取元素大小:

RenderObject renderObject = context.findRenderObject();
Size size = renderObject.paintBounds.size;

获取元素位置:

 Vector3 vector3 = renderObject.getTransformTo(null)?.getTranslation();
//位置(vector3.x,vector3.y)

封装方便可用的库

上面的代码如果在每一个需要获取元素大小的应用场景都重复编写，是没有任何意义的，所以我们封装了一个库：

https://github.com/best-flutter/binding_helper

使用方法：

1、增加依赖

binding_helper:

2、使用GetRectMinxin获取元素大小

class MyState extends State<MyWidget> width GetRectMinxin<MyWidget>{

    // Rect 为元素大小和位置
    @override
    void onGetRect(Rect rect) {
       
    }

}

3、使用RectProvider

 new RectProvider(child: myWidget,onGetRect: (Rect rect){
           //rect为元素大小和位置
          _rect = rect;

},)

效果:

QQ20180830-183432-HD.gif

交流qq群: 854192563