如何在 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

尝试 AutomaticKeepAliveClientMixin 并将 wantKeepAlive 覆盖为始终 return true

Answer 2

作为 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,
          ),
        );
      }

Answer 3

确保你所有的 TabBarView children 都是 StatefulWidgets，然后像这样在所有的 AutomaticKeepAliveClientMixin 中添加一个 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;
}

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

How to persist state between tabs (TabBar) in Flutter?

state-management

flutter