布局

一、初识布局 1.1 约束（Terminology）的向下传递 ​ Flutter从一个runApp函数开始运行，例如： void main() { runApp(//1.向下Container传递紧约束：屏幕尺寸 Container(//2.向下Center传递约束，由于自身的w和h无效，因此原封不动地传递 width: 0.04,//1.来自App的约束使width失效，w=页面宽度 height: 0.08,//1.来自App的约束使height失效，h=页面高度 color: Colors.red[200], child: Center(//3.向下Container传递松约束，下限设为0 child: Container(//4.向下FlutterLogo传递紧约束：200<=h,w<=200 color: Colors.white, width: 200,//3.满足Center的约束，w=200 height: 200,//3.满足Center的约束，h=200 child: FlutterLogo( size: 10//不满足约束条件，失效，size=200 ), ), ) )); } 上面这段代码的运行结果如下图： ​ 通过读取LayoutBuilder的constrants参数，我们可以得到来自父组件的约束区间： LayoutBuilder(builder: (context, constrants) { print("constrants: $constrants"); return FlutterLogo(size: 10); }), ​ 我们可以通过Align系列控件来放松约束，例如使用Center。 1.2 SizedBox和FractionallySizedBox ​ 我们可以使用SizedBox和FractionallySizedBox来确定组件的大小，其中后者使用一个比例关系来约束。 ​ 但如果SizedBox本身受到一个紧约束，那么它也无法突破。 ​ 目前我们只能使用Align系列Widgets（比如Center）来将紧约束转换为松约束，例如将200<=h,w<=200转化为0<=h,w<=200。 Container( //向下SizedBox传递紧约束：200<=h,w<=200 width: 200, height: 200, child: SizedBox( //收到Container的紧约束 height: 100,//失效 width: 100,//失效 child: FlutterLogo(size: 10), //不满足约束条件，失效，size=200 ) 1....