使用BottomNavigationBar时如何保留选项卡? [英] How to persist tabs when using BottomNavigationBar?

问题描述

每当我从选项卡1切换到选项卡2然后再回到选项卡1时，都会重新构建选项卡1上的内容.无论如何要防止这种情况?

Whenever I switch from Tab 1 to Tab 2 then back to Tab 1, content on Tab 1 is rebuilt. Anyway to prevent this?

推荐答案

class BottomNavBarExample extends StatefulWidget {
  @override
  BottomNavBarExampleState createState() {
    return new BottomNavBarExampleState();
  }
}

class BottomNavBarExampleState extends State<BottomNavBarExample> {
  List<BottomNavigationBarItem> _tabs = [
    BottomNavigationBarItem(
        icon: Icon(Icons.library_books), title: Text('Library')),
    BottomNavigationBarItem(icon: Icon(Icons.public), title: Text('Public')),
    BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('Account')),
  ];

  var _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo')),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        items: this._tabs,
        onTap: (value) {
          setState(() {
            this._currentIndex = value;
          });
        },
      ),
      body: Stack(children: [
        new Offstage(
          offstage: this._currentIndex != 0,
          child: new TickerMode(
            enabled: this._currentIndex == 0,
            child: LibraryPage(),
          ),
        ),
        new Offstage(
          offstage: this._currentIndex != 1,
          child: new TickerMode(
            enabled: this._currentIndex == 1,
            child: GalleryPage(),
          ),
        ),
        new Offstage(
          offstage: this._currentIndex != 2,
          child: new TickerMode(
            enabled: this._currentIndex == 2,
            child: AccountPage(),
          ),
        ),
      ]),
    );
  }
}

然后在每个页面上添加AutomaticKeepAliveClientMixin

Then for each page, include AutomaticKeepAliveClientMixin

这篇关于使用BottomNavigationBar时如何保留选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！