詳解IndexedStack

一、基本介紹

IndexedStack是Flutter中的一個widget，它可以通過stackIndex屬性來控制顯示哪一個子widget。當stackIndex變化時，IndexedStack會自動切換顯示的子widget。

IndexedStack繼承自StatefulWidget，所以我們可以通過setState()方法來改變stackIndex的值，並且可以在State中重寫它們的生命周期方法等。

二、屬性介紹

IndexedStack有以下幾個常用的屬性：

1、index：指定當前展示的子widget的索引值，必須為非負整數

2、sizing：控制IndexedStack自身的大小的方式

3、alignment：控制IndexedStack中各個子widget的對齊方式

4、textDirection：指定IndexedStack中文本的方向

三、示例代碼

IndexedStack(
  index: _currentIndex,
  sizing: StackFit.expand,
  alignment: Alignment.center,
  children: [
    Container(
      color: Colors.red,
      child: Center(
        child: Text(
          'Widget 0',
          style: TextStyle(color: Colors.white, fontSize: 30),
        ),
      ),
    ),
    Container(
      color: Colors.green,
      child: Center(
        child: Text(
          'Widget 1',
          style: TextStyle(color: Colors.white, fontSize: 30),
        ),
      ),
    ),
    Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          'Widget 2',
          style: TextStyle(color: Colors.white, fontSize: 30),
        ),
      ),
    ),
  ],
)

四、使用技巧

1、IndexedStack適用於需要在多個widget之間進行切換的場景。例如：一個TabBar中每個tab的內容不同，就可以使用IndexedStack來切換。

2、IndexedStack的children中必須至少有一個子widget，否則會拋出異常。

3、儘可能使用StatelessWidget而不是StatefulWidget，因為StatefulWidget的維護成本更高。

4、IndexedStack可以和AnimationController結合使用，實現切換效果的動畫。

五、總結

IndexedStack是Flutter中常用的一個widget，它可以幫助我們在多個widget之間輕鬆切換。掌握它的基本用法及屬性，可以大大提高我們開發的效率。