PS: It is easy to want to do one thing, but it is very difficult to really do one thing.
The same series of articles are as follows:
- Detailed explanation of the use of the Navigator of the Flutter series
- Detailed explanation of the flex layout of the Flutter series
- Detailed explanation of image loading in Flutter series
- Widget life cycle of the Flutter series
- Flutter series of mixed development Android articles
- Detailed explanation of the use of the Platform Channel of the Flutter series
Flutter is a cross-platform UI framework launched by Google, which can quickly build high-quality applications on Android and IOS. Its main feature is that Flutter has rapid development capabilities, expressive and flexible UIs, and good native performance. This article mainly introduces the Flex layout in Flutter, as follows:
- Flex basics
- Flex common settings
- Row和Column
- Expanded和Flexible
- Space
- to sum up
Flex basics
The Flex layout method has been widely used in front-end and small program development. If you have learned Flex layout before, then it is similar in Flutter. The schematic diagram of Flexible Box is as follows:
For the introduction of this picture, please check the previous article:
Detailed explanation of the flex container of WeChat applet
Flex Widget can set the main axis direction. If you know the main axis direction, you can directly use Row or Column. Flex Widget cannot scroll. If scrolling is involved, you can try to use ListView. If the content of Flex Widget exceeds its width and height, a yellow and black warning will be displayed. Stripes, the error message that appears in the horizontal direction as an example 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.
The error display is as follows:
Flex common settings
The common properties of Flex are as follows:
- direction
- mainAxisAlignment
- mainAxisSize
- crossAxisAlignment
- verticalDirection
- textBaseline
1. direction
Set the main axis direction, the settable values are Axis.horizontal and Axis.vertical, and the cross axis is perpendicular to the main axis direction.
2. mainAxisAlignment ：
Set the arrangement of child widgets along the main axis. The default is MainAxisAlignment.start. The setting methods are as follows:
- MainAxisAlignment.start: left alignment, default value;
- MainAxisAlignment.end: Right alignment;
- MainAxisAlignment.center: center alignment;
- MainAxisAlignment.spaceBetween: Justified at both ends;
- MainAxisAlignment.spaceAround: The spacing on both sides of each Widget is equal, and the spacing from the edge of the screen is half of the spacing between other Widgets;
- MainAxisAlignment.spaceEvently: Widgets are distributed evenly, and the interval from the edge of the screen is equal to the interval between other Widgets.
The comparison effect is as follows:
3. mainAxisSize
Set the size of the main axis, the default is MainAxisSize.max, the values that can be set are 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 the size of its Widget.
The comparison effect is as follows:
Set mainAxisAlignment to spaceBetween. If mainAxisSize is set to max, the entire Row width will be arranged in spaceBetween. If mainAxisSize is set to min, it will be arranged in spaceBetween within the sum of the three Container widths.
4. crossAxisAlignment
Set the arrangement of child widgets along the cross axis. The default is CrossAxisAlignment.center, and the settings are as follows:
- CrossAxisAlignment.start: align with the starting position of the cross axis;
- CrossAxisAlignment.end: align with the end position of the cross axis;
- CrossAxisAlignment.center: center alignment;
- CrossAxisAlignment.stretch: fill the entire cross axis;
- CrossAxisAlignment.baseline: Align according to the baseline of the first line of text.
The comparison effect is as follows:
5. verticalDirection
Set the arrangement order of the child widgets in the vertical direction, the default is VerticalDirection.down, the setting method is as follows:
- VerticalDirection.down: start at the top, end at the bottom;
- VerticalDirection.up: start is at the bottom and end is at the top.
The comparison effect is as follows:
Pay attention to the CrossAxisAlignment.end of the cross axis setting, and the changes in the vertical direction on this basis.
6. textBaseline
Set the baseline type for text alignment, the values that can be set are as follows:
- TextBaseline.alphabetic: align with the letter baseline;
- TextBaseline.ideographic: align with the baseline of ideographic characters;
When using, when crossAxisAlignment is set to baseline, the value of the textBaseline property must be set. The usage is as follows:
// 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("躬",style: TextStyle(fontSize: 40,),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("之",style: TextStyle(fontSize: 16,),),
],
)),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Text("躬",style: TextStyle(fontSize: 40,),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("之",style: TextStyle(fontSize: 16, ),),
],
)),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,
children: <Widget>[
Text("躬",style: TextStyle(fontSize: 40, ),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("之",style: TextStyle(fontSize: 16,),),
],
))
],
),
);
}
}
Respectively without setting the textBaseline property, setting TextBaseline.alphabetic and TextBaseline.ideographic, the comparison effects are as follows:
Although the two are different in the meaning of the corresponding baseline, the test did not find a difference. Continue to pay attention to the observation in the later period, and friends who know can comment and point out.
Row和Column
Both Row and Column inherit Flex, the direction of the main axis of Row is the horizontal direction, and the direction of the main axis of Column is the vertical direction, that is, the main axis direction is set on the basis of Flex, as follows:
// Row
direction: Axis.horizontal,
/// Column
direction: Axis.vertical,
If you determine the direction of the main axis, you can directly use Row or Column, the usage is the same as Flex.
Expanded和Flexible
Flexible’s fix property defaults to FlexFit.loose, while Expanded inherits from Flexible, and its fix property is specified as FlexFit.tight. The two are different because the fix property is not used. If the fit property of Flexible is set to FlexFit.tight, then Flexible and Expanded Equivalently, the fit attributes that can be set are as follows:
- tight: compulsorily fill the available space;
- loose: The available space is not forced to fill, the size of the widget itself.
The comparison effect is as follows:
Expanded can make the components in Row, Column, and Flex fill the available space along the main axis. If multiple Widgets use Expanded components, you can use the Expanded flex property to distribute the main axis space proportionally. The flex property is equivalent to the weight of Android LinearLayout Properties, 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无效
height: 50, // Column Expanded下height无效
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),
),
)),
],
));
}
}
The display effect is as follows:
Spacer
Spacer is used to adjust the spacing between Widgets and will occupy all the remaining space. Therefore, the setting of MainAxisAlignment will be invalid. The property flex of Spacer is used to set the distribution weight of the remaining space. The default value is 1, which means that all remaining space is occupied. More than one Spacer allocates 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,
),
],
),
));
}
}
The display effect is as follows:
The above mainly learns the Flex layout related content in Flutter, and the focus is on understanding the basic concepts of Flex. On this basis, I have studied and verified the Flex layout. For more content, see the WeChat public account .
