Flutter 布局

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

• 介绍
• Row/ Column
• Baseline
• Stack
• Expanded
• Padding

Row/Column

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

我们要做的是

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

对应的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需要指定 方向的距离。

Expanded

文本布局对齐

PageView

页面组件

ListView

辅助

Padding

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

观

视频

代码