一、Flutter Flex布局模型

一、Flex布局是什么

Flex是Flexible Box的缩写, 译为"弹性布局",用来为盒状模型提供最大的灵活性
Flutter支持Flex的Widget
Row
Column
Expanded 
Flexible

二、基本概念

采购Flex布局的Widget,称为Flex容器(flex container),它的所有子元素自动成为容器成员

image

Flex默认有两根轴,水平方向主轴(main axis),和垂直的交叉轴(cross axis)
主轴的开始位置(起点)叫做main start 结束位置叫做(main end);交叉轴的开始位置叫做(cross start),
结束位置叫做(cross end)

三、容器的属性

  • MainAxisAlignment (主轴对齐)
  • MainAxisSize(伸展大小)
  • CrossAxisAlignment(横轴对齐)
  • TextDirection(文字方向)
  • VerticalDirection(布局方向)
  • TextBaseline(文字对齐)

-四、一个登录界面

image

猜你喜欢

转载自www.cnblogs.com/pengshaomin/p/8881576.html