Flutter获取Widget的大小位置信息以及实现自定义布局

12.jpg

我们可以利用Stack或者CustomMultiChildLayout做，为了让大家更容易理解我这里就用Stack实现。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class BevelAbgle extends StatefulWidget {
  final List<Widget> myChildren;
  BevelAbgle(this.myChildren);
  @override
  _BevelAbgleState createState() => _BevelAbgleState();
}

class _BevelAbgleState extends State<BevelAbgle> {
  final List<GlobalKey> globalKeys = [];
  final List<Widget> showChildren = [];
  bool show = false;
  List<Widget> getCustomChildren() {
    List<Widget> myChildren = [];
    for (var j = 0; j < widget.myChildren.length; j++) {
      var globalKey = GlobalKey();
      globalKeys.add(globalKey);
      myChildren.add(
        Row(
          key: globalKey,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[widget.myChildren[j]],
        ),
      );
    }

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      updateWeight();
      setState(() {
        show = true;
      });
    });
    return myChildren;
  }

  void updateWeight() {
    var widgetW = 0.0;
    var widgetH = 0.0;
    for (var i = 0; i < widget.myChildren.length; i++) {
      if (i > 0) {
        widgetW = widgetW + globalKeys[i - 1].currentContext.size.width;
        widgetH = widgetH + globalKeys[i - 1].currentContext.size.height;
      }
      showChildren.add(Positioned(
        left: widgetW,
        top: widgetH,
        child: widget.myChildren[i],
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.green,
        child: Stack(
          children: !show ? getCustomChildren() : showChildren,
        ),
      ),
    );
  }
}

这段代码的思路为：
1.建立一个GlobalKey数组对传递进来的Widget数组提前进行渲染知道并且都赋予GlobalKey保存到数组里。
2.对GlobalKey数组进行循环遍历然后拿到Width和Height进行重新排列绘制。

接下来我们来测试

import 'package:flutter/cupertino.dart';
import 'package:flutter_animation/component/BevelAngle.dart';

class BelevelAnglePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: BevelAbgle([
        Text('牛'),
        Image.network(
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gb324.com%2Fd%2Ffile%2Ftitlepic%2F2021-02-17%2F12%2F12044314839.png&refer=http%3A%2F%2Fwww.gb324.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616221584&t=6b8f7f1c007d07bf98c03cfc3b6e0523',
          width: 150,
          height: 150,
        ),
        Text('气'),
        Image.network(
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gb324.com%2Fd%2Ffile%2Ftitlepic%2F2021-02-17%2F12%2F12044314839.png&refer=http%3A%2F%2Fwww.gb324.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616221584&t=6b8f7f1c007d07bf98c03cfc3b6e0523',
          width: 50,
          height: 50,
        ),
        Text('冲13333444423211'),
        Text('冲13333444423211'),
        Image.network(
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gb324.com%2Fd%2Ffile%2Ftitlepic%2F2021-02-17%2F12%2F12044314839.png&refer=http%3A%2F%2Fwww.gb324.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616221584&t=6b8f7f1c007d07bf98c03cfc3b6e0523',
          width: 50,
          height: 50,
        ),
        Text('天'),
      ]),
    );
  }
}

现在相信你对自定义布局有所了解了。