当前位置：首页 > news >正文

Flutter 约束布局

news 来源：原创 2024/9/22 15:43:53

配置插件依赖

设置组件大小

通过属性 childConstraints 实现

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

点击查看代码文件

class SummaryPageState extends State<SummaryPage1> {ConstraintId constraintId_1 = ConstraintId('ConstraintId_1');ConstraintId constraintId_2 = ConstraintId('ConstraintId_2');@overrideWidget 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');@overrideWidget 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');@overrideWidget 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');@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Summary'),),body: ConstraintLayout(ch