Flutter之Widget大小与位置

在某些需求下,我们需要获取Widget的大小或位置信息。但Widget对象本身没有大小及位置数据,那么想要拿到Widget的大小及位置信息,就需要通过与Widget对象相关联的RenderBox对象来获取。

下面就开始来获取Widget的大小与位置。

1、获取RenderBox对象

要想获取RenderBox对象,其实很简单。只需要调用BuildContextfindRenderObject方法即可。代码如下。

//context是一个BuildContext对象
RenderBox renderBox = context.findRenderObject();

但有时候,并不能顺利的拿到BuildContext对象,那该怎么办尼?这时候就需要给Widget对象设置一个Key,然后根据这个Key来拿到BuildContext对象,从而获取RenderBox对象,代码如下。

class MyHomePageState extends State<MyHomePage> {
  //定义一个key
  GlobalKey _key = GlobalKey();
  _getRenderBox() {
    //获取`RenderBox`对象
    RenderBox renderBox = _key.currentContext.findRenderObject();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          Flexible(
            flex: 2,
            child: Container(
              //设置key
              key: _key,
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }
}

但在使用的时候,我们会发现如果在initState方法通过上面的代码来获取RenderBox对象是不会成功且报错的。这是为什么尼?其实在调用initState方法时,Widget还未完成渲染,也就不能获取RenderBox对象。这时候只需要等待Widget渲染完毕即可。代码如下。

class MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    //监听Widget是否绘制完毕
    WidgetsBinding.instance.addPostFrameCallback(_getRenderBox);
    super.initState();
  }
  //定义一个key
  GlobalKey _key = GlobalKey();
  _getRenderBox(_) {
    //获取`RenderBox`对象
    RenderBox renderBox = _key.currentContext.findRenderObject();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          Flexible(
            flex: 2,
            child: Container(
              //设置key
              key: _key,
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }
}

2、获取Widget的大小

拿到与Widget对象相关联的RenderBox对象来后,就可以很方便的获取Widget的大小。代码如下。

Size size = renderBox.size;

下面来看一个示例。

class HomeState extends State<HomeWidget> {
  @override
  void initState() {
    //监听Widget是否绘制完毕
    WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
    super.initState();
  }

  void _afterLayout(_) {
    _getSizes();
  }

  _getSizes() {
    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
    final sizeRed = renderBoxRed.size;
    //输出背景为红色的widget的宽高
    print("size of red:$sizeRed");
    final RenderBox renderBoxBlue = _keyBlue.currentContext.findRenderObject();
    final sizeBlue = renderBoxBlue.size;
    //输出背景为蓝色的widget的宽高
    print("size of Blue:$sizeBlue");
    final RenderBox renderBoxAmber =_keyAmber.currentContext.findRenderObject();
    final sizeAmber = renderBoxAmber.size;
    //输出背景为的widget的宽高
    print("size of Amber:$sizeAmber");
  }

  GlobalKey _keyRed = GlobalKey();
  GlobalKey _keyBlue = GlobalKey();
  GlobalKey _keyAmber = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Flexible(
          key: _keyRed,
          flex: 1,
          child: Container(
            color: Colors.red,
          ),
        ),
        Flexible(
          key: _keyBlue,
          child: Container(
            color: Colors.blue,
          ),
          flex: 2,
        ),
        Container(
          key: _keyAmber,
          width: 300,
          height: 200,
          color: Colors.amber,
        ),
      ],
    );
  }
}

运行上面代码就可以把Widget的宽高获取到,输出信息如下。

size of red:Size(411.4, 134.5)
size of Blue:Size(411.4, 269.0)
size of Amber:Size(300.0, 200.0)

可以发现,获取的宽高都具有设备无关性。

3、获取Widget的位置

获取Widget的位置跟获取其宽高一样简单,只需要调用不同API即可。如下。

Offset offset = renderBox.localToGlobal(Offset.zero);

下面来看一个示例。

class HomeState extends State<HomeWidget> {
  @override
  void initState() {
    //监听Widget是否绘制完毕
    WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
    super.initState();
  }

