# Flutter Stack/IndexedStack 介紹

## Stack
### 屬性
* `alignment` 對齊方式
* `children` 根據children列表中的順序排列來決定顯示順序

### 範例程式

Stack(
  // 置中對齊
  alignment: Alignment.center,
  children: [
    // 黄色 300
    Container(
      width: 300,
      height: 300,
      color: Colors.orange,
    ),
    // 红色 200
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    // 藍色 100
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)


## IndexedStack
與Stack類似但IndexedStack不會根據children列表中的順序排列來決定顯示順序，而是只會顯示指定索引的子項Widget。

### 屬性
* `index` 顯示子項索引
* `children` 子項集合

### 範例程式碼

IndexedStack(
  // 置中對齊
  alignment: Alignment.center,
  index: 0,
  children: [
    // 黄色 300
    Container(
      width: 300,
      height: 300,
      color: Colors.orange,
    ),
    // 红色 200
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    // 藍色 100
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)


## 參考資料
1. https://juejin.cn/post/6973534234233274404
2. https://juejin.cn/post/6972832392792932389

###### tags: `flutter`