Flutter的弹性盒子布局
布局知识点
Center
让子部件在本部件的居中位置显示
Container 中相对位置属性
Alignment。参数:x 和 y alignment: const Alignment(0, 0),原点在中心位置
Row&Column 横向跟纵向布局
横向布局Row。
子部件按照主轴方向(横向)排列。主轴方向从左到右
textDirection: TextDirection.ltr, //在Row布局中改变主轴方向!
纵向布局 Column。
子部件按照主轴方向(纵向)排列。主轴方向从上到下
每一个UI部件都可以看成一个矩形的“盒子” ,每一个盒子都有外边距Margin和内边距padding.
主轴:MainAxisAlignment
举例:mainAxisAlignment: MainAxisAlignment.end
//spaceBetween: 剩下的空间平均分布到小部件之间!!
//spaceAround: 剩下的空间平均分布到小部件周围!!
//spaceEvenly:剩下的空间和小部件一起平均分!!
//Expanded:在主轴方向不会剩下间隙。将被Expanded拉伸。
//start 向主轴开始的方向对齐。
//end 向主轴结束的方向对齐。
//center 主轴方向居中对齐。
交叉轴:CrossAxisAlignment 垂直于主轴方向
举例:CrossAxisAlignment.baseline
//baseline:文字底部对齐
//center:交叉轴方向居中对齐。
//end:向交叉轴结束的方向对齐。;
//start:向交叉轴开始的方向对齐;
//stretch:填满交叉轴方向;