布局约束:抛开多屏的概念,不说的话,其实,一个应用至少要占满整个屏幕。
总结:
子集设置的宽高都必须满足 父级规定的宽高,如果子集宽高 无法满足父级宽高,就会被父级自动纠正
void main() => runApp(Container(color: Colors.yellow,)); // 这就是Flutter根布局的约束
例子:
--runApp 根布局
----Container。---- width:1,height :1 ---容器1
----Center---容器2
-------Container--width:60,height :60 --容器3
------Rongqi ---一个大小1000的图标 --容器4
flutter,向下约束,向上传递尺寸。
根布局----依照操作系统,必须占满整个屏幕【占满当前屏幕】
容器1: 容器1宽高设置了1.但宽高依旧按照父集的占满屏幕高度。
容器2:相当于满足根布局要求的占满宽高,然后居中自己的子集---》这个时候就可以用子集 的宽高了
容器3:宽高使用60了。
容器4:容器4要1000的大小,但是宽高用的是父集的60.就是容器3的宽高。
使用LayoutBuilder 来检查约束关系;
下面代码的输出I/flutter ( 7003): 约束的真实值 BoxConstraints(w=400.0, h=400.0)
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title:const Text("请回答计算结果..."),
),
body:Center(
child: Container(
width: 400,
height: 400,
color: Colors.orange,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
print("约束的真实值 ${constraints}");
return const FlutterLogo(size: 600,);
},
// child: const FlutterLogo(size: 600,)),
),
))
);
}