Size constraints limit the type of container to container size, provided Flutter plurality of such containers, such as ConstrainedBox, SizedBox, UnconstrainedBox, AspectRatioetc. This section describes some common.
ConstrainedBoxUsed to add additional constraints to subcomponents. For example, if you want the minimum height of the subcomponent to be 80 pixels, you can use const BoxConstraints(minHeight: 80.0)the constraint as the subcomponent.
Let's define one first redBox, it is a box with a red background color, without specifying its width and height:
Widget redBox=DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
);
We implement a red container with a minimum height of 50 and a width as large as possible.
ConstrainedBox(
constraints: BoxConstraints(
minWidth: double.infinity, //宽度尽可能大
minHeight: 50.0 //最小高度为50像素
),
child: Container(
height: 5.0,
child: redBox
),
)
The running effect is shown in Figure 5-2:
As you can see, although we set the height of the Container to 5 pixels, it ended up being 50 pixels. This is where the minimum height limit of the ConstrainedBox comes into effect. If the height of the Container is set to 80 pixels, the final height of the red area will also be 80 pixels, because in this example, the ConstrainedBox only limits the minimum height, not the maximum height.
BoxConstraints is used to set constraints, and its definition is as follows:
const BoxConstraints({
this.minWidth = 0.0, //最小宽度
this.maxWidth = double.infinity, //最大宽度
this.minHeight = 0.0, //最小高度
this.maxHeight = double.infinity //最大高度
})
BoxConstraints also defines some convenient constructors to quickly generate BoxConstraints with specific restriction rules. For example BoxConstraints.tight(Size size), it can generate constraints of a given size; it const BoxConstraints.expand()can generate a BoxConstraints as large as possible to fill another container. In addition, there are some other convenient functions, readers can check the API documentation .
SizedBoxUsed to specify a fixed width and height for child elements, such as:
SizedBox(
width: 80.0,
height: 80.0,
child: redBox
)
The running effect is shown in Figure 5-3:
In fact, it SizedBoxis just ConstrainedBoxa customization. The above code is equivalent to:
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 80.0,height: 80.0),
child: redBox,
)
And is BoxConstraints.tightFor(width: 80.0,height: 80.0)equivalent to:
BoxConstraints(minHeight: 80.0,maxHeight: 80.0,minWidth: 80.0,maxWidth: 80.0)
And in fact, ConstrainedBoxand SizedBoxare through RenderConstrainedBoxto rendering, we can see ConstrainedBoxand SizedBoxthe createRenderObject()methods return is a RenderConstrainedBoxtarget:
@override
RenderConstrainedBox createRenderObject(BuildContext context) {
return new RenderConstrainedBox(
additionalConstraints: ...,
);
}
If a component has multiple parent ConstrainedBoxrestrictions, which one will take effect? Let's look at an example:
ConstrainedBox(
constraints: BoxConstraints(minWidth: 60.0, minHeight: 60.0), //父
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),//子
child: redBox,
)
)
We have two fathers and sons above ConstrainedBox, and their restriction conditions are different. The effect after running is shown in Figure 5-4:
The final display is wide 90, high 60, that is a child ConstrainedBox's minWidthentry into force, which minHeightis the parent ConstrainedBoxto take effect. Based on this example alone, we still can’t sum up any rules. Let’s change the parent-child restrictions in the previous example:
ConstrainedBox(
constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: 60.0, minHeight: 60.0),
child: redBox,
)
)
The running effect is shown in Figure 5-5:
The final display is still 90, high 60, the same effect, but with different meaning, because the minWidthentry into force of the father ConstrainedBox, and minHeighta child ConstrainedBoxto take effect.
Through the above example, we find that when there are multiple restrictions, for the minWidthsum minHeight, the corresponding value of the parent and child is the larger. In fact, the only way to ensure that the parent restriction does not conflict with the child restriction.
Questions: For
maxWidthandmaxHeightmultiple restriction strategy is what it?
UnconstrainedBoxDoes not impose any restrictions on the sub-components, it allows its sub-components to be drawn according to their own size. Under normal circumstances, we will rarely use this component directly, but it may be helpful to "remove" multiple restrictions. Let's look at the following code:
ConstrainedBox(
constraints: BoxConstraints(minWidth: 60.0, minHeight: 100.0), //父
child: UnconstrainedBox( //“去除”父级限制
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),//子
child: redBox,
),
)
)
In the above code, if there is no intermediate UnconstrainedBox, then according to the multiple restriction rules described above, a 90×100 red box will eventually be displayed. But because the limit of UnconstrainedBoxthe parent ConstrainedBoxis "removed" , it will eventually be ConstrainedBoxdrawn according to the limit of the child redBox, that is, 90×20:
However, readers please note that UnconstrainedBoxthe "removal" of the parent component restriction is not a true removal: although the size of the red area in the above example is 90×20, there is still 80 empty space above it. That is to say, the parent limit minHeight(100.0) is still in effect, but it does not affect redBoxthe size of the final child element , but still occupies the corresponding space. It can be considered that the parent at this time ConstrainedBoxacts on the child UnconstrainedBox, and is redBoxonly ConstrainedBoxrestricted by the child. , Readers must pay attention to this point.
So is there any way to completely remove ConstrainedBoxthe restriction of the parent ? the answer is negative! Therefore, the reader is reminded that when defining a common component, if you want to specify restrictions on the sub-components, you must pay attention, because once the restriction conditions are specified, it may be very difficult to customize the size of the sub-components. A component cannot completely remove its restrictions without changing the code of the parent component.
In actual development, when we find that we have used SizedBoxor ConstrainedBoxspecified the width and height of the child element, but there is still no effect, we can almost conclude that there are already restrictions on the parent element! For example, in the AppBarright menu of the (navigation bar) in the Material component library , we use to SizedBoxspecify the size of the loading button. The code is as follows:
AppBar(
title: Text(title),
actions: <Widget>[
SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 3,
valueColor: AlwaysStoppedAnimation(Colors.white70),
),
)
],
)
After the above code runs, the effect is shown in Figure 5-7:
We will find that the size of the loading button on the right has not changed! This is precisely because AppBarthe actionsbutton restrictions have been specified in , so if we want to customize the size of the loading button, we must UnconstrainedBox"remove" the restriction of the parent element. The code is as follows:
AppBar(
title: Text(title),
actions: <Widget>[
UnconstrainedBox(
child: SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 3,
valueColor: AlwaysStoppedAnimation(Colors.white70),
),
),
)
],
)
The effect after running is shown in Figure 5-8:
It works!
In addition to the commonly used size-restricted containers described above, there are some other size-restricted containers. For example AspectRatio, it can specify the aspect ratio of the child component, LimitedBoxspecify the maximum width and height, and FractionallySizedBoxcan be based on the percentage of the parent container's width and height. To set the width and height of the sub-components, since these containers are relatively simple to use, we will not repeat them, and readers can understand by themselves.