Flutter填坑指南(二)

关于Flutter中线性布局(Row和Column)

主轴和纵轴


对于线性布局,有主轴和纵轴之分,如果布局是沿水平方向,那么主轴就是指水平方向,而纵轴即垂直方向;如果布局沿垂直方向,那么主轴就是指垂直方向,而纵轴就是水平方向。在线性布局中,有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment,分别代表主轴对齐和纵轴对齐。

1. Row


Row可以沿水平方向排列其子widget.

对于Row来说,MainAxis为Row的主轴,即水平方向。如果水平排列的组件需要水平居中则可以设置

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

CrossAxis为纵轴,即垂直方向。

2. Column


Column可以沿垂直方向排列其子widget.

对于Column来说,MainAxis为Column的主轴,即垂直方向。如果垂直排列的组件需要水平居中则可以设置

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

CrossAxis为纵轴,即水平方向。

注:实际上,Row和Column都只会在主轴方向占用尽可能大的空间,而纵轴的长度则取决于他们最大子元素的长度。

猜你喜欢

转载自blog.csdn.net/Jushuzhan/article/details/129043909