Flutter 通过 bottomNavigationBar Stack Offstage 实现页面的切换效果

Offstage 属性
offstage 设置child 是否显示
代码段

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Stack(
        children: <Widget>[
          new Offstage(
            offstage: _pageIndex!=0,
            child: new Text("1"),
          ),
          new Offstage(
            offstage: _pageIndex!=1,
            child: new Text("2"),
          ),
          new Offstage(
            offstage: _pageIndex!=2,
            child: new Text("3"),
          ),
        ],
      ),
      bottomNavigationBar: Container(
        height: 60,
        child: new BottomNavigationBar(
          items: [
            new BottomNavigationBarItem(
                icon:new Icon(Icons.home, size: 24.0),title:new Text("首页",style : new TextStyle(fontSize: 10,))
            ),
            new BottomNavigationBarItem(
                icon:new Icon(Icons.group, size: 24.0),title:new Text("社区",style : new TextStyle(fontSize: 10,))
            ),
            new BottomNavigationBarItem(
                icon:new Icon(Icons.person, size: 24.0),title:new Text("我的",style : new TextStyle(fontSize: 10,))
            ),
          ],
          type: BottomNavigationBarType.fixed,
          currentIndex: _pageIndex,
          onTap: (index) {
            setState(() {
              _pageIndex = index;
            });
          },
        ),
      ),
    );
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容