如何在Flutter中保持选项卡（TabBar）之间的状态？

Question

我有一个TabBarView和3 TabBar。当我在选项卡1中执行某项操作时，然后我回到选项卡1时导航至选项卡2，我希望选项卡1的先前状态不会更改。

如何在Flutter中实现这一目标？

下面是我的代码屏幕截图

class _LandingPageState extends State<LandingPage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  PageController pageController;
  TabController tabController;

  @override
  void initState() {
    tabController = TabController(length: 3, vsync: this, initialIndex: 0);
    pageController = PageController(initialPage: 0)
      ..addListener(() {
        setState(() {
          _selectedIndex = pageController.page.floor();
        });
      });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
              bottomNavigationBar: BottomNavigationBar(
              currentIndex: _selectedIndex,
              onTap: (index) {
                setState(() {
                  _selectedIndex = index;
                  tabController.animateTo(index,
                      duration: Duration(microseconds: 300),
                      curve: Curves.bounceIn);
                });
              },
              items: [
                BottomNavigationBarItem(
                    icon: Icon(Icons.assignment), title: Text("Các yêu cầu")),
                BottomNavigationBarItem(
                    icon: Icon(Icons.history), title: Text("Lịch sử")),
                BottomNavigationBarItem(
                    icon: Icon(Icons.person), title: Text("Hồ sơ")),
              ]),
          body: TabBarView(
              controller: tabController,
              children: [
                RequestPage(key: PageStorageKey<String>("request_page"),),
                HistoryPage(key: PageStorageKey<String>("history_page")),
                ProfilePage(key: PageStorageKey<String>("profile_page"))])
          ),
    );
  }

Answer 1

[确保您的所有TabBarView子代均为StatefulWidgets，然后在所有子代中都添加一个AutomaticKeepAliveClientMixin，例如，对于您的RequestPage，它应该看起来像这样：

class RequestPage extends StatefulWidget {
  RequestPage({Key key}) : super(key: key);

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

class _RequestPageState extends State<RequestPage> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return // Your widget tree
  }

  @override
  bool get wantKeepAlive => true;
}

Answer 2

尝试AutomaticKeepAliveClientMixin并覆盖wantKeepAlive以始终返回true

Answer 3

作为Scaffold的主体，请使用IndexedStack保留状态。示例：

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          bottomNavigationBar: BottomNavigationBar(
            onTap: (index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            currentIndex: _selectedIndex,
            items: [
              BottomNavigationBarItem(
                ...
              ),
              BottomNavigationBarItem(
                ...
              ),
            ],
          ),
          body: IndexedStack(
            children: <Widget>[
              PageOne(),
              PageTwo(),
            ],
            index: _selectedIndex,
          ),
        );
      }