Flutter基础-046-IndexedStack

197 阅读1分钟
简述

给定一个widget数组,指定一个index,则IndexedStack就显示对应位置的widget

示例

image.png

代码
class _MyHomePageState extends State<MyHomePage> {
  List<Widget> list=[];//  要显示的widget数组
  int index = 0;// 指定的索引

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    list = <Widget>[
      Icon(
        Icons.add,
        size: 100.0,
        color: Colors.blue,
      ),
      Icon(
        Icons.save_alt,
        size: 100.0,
        color: Colors.green,
      ),
      Icon(
        Icons.show_chart,
        size: 100.0,
        color: Colors.green,
      ),
      Icon(
        Icons.arrow_right,
        size: 100.0,
        color: Colors.green,
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: IndexedStack(
          index: index,// 指定要显示的index,如果越界,则显示空
          children: list,// 指定的widget数组
          alignment: Alignment.bottomRight,//显示位置
        ),
      ),
      // 通过button改变index值
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            index++;
            if (index > 3) {
              index = 0;
            }
          });
        },
        child: Icon(Icons.change_history),
      ),
    );
  }
}