Flutter快速上手12：高级布局之栈索引IndexedSta

IndexedStack 继承自Stack，用于显示第index个child，而其他child则是不可见的。所以IndexedStack的尺寸永远是跟最大的子控件尺寸一致。与Stack相比，只是多了index的设置。

下面代码做一个切换页面显示，用Expanded包一层，充满屏幕：

int _pageIndex = 0;

void onClick(int index) {
    setState(() {
      _pageIndex = index;
    });
  }

Column (
        children: [
          Expanded(
            child: IndexedStack(
              index: _pageIndex,
              children: [
                Container(
                  color: Colors.red,
                ),
                Container(
                  color: Colors.grey,
                ),
                Container(
                  color: Colors.yellow,
                ),
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextButton(child: const Text('1'),onPressed: ()=>onClick(0)),
              TextButton(child: const Text('2'),onPressed: ()=>onClick(1),),
              TextButton(child: const Text('3'),onPressed: ()=>onClick(2),),
            ],
          ),
        ],
      )

Simulator Screen Shot - iPhone 12 mini - 2022-04-20 at 15.31.03.png

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~