  void _afterLayout(_) {
    _getPositions();
  }

  _getPositions() {
    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
    final positionsRed = renderBoxRed.localToGlobal(Offset(0, 0));
    print("positions of red:$positionsRed");
    final RenderBox renderBoxBlue = _keyBlue.currentContext.findRenderObject();
    final positionsBlue = renderBoxBlue.localToGlobal(Offset(0, 0));
    print("positions of Blue:$positionsBlue");
    final RenderBox renderBoxAmber =
    _keyAmber.currentContext.findRenderObject();
    final positionsAmber = renderBoxAmber.localToGlobal(Offset(0, 0));
    print("positions of Amber:$positionsAmber");
  }

  GlobalKey _keyRed = GlobalKey();
  GlobalKey _keyBlue = GlobalKey();
  GlobalKey _keyAmber = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Flexible(
          key: _keyRed,
          flex: 1,
          child: Container(
            color: Colors.red,
          ),
        ),
        Flexible(
          key: _keyBlue,
          child: Container(
            color: Colors.blue,
          ),
          flex: 2,
        ),
        //该Widget是居中显示的
        Container(
          key: _keyAmber,
          width: 300,
          height: 200,
          color: Colors.amber,
        ),
      ],
    );
  }
}

运行上面代码就可以把Widget的位置获取到,输出信息如下。

positions of red:Offset(0.0, 80.0)
positions of Blue:Offset(0.0, 214.5)
positions of Amber:Offset(55.7, 483.4)

FlutterAndroid一样,都是以屏幕左上方为坐标系的开始位置。而上面的输出信息就是Widget到坐标系的开始位置的距离。如下图所示。

4、总结

通过上面的代码,就可以获取到Widget的大小及位置信息,这在很多时候都是非常有用的。特别是当我们来自己实现一个自定义Widget的点击、手势等事件时,就需要跟位置信息来获取事件在Widget中的位置。

【参考资料】

Flutter : Widget Size and Position

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter中获取Widget位置可以使用`GlobalKey`和`BuildContext`。 1. 使用`GlobalKey` 使用`GlobalKey`可以获取到一个Widget屏幕上的位置。首先需要在需要获取位置Widget上定义一个`GlobalKey`,然后通过`GlobalKey`获取到该Widget位置信息。 ```dart class MyWidget extends StatelessWidget { final GlobalKey _globalKey = GlobalKey(); @override Widget build(BuildContext context) { return Container( key: _globalKey, child: Text('Hello, World!'), ); } void getPosition() { RenderBox box = _globalKey.currentContext.findRenderObject() as RenderBox; Offset position = box.localToGlobal(Offset.zero); print('x: ${position.dx}, y: ${position.dy}'); } } ``` 在上面的代码中,我们首先定义了一个`GlobalKey`,然后将其赋值给一个`Container`的`key`属性。在`getPosition`方法中,我们通过`_globalKey.currentContext.findRenderObject()`获取到该Widget的渲染对象,然后使用`localToGlobal`方法将该对象的位置转换为全局位置。 2. 使用`BuildContext` 如果您只需要获取Widget屏幕上的位置,而不是具体的坐标位置,您可以使用`BuildContext`。您可以使用`MediaQuery`获取到屏幕大小,然后使用`BuildContext`获取到Widget位置信息。 ```dart class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Builder( builder: (context) { Size screenSize = MediaQuery.of(context).size; final RenderBox renderBox = context.findRenderObject() as RenderBox; final size = renderBox.size; final topLeftPosition = renderBox.localToGlobal(Offset.zero); final bottomRightPosition = renderBox.localToGlobal(Offset(size.width, size.height)); return Container( color: Colors.blue, ); }, ); } } ``` 在上面的代码中,我们在`Builder`中使用`BuildContext`获取到Widget的渲染对象,并使用`localToGlobal`方法获取到该对象的位置信息。最后,我们使用`MediaQuery`获取到屏幕大小信息,并使用该信息计算出Widget的左上角和右下角的位置信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值