FlutterWidget-Stack元件-Jinkey

Flutter 的 Stack widget 允許你在小部件之間重疊以建立複雜的佈局。它提供了一個簡單的方式來在 Flutter 應用程式中實現層疊佈局。以下是 Stack 的用法和一些常見的示例：

1. 基本用法

Stack widget 的基本用法是將多個子 widget 疊加在一起，第一個子 widget 在最底層，後面的子 widget 依次疊加在上面。

dart複製程式碼Stack(
  children: <Widget>[
    // 底層的子 widget
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    // 疊加在底層之上的子 widget
    Container(
      width: 150,
      height: 150,
      color: Colors.green,
    ),
    // 最上層的子 widget
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)

2. 對齊和定位

Stack 結合 Positioned widget 可以精確地定位子 widget。在 Stack 中，子 widget 預設是從左上角開始疊加的，但可以使用 alignment 屬性或 Positioned widget 來改變它們的位置。

dart複製程式碼Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ),
    Positioned(
      bottom: 10,
      right: 10,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.blue,
      ),
    ),
  ],
)

3. Alignment 屬性

使用 alignment 屬性可以輕鬆地將子 widget 對齊到 Stack 的不同位置。

dart複製程式碼Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)

4. Fit 和 Overflow 屬性

• fit 屬性：用來確定子 widget 如何適應 Stack 的大小。它有兩個值：StackFit.loose 和 StackFit.expand。預設是 StackFit.loose。

• overflow 屬性：決定子 widget 溢位 Stack 邊界時如何處理。它有兩個值：Overflow.visible 和 Overflow.clip。預設是 Overflow.clip。

  dart複製程式碼Stack( fit: StackFit.expand, overflow: Overflow.visible, children: [ Container( width: 200, height: 200, color: Colors.red, ), Container( width: 250, height: 250, color: Colors.green, ), Container( width: 100, height: 100, color: Colors.blue, ), ], )

5. 結合 Positioned.fill 使用

Positioned.fill 可以用來使一個子 widget 填滿 Stack 的可用空間，並且可以設定邊距。

dart複製程式碼Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Positioned.fill(
      child: Container(
        margin: EdgeInsets.all(30),
        color: Colors.green.withOpacity(0.5),
      ),
    ),
    Positioned.fill(
      child: Align(
        alignment: Alignment.bottomRight,
        child: Container(
          width: 50,
          height: 50,
          color: Colors.blue,
        ),
      ),
    ),
  ],
)

結論

Stack 是 Flutter 中一個非常強大且靈活的佈局工具，可以用於實現複雜的重疊佈局。透過結合 Positioned、Alignment 等屬性，開發者可以自由地控制每個子 widget 的位置和大小。希望這個詳細的介紹能幫助你更好地理解和使用 Stack。