PS: It’s easy to want to do something. It’s hard to actually do something.
Flutter is a cross-platform UI framework that allows you to quickly build high-quality applications on Android and IOS. Its main features include its ability to develop quickly, its expressive and flexible UI, and its native performance. This article introduces the Flex layout in Flutter as follows:
- Flex basis
- Flex Common Settings
- The Row and Column
- Expanded and Flexible
- Space
- conclusion
Flex basis
Flex layout is already widely used in the development of front-end applications and applets. If you have learned Flex layout before, the Flexible Box of Flutter is similar to that of Flutter.
For an introduction to this image, check out the previous post:
Wechat applets for Flex container details
If you know the main axis, you can directly use Row or Column. The Flex Widget cannot scroll. If scrolling is involved, you can try using ListView. A yellow and black warning stripe is displayed. Take the horizontal direction as an example, the error message is as follows:
I/flutter (14749) : ═ ═ ╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ I/flutter (14749): The following assertion was thrown during layout:
I/flutter (14749): A RenderFlex overflowed by 440 pixels on the right.
Copy the codeThe following error message is displayed:
Flex Common Settings
Common Flex properties are as follows:
- direction
- mainAxisAlignment
- mainAxisSize
- crossAxisAlignment
- verticalDirection
- textBaseline
1. direction
Set the Axis direction. The value can be Axis. Horizontal or Axis. Vertical.
2. MainAxisAlignment:
Set the alignment of the child widgets along the main axis. By default, mainaxisalignment.start, you can set the alignment as follows:
- Mainaxisalignment. start: left-aligned, default;
- MainAxisAlignment. End: right-aligned;
- MainAxisAlignment. Center: center alignment;
- MainAxisAlignment. SpaceBetween: full-justified;
- MainAxisAlignment. SpaceAround: each Widget on both sides of the equal interval, and the interval on the edge of the screen is half the interval between other widgets;
- MainAxisAlignment. SpaceEvently: the average distribution of each Widget, with intervals on the edge of the screen with equal intervals between other widgets.
The comparison effect is as follows:
3. mainAxisSize
Set the spindle size, default mainaxissize.max, can be set as follows:
- Mainaxissize. Max: The size of the main axis is the size of the parent container;
- MainAxisSize. Min: The size of the main axis is the sum of its widgets.
The comparison effect is as follows:
Set mainAxisAlignment to spaceBetween. If mainAxisSize is Max, spaceBetween aligns the entire Row width. If mainAxisSize is set to min, the total width of the three Containers is arranged in a spaceBetween manner.
4. crossAxisAlignment
Set the child widgets along the cross axis direction, the arrangement of the default CrossAxisAlignment. Center, can be set as follows:
- CrossAxisAlignment. Start: alignment with the starting position of the cross axis;
- CrossAxisAlignment. End: alignment with the end position of the cross axis;
- CrossAxisAlignment. Center: the center alignment;
- CrossAxisAlignment. Stretch: to fill the entire cross shaft;
- CrossAxisAlignment. Baseline: baseline according to the first line of text alignment.
The comparison effect is as follows:
5. verticalDirection
To set the order of the child widgets in the VerticalDirection, the default is verticaldirection.down as follows:
- Verticaldirection. down: start at the top, end at the bottom;
- VerticalDirection. Up: start at the bottom and end at the top.
The comparison effect is as follows:
Note the change in the vertical direction based on the CrossAxisAlignment. End of the cross axis setting.
6. textBaseline
Set the baseline type for text alignment. The values that can be set are as follows:
- TextBaseline. Alphabetic: Align with alphabetic baseline;
- TextBaseline. Ideographic: align with the ideographic character baseline;
When crossAxisAlignment is set to baseline, the textBaseline attribute must be set in the following ways:
// textBaseline
class FlexSamplePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flex Sample"),
centerTitle: true,
),
body: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Text("Bow",style: TextStyle(fontSize: 40,),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("The",style: TextStyle(fontSize: 16,),),
],
)),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Text("Bow",style: TextStyle(fontSize: 40,),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("The",style: TextStyle(fontSize: 16, ),),
],
)),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,
children: <Widget>[
Text("Bow",style: TextStyle(fontSize: 40, ),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("The",style: TextStyle(fontSize: 16() [() [() [() [() [() [() }}Copy the codeSet textBaseline. Alphabetic and textBaseline. Ideographic, respectively.
Although the two are different in the corresponding baseline meaning, but the test found no difference, later continue to pay attention to observe, know friends can comment on it.
The Row and Column
Row and Column inherit Flex. The axis of Row is horizontal, and the axis of Column is vertical. That is, Flex sets the axis direction as follows:
// Row
direction: Axis.horizontal,
/// Column
direction: Axis.vertical,
Copy the codeIf you want to Orient the main axis, you can use Row or Column directly, just like Flex.
Expanded and Flexible
Flexible’s fix attribute defaults to flexfit.loose, while Expanded inherits Flexible and its fix attribute is specified as flexfit.tight. The two are different because the fix attribute is different. If Flexible’s FIT attribute is set to flexfit. tight, Flexible and Expanded are equivalent, and the fit attributes can be set as follows:
- Tight: forcibly filling available space;
- Loose: does not force the available space to be filled, and the size of the Widget itself.
The comparison effect is as follows:
Expanded allows components in Row, Column, and Flex to fill the space available along the main axis. If Expanded components are used in multiple widgets, the Flex property of Expanded can be used to proportionally allocate the main axis space. The Flex attribute is equivalent to the weight attribute of the Android LinearLayout, as follows:
// Expanded
class ExpandedSamplePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Row Sample"),
centerTitle: true,
),
body: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
width: 50,
height: 50,
color: Colors.red,
child: Center(
child: Text(
"A",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
),
Expanded(
flex: 2,
child: Container(
width: 50.// Row Expanded width is invalid
height: 50.// Column Expanded lower height is invalid
color: Colors.green,
child: Center(
child: Text(
"B",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
),
Container(
width: 50,
height: 50,
color: Colors.yellow,
child: Center(
child: Text(
"C",
style: TextStyle(fontSize: 20, color: Colors.white), ), )), ], )); }}Copy the codeThe following information is displayed:
Spacer
Spacer, used to adjust the spacing between widgets, takes up all of the free space, so MainAxisAlignment is invalid. The flex attribute of Spacer sets the weight of the free space allocation. The default value is 1, indicating that all of the free space is occupied. If two or more spacers allocate the remaining space according to Flex, the code reference is as follows:
class RowSamplePage1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Row Sample"),
centerTitle: true,
),
body: ConstrainedBox(
constraints: BoxConstraints(maxHeight: 150),
child: Row(
children: <Widget>[
Container(
width: 80,
height: 80,
color: Colors.red,
),
Spacer(flex: 1,),
Container(
width: 80,
height: 80,
color: Colors.green,
),
Spacer(flex: 2,),
Container(
width: 80,
height: 80, color: Colors.yellow, ), ], ), )); }}Copy the codeThe following information is displayed:
I have learned about the Flex layout of Flutter. The emphasis is on understanding the basic concepts of Flex. On this basis, I have learned and verified the Flex layout.