flutter使用binding_helper获取元素大小、位置

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

在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-flutt...

使用方法：

一、增长依赖

binding_helper:

二、使用GetRectMinxin获取元素大小

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

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

}

三、使用RectProvider

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

},)

效果:

交流qq群: 854192563