# 无边界 unbounded
# UnconstrainedBox 不受约束
UnconstrainedBox
的子组件将不再受到约束
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 100,
minHeight: 100,
maxWidth: 300,
maxHeight: 300,
),
child: UnconstrainedBox(
child: Container(
width: 10,
height: 10,
color: Colors.blue,
),
),
),
),
debugShowCheckedModeBanner: false,
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
- 显示了一个
10*10
的正方形,没有收到ConstrainedBox
的影响
- 约束查看 Container 10*10, 父级约束 最小宽高 100
# unbounded 组件
unbounded
(无界)组件指的是那些在主轴方向上不限制子组件大小的布局组件。
常见的unbounded
组件以及它们的设置
Row
和Column
这些组件的大小由子元素的最大尺寸决定,在主轴方向上是unbounded
(无界)的,即它们不会限制子组件在主轴方向上的大小。ListView
ListView
也是一个unbounded
组件,因为它可以在滚动方向上无限扩展以容纳其子组件。UnconstrainedBox
UnconstrainedBox
允许其子组件在没有约束的情况下渲染,这意味着子组件可以自由地确定自己的尺寸。BoxConstraints
BoxConstraints.expand()
:对传递给它的宽度或高度设置Tight约束,并对未传递给构造函数的宽度或高度参数设置Unbounded
约束,即double.infinity
。......
# 溢出警告
在 debug 模式下,如果子组件溢出,控制台会打印警告,并且会在溢出区域显示黑黄相间的条纹