Flutter pit filling guide (2)

About linear layout (Row and Column) in Flutter

Main axis and longitudinal axis


For linear layout, there are main axis and vertical axis. If the layout is along the horizontal direction, then the main axis refers to the horizontal direction, and the vertical axis refers to the vertical direction; if the layout is along the vertical direction, then the main axis refers to the vertical direction, and the vertical axis is horizontal direction. In the linear layout, there are two enumeration classes MainAxisAlignment and CrossAxisAlignment that define the alignment, which represent the alignment of the main axis and the alignment of the vertical axis respectively.

1. Row


Row can arrange its child widgets horizontally.

For Row, MainAxis is the main axis of Row, that is, the horizontal direction. If horizontally arranged components need to be centered horizontally, you can set

mainAxisAlignment: MainAxisAlignment.center,//水平居中

CrossAxis is the vertical axis, that is, the vertical direction.

2. Column


Column can arrange its child widgets vertically.

For Column, MainAxis is the main axis of Column, that is, the vertical direction. If vertically arranged components need to be centered horizontally, you can set

crossAxisAlignment: CrossAxisAlignment.center,//水平居中

CrossAxis is the vertical axis, that is, the horizontal direction.

Note: In fact, both Row and Column will only occupy as much space as possible in the direction of the main axis, and the length of the vertical axis depends on the length of their largest child element.

Guess you like

Origin blog.csdn.net/Jushuzhan/article/details/129043909