[Flutter] 常用的布局容器

居中容器 Center

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

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

兩種處理間距布局容器 Container 和 Padding

Container 是負責對內(nèi)部 child 進行 padding 和 margin 處理虽界，會根據(jù) child 內(nèi)容自動適配大小汽烦。

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

Padding 是只負責 child 的 padding，會根據(jù) 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：內(nèi)容開始的位置（上或者左）
center：居中
end：（內(nèi)容結(jié)束的位置颂砸，下或者右）
spaceAround, spaceBetween, spaceEvenly：處理不同的子控件間距
crossAxisAlignment 包括了一下主要成員：
start：內(nèi)容開始的位置（上或者左）
center：居中
end：（內(nèi)容結(jié)束的位置，下或者右）
baseline 內(nèi)容的基線
stretch：內(nèi)容拉伸鋪滿
舉例布局一個子視圖數(shù)組的代碼如下：

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!"),
    ],
);

注意死姚，對齊方式是以子視圖的內(nèi)容寬度來進行衡量的人乓，如果有一個 child 的別的容器則會考慮容器內(nèi)總的內(nèi)容 size 來衡量。

Flex 布局 Extended

為了讓一個控件具備松散的布局方式都毒，可以嵌套一個 Expanded 容器色罚，其有一個 flex 屬性可以決定其 flex 的權重。

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

那么在一個父容器中账劲，多個 flex 容器可以進行對應權重的分布戳护，比如將一個圖片放入到一個 Expanded 容器后給定 flex 值進行大小的控制。

// 實現(xiàn)一個 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

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者