Flutter 之旅--002 Flutter的弹性盒子布局

257 阅读2分钟

📜Flutter 学习 Day02.png

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:填满交叉轴方向;

Expanded 填充布局

在主轴方向不会剩下间隙。将被Expanded包装的部件进行拉伸和压缩

主轴横向,宽度设置没有意义

主轴纵向,高度设置没有意义

当Text被Expanded包装后,文字可以自动换行。这也被称作灵活布局

padding跟margin的区别

padding的效果,是  修改的子控件child 在父控件上的内边距。

margin 修改当前控件在父控件 上的内边距 (修改的是自己)