theme
This article will introduce the usage of row and column in flutter. In layman's terms, it is the usage of horizontal layout and vertical layout.
development environment
win10
androidstudio2022.1.1
jdk11
fluttersdk-flutter_windows_3.7.8
Source code
The complete open source demo address will be attached at the end of the article.
development process
First of all, the layout of Row and Colum here is similar to Android's LinearLayout, using the orientation attribute to control the layout direction.
Row is a horizontal layout. Use Row layout. The normal display situation is as follows:
Column is a vertical layout. Use Column layout. The normal display situation is as shown below:
You can see that the layout direction is different.
The properties in these two controls are listed below:
MainAxisAlignment：
The main axis of the current alignment direction, such as row, the main axis is the horizontal line.
spaceBetween: make the sub-controls in the middle equally spaced.
start: place the sub-controls at the beginning of the main axis (similar to the android default Linearlayout arrangement rule)
end: place the sub-controls on the main axis. The end position
center: Place the sub-control in the middle of the main axis
spaceEvenly: Divide the blank area of the main axis equally so that the spacing between each sub-control is equal
spaceAround: Indicates that the remaining space on both sides of each component is equal
CrossAxisAlignment:
The vertical cross axis of the current alignment direction, such as row, the cross axis is the vertical direction
start: the starting place of the cross axis
end: the end place of the cross axis
center: the center position of the cross axis
stretch: make the sub-control fill the cross axis
baseline: align at the cross line , used with textBaseline, acting on text
TextBaseline：
Text alignment
alphabetic: The text baseline is set to refer to English.
Ideographic: The text baseline is set to refer to Chinese.
There is not much difference between the two properties.
MainAxisSize:
The size of the control, row is the horizontal size, col is the vertical size.
MainAxisSize.min: the control is as small as possible
MainAxisSize.max: the control is filled to the full – default
VerticalDirection:
Vertical alignment
down: from top to
bottom up: from bottom to top
In fact, in daily use, the most commonly used attributes should be MainAxisAlignment and MainAxisSize.
MainAxisSize corresponds to wrap_content and match_parent in Android layout.
MainAxisAlignment is the alignment of the sublayout.
Finally, if you want to truly understand the row and column layout, it is not recommended to just read the article. You must type the code manually and then summarize it, so that you will remember it deeply.
Finally, the source code address is as follows:
https://gitee.com/motosheep/flutter-demo
Switch to branch: 202303281729RowCol control