Flutter 约束布局

配置插件依赖

设置组件大小 

通过属性 childConstraints 实现

分别设置 约束布局一 和 约束布局二 大大小为：160 和 200

点击查看代码文件

class SummaryPageState extends State<SummaryPage1> {
  ConstraintId constraintId_1 = ConstraintId('ConstraintId_1');
  ConstraintId constraintId_2 = ConstraintId('ConstraintId_2');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Summary'),
      ),
      body: ConstraintLayout(
        childConstraints: [
          // todo 约束布局一
          Constraint(
            id: constraintId_1,
            size: 160,
            bottomLeftTo: parent,
            zIndex: 20,
          ),
          // todo 约束布局二
          Constraint(
            id: constraintId_2,
            size: 200,
            topRightTo: parent,
            zIndex: 20,
          ),
        ],
        children: [
          // todo 约束布局一
          Container(
            color: Colors.redAccent,
            alignment: Alignment.center,
            child: const Text('约束布局ID：ConstraintId_1'),
          ).applyConstraintId(id: constraintId_1),
          // todo 约束布局二
          Container(
            color: Colors.blueAccent,
            alignment: Alignment.center,
            child: const Text('约束布局ID：ConstraintId_2'),
          ).applyConstraintId(id: constraintId_2),
        ],
      ),
    );
  }
}

位于某个视图底部

约束布局ID：ConstraintId_4 位于 ConstraintId_3 下面

点击查看代码文件

class SummaryPageState extends State<SummaryPage2> {
  ConstraintId constraintId_3 = ConstraintId('ConstraintId_3');
  ConstraintId constraintId_4 = ConstraintId('ConstraintId_4');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Summary'),
      ),
      body: ConstraintLayout(
        children: [
          // todo 约束布局三
          Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('约束布局ID：ConstraintId_3'),
          ).applyConstraint(
              id: constraintId_3,
              width: 200,
              height: 150,
              top: parent.top,
              left: parent.left,
              right: parent.right),

          // todo 约束布局四
          Container(
            color: Colors.orange,
            width: 200,
            height: 150,
            alignment: Alignment.center,
            child: const Text('约束布局ID：ConstraintId_4\n位于 ConstraintId_3 下面'),
          ).applyConstraint(
            id: constraintId_4,
            left: parent.left,
            top: constraintId_3.bottom,
          ),
        ],
      ),
    );
  }
}

位于某个视图底部中间

约束布局ID：ConstraintId_6 位于 ConstraintId_5 底部 中间 位置

点击查看代码文件

class SummaryPageState extends State<SummaryPage3> {
  ConstraintId constraintId_5 = ConstraintId('ConstraintId_5');
  ConstraintId constraintId_6 = ConstraintId('ConstraintId_6');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Summary'),
      ),
      body: ConstraintLayout(
        children: [
          // todo 约束布局三
          Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('约束布局ID：ConstraintId_5'),
          ).applyConstraint(
              id: constraintId_5,
              width: 200,
              height: 150,
              top: parent.top,
              left: parent.left,
              right: parent.right),

          // todo 约束布局四
          Container(
            color: Colors.orange,
            width: 200,
            height: 150,
            alignment: Alignment.center,
            child: const Text('约束布局ID：ConstraintId_6 \n 位于 ConstraintId_5 底部 中间 位置'),
          ).applyConstraint(
            id: constraintId_6,
            left: constraintId_5.left,
            top: constraintId_5.bottom,
            right: constraintId_5.right,
          ),
        ],
      ),
    );
  }
}

位于父视图中间

约束布局ID：ConstraintId_7 位于 父视图 中间 位置

点击查看代码文件

// todo © 国宝宝 2024年09月19日 周四 17:31
class SummaryPageState extends State<SummaryPage4> {
  ConstraintId constraintId_7 = ConstraintId('ConstraintId_7');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Summary'),
      ),
      body: ConstraintLayout(
        ch