获取Widget的尺寸和位置

  ⋅   :593  ⋅   :0  ⋅   Flutter

在实际开发的过程中,我们总是会有这样一种需求,获取Widget的尺寸和样式。

但是 Widget本身是没有 size 和 position。为了实现这一点,我们必须获得与Widget上下文相关联的RenderBox。

我们先创建一个demo,在Column中画3个不同颜色的面板,分别是红、紫、绿,再在底部写两个按钮分别是 Get Sizes, Get Position.

   _getSizes() {
   }

   _getPositions(){
   }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      ),
      body: Column(
        children: [
          Flexible(
            flex: 2,
            child: Container(
              color: Colors.red,
            ),
          ),
          Flexible(
            flex: 1,
            child: Container(
              color: Colors.purple,
            ),
          ),
          Flexible(
            flex: 3,
            child: Container(
              color: Colors.green,
            ),
          ),
          Spacer(),
          Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                MaterialButton(
                  elevation: 5.0,
                  padding: EdgeInsets.all(15.0),
                  color: Colors.grey,
                  child: Text("Get Sizes"),
                  onPressed: _getSizes,
                ),
                MaterialButton(
                  elevation: 5.0,
                  color: Colors.grey,
                  padding: EdgeInsets.all(15.0),
                  child: Text("Get Positions"),
                  onPressed: _getPositions,
                )
              ],
            ),
          )
        ],
      ),
    );
  }

效果图:

现在的问题是:我如何得到每个面板的 size 和 position?

让我们先关注上面的红面板,当我们知道如何获取它的 size 和 position,那么对于其他面板也就迎刃而解了。

获取 Widget 的 Size

为了实现这个,我们需要让我们的Widget有一个Key,所以我们要创建一个GlobalKey并赋值给我们的Widget

//creating Key for red panel
GlobalKey _keyRed = GlobalKey();
...
//set key
    Flexible(
             flex: 2,
             child: Container(
               key: _keyRed,
               color: Colors.red,
             ),
     ),

一旦我们Widget 有了 Key,我们就能通过下面的方式根据Key去获取size。

_getSizes() {
    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
    final sizeRed = renderBoxRed.size;
    print("SIZE of Red: $sizeRed");
 }

如果我们点击 Get Sizes 按钮,在控制台将显示

flutter: SIZE of Red: Size(375.0, 152.9)

现在我们知道 红色面板的宽高分别是 375.0 152.9

很简单对吧,让我们继续获取Widget所处的位置信息

获取Widget的位置

与之前的方式一样,我们的Widget必须有一个Key值,我们更新一下获取Widget位置的方法,来获取Widget 相对于定义位置左上角的位置(在这个例子中,我们使用 0.0来表示当前屏幕的左上角)

_getPositions() {
    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
    final positionRed = renderBoxRed.localToGlobal(Offset.zero);
    print("POSITION of Red: $positionRed ");
  }

如果点击 Get Positions 按钮,将在控制台打印出:

flutter: POSITION of Red: Offset(0.0, 76.0)

这说明我们的Widget 在X轴上是0.0 在Y轴上是76.0(在屏幕的左上角)
为什么是76.0?那是因为在这个例子中上面有个高度为76.0的AppBar,哇~ 到这里,我们已经知道如何去获取Widget的 size 和 position
But~ 如果我想在开始的时候就得到 size 和 position,而不是通过按钮的的点击获取,该如何?

那么试试在构造函数中调用我们的方法

_MainSizeAndPositionState(){
     _getSizes();
     _getPositions();
   }

运行一下demo,会出现错误信息

flutter: The following NoSuchMethodError was thrown building Builder:
flutter: The method 'findRenderObject' was called on null.
flutter: Receiver: null
flutter: Tried calling: findRenderObject()

那么我们试试从InitState中调用会怎么样

@override
  void initState() {
    _getSizes();
    _getPositions();
    super.initState();
  }

运行一下demo,与刚才有点不一样,但还是报错

flutter: Another exception was thrown: NoSuchMethodError: The method 'findRenderObject' was called on null.

那我们要在开始的时候获取大小和位置该如何去做呢?

上面报错的原因是因为我们的state还没有得到相应的context。

因此我们必须等待Widget完成渲染后,再执行。但是该怎么做?

下面有个简单的实现方式:

@override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
    super.initState();
  }
 _afterLayout(_) {
    _getSizes();
    _getPositions();
  }

这样就可以确保布局渲染完成后去调用你的方法
再运行一次demo,将会得到:

flutter: SIZE of Red: Size(375.0, 152.9)
flutter: POSITION of Red: Offset(0.0, 76.0)

 

标签:flutter

如需评论,请填写表单。
换一个

记住我的信息