Flutter的布局约束 BoxConstraints
布局约束，布局约束
说白了，就是这个约束指定了Widget的做大和最小尺寸。
一句话说完
一句话说完
一句话说完
一句话：BoxConstraints 是每个widget都有的，用于限制最大和最小，但是，很多容器组件自身就封装好了width和height，所以直接使用BoxConstraints的频次也比较少
基础理解：Flutter布局的核心原则
在讨论布局约束之前，首先需要理解Flutter的两个核心原则：
-
- Widget是不可变的。 这意味着一旦你创建了一个Widget，你就不能更改它。相反，如果你想更改你的UI，你必须构建一个新的Widget树。
-
- Widgets是由其父Widget控制的。 这意味着父Widget可以决定其子Widget的大小、位置等。
这些原则适用于Flutter的所有布局，并形成了Flutter布局系统的基础。
布局约束 BoxConstraints
(constraint 本身就是约束的意思)
每个Flutter的Widget都有一个叫做BoxConstraints的约束对象，这个对象描述了Widget可能的最大和最小尺寸。
这些约束由父Widget给出，并且受到父Widget的尺寸和位置的影响。这意味着子Widget的大小和位置是由其父Widget决定的。子Widget可以在这些约束范围内选择其自身的大小，但必须遵守其父Widget给出的约束。
BoxConstraints有两对特别的属性：
minWidth/maxWidthminHeight/maxHeight。
这两对属性定义了Widget的尺寸范围，让开发者能够清晰地了解到Widget可能的最大最小宽度和高度。
让我们在我们的应用中使用BoxConstraints：
来个demo
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter布局示例'),
),
body: Center(
child: Container(
// 添加约束
constraints: BoxConstraints(
minWidth: 70,
minHeight: 70,
maxWidth: 150,
maxHeight: 150,
),
color: Colors.blue,
child: Text('Flutter'),
),
),
),
);
}
}
在上述代码中，我们为Container的constraints属性添加了BoxConstraints。宽度的最小值为70，最大值为150；高度的最小值为70，最大值为150。因此，Container的尺寸会在这个范围内变化，取决于它的子Widget。
BoxConstraints通常不需要显示地使用
对于Container、Row和Column以及Expanded这些常用的布局Widget，在进行约束布局时通常不需要显式使用BoxConstraints。这些Widget已经内部实现了默认的约束机制，可以根据它们的父级和子级Widget进行自动调整和适配。
Container：可以通过设置width、height属性来指定宽度和高度，也可以通过设置constraints属性来设置最小和最大尺寸的约束。
Row和Column：这些Widget根据子Widget的尺寸自动调整自身的尺寸和布局方式。可以通过mainAxisAlignment和crossAxisAlignment属性来控制子Widget在主轴和交叉轴上的对齐方式。
Expanded：Expanded可以让子Widget填充剩余可用空间，它会自动占据可用空间，并根据子Widget的比例进行分配。可以通过flex属性来设置子Widget的占比。
这些Widget都是根据其自身的特性和约束条件来进行布局的，通常不需要手动使用BoxConstraints来约束它们的尺寸。BoxConstraints主要在需要自定义布局策略或实现复杂的布局时使用。
Flutter中常见的布局Widget
以下是一些Flutter中常用的布局Widget，以及它们如何应用布局约束：
1. Container
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter布局示例'),
),
body: Center(
child: Container(
height: 100,
width: 100,
color: Colors.red,
child: Text('Flutter'),
),
),
),
);
}
}
上述代码创建了一个高度和宽度都是100的Container，背景色为红色，内部包含一个文本Widget。
不需要直接实现，ConstrainedBox
2. Row和Column
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter布局示例'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 沿主轴平均分配空间
children: <Widget>[
Text('Hello'),
Text('Flutter'),
Text('!'),
],
),
),
),
);
}
}
在上述代码中，Row包含三个文本Widget，他们在行上平均分布。
Row和Column 不需要直接实现，ConstrainedBox
3. Expanded
dartCopy code
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter布局示例'),
),
body: Center(
child: Row(
children: <Widget>[
Expanded(
flex: 2, // 占据2份空间
child: Container(
color: Colors.red,
),
),
Expanded(
flex: 1, // 占据1份空间
child: Container(
color: Colors.green,
),
),
],
),
),
),
);
}
}
在上述代码中，我们创建了一个Row，其中包含两个Expanded。第一个Expanded有一个红色的Container，它占据了2份空间。第二个Expanded有一个绿色的Container，占据了1份空间。所以，红色Container的宽度是绿色Container的两倍。
4. ConstrainedBox
dartCopy code
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter布局示例'),
),
body: Center(
// 使用ConstrainedBox设置约束
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: 100,
minWidth: 100,
maxHeight: 200,
maxWidth: 200,
),
child: Container(
color: Colors.blue,
child: Text('Flutter'),
),
),
),
),
);
}
}
在这个例子中，我们使用了ConstrainedBox来对一个Container设置约束。这个Container的最小宽度和高度被设置为100，最大宽度和高度被设置为200。这就意味着，这个Container的尺寸会在这个范围内变化，取决于它的子Widget以及父Widget的尺寸和位置。
对于ConstrainedBox，它是一个专门用于约束布局的Widget，它提供了一种显式的方式来指定子Widget的尺寸约束。
ConstrainedBox通过constraints属性接收一个BoxConstraints对象来设置子Widget的尺寸约束。
BoxConstraint和ConstrainedBox分不清？
BoxConstraint 是每个widget都有的，至于 ConstrainedBox，只是一个widget。一般情况下，可以说是用不上的
什么时候用呢？？
- 需要限制子Widget的最小或最大尺寸：如果你希望确保子Widget不会小于或大于一定的尺寸范围，可以使用ConstrainedBox来设置最小和最大尺寸的约束。这对于确保UI元素的可视性和一致性非常有用。
- 需要限制子Widget的宽高比例：使用ConstrainedBox可以设置子Widget的宽高比例，以保持特定的宽高比。这在需要固定宽高比的布局场景中非常有用，例如图片的宽高比例保持、视频播放器的宽高比例保持等。
- 需要在特定范围内调整子Widget的尺寸：如果你希望子Widget的尺寸在一定范围内自动调整以适应不同的布局条件，可以使用ConstrainedBox来指定最小和最大尺寸的约束。这样可以实现根据可用空间自动调整子Widget大小的响应式布局。
- 需要自定义布局策略：ConstrainedBox可以与其他布局Widget一起使用，用于实现自定义的布局策略。通过设置不同的约束条件，可以在一定程度上控制子Widget的布局行为，从而满足特定的布局需求。
需要注意的是，ConstrainedBox并不是在所有布局场景下都必须使用的，它通常用于一些需要更精确控制子Widget尺寸的特定情况。在一般的布局中，Flutter提供的其他布局Widget如Container、Row、Column、Expanded等已经具备了默认的约束布局机制，可以满足大多数常见的布局需求。
