Flutter 布局

应用程序中构建布局的常见小部件

介绍
Row/ Column
Baseline
Stack
Expanded
Padding

Row/Column

类似于前端的Flex布局。常用语水平或垂直播布局。

我们要做的是

决定行布局还是布局
对齐方式是什么？（主轴/次轴）
主轴内容器是根据内容大小而定还是最大可占用空间？

对应的API

return Column(
  // 主轴排序方式
  mainAxisAlignment: _mainAxisAlignment,
    // 次轴排序方式
  crossAxisAlignment: _crossAxisAlignment,
  mainAxisSize: _mainAxisSize,
  children: [
    Icon(Icons.stars, size: 50.0),
    Icon(Icons.stars, size: 100.0),
    Icon(Icons.stars, size: 50.0),
  ],
);

其他参数

Stack

不同于线性方向（水平或垂直）布局，Stack允许按照绘制顺序将Widget堆叠在一起，然后可以在Stack组件内部使用基于Positioned的自组件，分别相对于外层Stack组件的上、右、下、左边距进行定位。Stack相当于Web页面的绝对定位布局方式。

Stack表示堆，可以利用Stack结合Align或者Stack结合Positiond来页面布局

组合方案： Stack + Align

Stack

属性

alignment配置所有子元素的显示位置
children子组件

默认所有的子组件都是堆叠在一起的。

Align

Align是一个具有 Alignment 属性的 Widget，基础的属性就是 alignment，并且默认值是 Aligment.center

组合方案： Stack + Positioned

positioned需要指定方向的距离。

top 子元素距离顶部的距离
bottom
left子元素距离左距离
right

Expanded

文本布局对齐

PageView

页面组件

ListView

辅助

Padding

填充，在周围添加空间的Widget。

观

视频

https://www.youtube.com/watch?v=RJEnTRBxaSg

代码

https://github.com/bizz84/layout-demo-flutter