IndexedStack 组件的前后重叠

最新推荐文章于 2024-05-09 11:01:11 发布

原创最新推荐文章于 2024-05-09 11:01:11 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

220 篇文章

订阅专栏

该示例展示了如何使用IndexedStack组件在Flutter中创建一个简单的页面切换效果。不同于PageView，IndexedStack不允许用户通过滑动来切换页面，而是通过设置索引来改变显示的组件。在代码中，当点击购物车图标时，索引会递增，从而在三个网络图片之间切换。

IndexedStack 组件的前后重叠，通过索引的变化，显示不同的组件。

但是这个和PageView不一样，不能左右划动。


class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _widgetIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.shopping_cart),
            tooltip: 'Open shopping cart',
            onPressed: () {
              setState(() {
                _widgetIndex++;
                if (_widgetIndex == 3) _widgetIndex = 0;
              });
            },
          ),
        ],
      ),
      body: Container(
        child: Center(
          child: IndexedStack(
            index: _widgetIndex,
            children: [
              Image.network(
                "http://inews.gtimg.com/newsapp_bt/0/13580380942/641",
                width: 300,
              ),
              Image.network(
                "http://inews.gtimg.com/newsapp_bt/0/13580380912/641",
                width: 300,
              ),
              Image.network(
                "http://inews.gtimg.com/newsapp_bt/0/13580380916/641",
                width: 300,
              ),
            ],
          ),
        ),
      ),
    );
  }
}