[Flutter] 常用的布局容器

居中容器 Center

可以让 child 在其中垂直和水平居中

Center(child: Text("Hello guys")
)

两种处理间距布局容器 Container 和 Padding

Container 是负责对内部 child 进行 padding 和 margin 处理，会根据 child 内容自动适配大小。

Container(magin: EdgeInsets.all(20),
        padding: EdgeInsets.all(30),
        color: Colors.gray,
        child: Text("Hello"),
)

Padding 是只负责 child 的 padding，会根据 child 自动适配大小

Padding(padding: EdgeInsets.all(20),
    child: Text("Hello"),
)

处理多个子视图布局的容器 Row 和 Column

Row 和 Column 都用于包含多个子视图（children）在同一方向上的排列布局 alignment，Row 是横向排列，Column 是纵向排列
其中有两个主要属性：

mainAxisAlignment：主要方向子视图的排列方式，Row(横向)，Column(纵向)
crossAxisAlignment：是与主要方向正交的排列，即Row(纵向)，Column(横向)
这两个属性是 Enum 类型，mainAxisAlignment 包括了以下主要成员：

start：内容开始的位置（上或者左）
center：居中
end：（内容结束的位置，下或者右）
spaceAround, spaceBetween, spaceEvenly：处理不同的子控件间距
crossAxisAlignment 包括了一下主要成员：
start：内容开始的位置（上或者左）
center：居中
end：（内容结束的位置，下或者右）
baseline 内容的基线
stretch：内容拉伸铺满
举例布局一个子视图数组的代码如下：

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
        Text("Hello"),
        Text("World"),
        Text("Morning!"),
    ],
);

Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
        Text("Hello"),
        Text("World"),
        Text("Morning!"),
    ],
);

注意，对齐方式是以子视图的内容宽度来进行衡量的，如果有一个 child 的别的容器则会考虑容器内总的内容 size 来衡量。

Flex 布局 Extended

为了让一个控件具备松散的布局方式，可以嵌套一个 Expanded 容器，其有一个 flex 属性可以决定其 flex 的权重。

Expanded(
    flex: 3
    child: Container(child: Text("Hello")
)

那么在一个父容器中，多个 flex 容器可以进行对应权重的分布，比如将一个图片放入到一个 Expanded 容器后给定 flex 值进行大小的控制。

// 实现一个 2:1:1 的布局
Row(
    children: <Widget>[
    Expanded(
    flex: 2
    child: Container(child: Text("Hello")
    )，
    Expanded(
    flex: 1
    child: Container(child: Text("Hello")
    )，
    Expanded(
    flex: 1
    child: Container(child: Text("Hello")
    )，
],
)

分隔符 SizeBox 和 Divider

SizeBox 是一个占用特定宽、高的容器，举例：

// 占用宽 10
SizeBox(width: 10);
// 占用高 20
SizeBox(height: 20;

Divider 是占用特定高度的分割线，举例：

// 一条高为 20 厚度为 2 的分割线
Divider(
    height: 20,
    thickness: 2,
}

最后编辑于：2020.08.05 09:57:45