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