Flutter教学目录持续更新中

Github源代码持续更新中

1.CustomSingleChildLayout介绍

一个自定义的拥有单个子widget的布局widget

2.CustomSingleChildLayout属性

• delegate：SingleChildLayoutDelegate
• child：

继承SingleChildLayoutDelegate实现自定义布局以及约束控制，这里有四个重写方法：

• Size getSize(BoxConstraints constraints)：获取父容器约束条件，来确定layout的大小
• bool shouldRelayout(covariant SingleChildLayoutDelegate oldDelegate)：是否需要relayout
• BoxConstraints getConstraintsForChild(BoxConstraints constraints)：确定child的约束
• Offset getPositionForChild(Size size, Size childSize)：确定child的位置，返回一个相对于parent的偏移值；size是layout的大小，由getSize确定；childSize由getConstraintsForChild得出的Constraints对child进行约束，得到child自身的size

3.使用

那CustomSingleChildLayout有什么作用的，它的作用就是可以让你去灵活实现自己想要的布局以及约束情况，例如你可以用它来自定义自己的加载图，占位图，可以放在不同尺寸的自定义组件中，下面我们就来弄个简单的栗子：

首先我们先来做一个loading的占位跟失败的占位：

class _LoadingLayout extends CustomSingleChildLayout {
  _LoadingLayout({Key key, bool isLoading})
      : super(
          key: key,
          delegate: _LoadingLayoutDelegate(),
          child: isLoading
              ? CircularProgressIndicator(value: null)
              : Image.asset(AssetPathConstant.imageScan),
        );
}

class _LoadingLayoutDelegate extends SingleChildLayoutDelegate {
  @override
  Size getSize(BoxConstraints constraints) {
    //获取父容器约束条件确定CustomSingleChildLayout大小
    print('getSize constraints = $constraints');
    return super.getSize(constraints);
  }

  @override
  bool shouldRelayout(covariant SingleChildLayoutDelegate oldDelegate) {
    //是否需要relayout
    return false;
  }

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    //确定child的约束，用于确定child的大小
    print('getConstraintsForChild constraints = $constraints ');
    var childWidth = min(constraints.maxWidth, constraints.maxHeight);
    var childBoxConstraints = BoxConstraints.tight(
      Size(childWidth / 2, childWidth / 2),
    );
    print('getConstraintsForChild childBoxConstraints = $childBoxConstraints ');
    return childBoxConstraints;
  }

  @override
  Offset getPositionForChild(Size size, Size childSize) {
    // 确定child的位置，返回一个相对于parent的偏移值
    // size是layout的大小，由getSize确定
    // childSize由getConstraintsForChild得出的Constraints对child进行约束，得到child自身的size
    print('size = $size childSize = $childSize');
    var dx = (size.width - childSize.width) / 2;
    var dy = (size.height - childSize.height) / 2;
    print('dx = $dx dy = $dy');
    return Offset(dx, dy);
  }
}

这个占位就放在父控件的中央就行，可以根据父控件的尺寸呢去适应改变自己的尺寸。

class CustomSingleChildLayoutPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _CustomSingleChildLayoutPageState();
}

class _CustomSingleChildLayoutPageState
    extends State<CustomSingleChildLayoutPage> {

  int _loadType = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CustomSingleChildLayout'),
      ),
      body: Container(
        child: Column(
          children: [
            _myChild(Colors.amber, double.infinity, 50),
            _myChild(Colors.red, double.infinity, 100),
            _myChild(Colors.green, 200, 50),
            _myChild(Colors.grey, 20, 100),
            RaisedButton(
              onPressed: () {
                setState(() {
                  _loadType = 0;
                });
              },
              child: Text('加载中'),
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  _loadType = 1;
                });
              },
              child: Text('加载成功'),
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  _loadType = 2;
                });
              },
              child: Text('加载失败'),
            ),
          ],
        ),
      ),
    );
  }

  _myChild(Color color, double width, double height) {
    return Container(
      color: color,
      width: width,
      height: height,
      child: _getContent(),
    );
  }

  _getContent() {
    switch (_loadType) {
      case 1:
        return Text('我是加载完成后的内容');
      case 2:
        return _LoadingLayout(isLoading: false);
      default:
        return _LoadingLayout(isLoading: true);
    }
  }
}

加载中.png

加载成功.png

加载失败.png

当然CustomSingleChildLayout也可以让你去自定义一个自己想要的布局组件等等的使用方式。

下一节：Layout组件之Stack、Positioned

Flutter（62）：Layout组件之Stack、Positioned

Flutter教学目录持续更新中

Github源代码持续更新中