如何導航到 flutter 中的特定選項卡？

Question

我是 flutter 的新手，在我的應用程序中，我想導航到上一個屏幕上的選項卡，我首先從該選項卡向前導航。

請參閱隨附的視頻以獲得清晰的可視化效果。

請注意，我沒有在后退按鈕上彈出頂部屏幕，而是再次推送上一個活動。 （由於一些單獨的問題我必須這樣做）看視頻

如果有幫助，

我可以解釋實際發生的事情。

我有 5 個選項卡，它們像過濾器一樣工作。 我在“全部”選項卡中顯示數據列表，而午餐、祈禱等選項卡的 rest 基本上是過濾列表並在那里顯示內容。

現在，單擊每個列出的圖塊都會轉到特別詳細的部分（下一個屏幕）。 當我導航回主屏幕時，它應該打開它曾經導航過的同一個選項卡

我在 TabBarView 中使用了初始索引，我可以在其中傳遞選項卡的當前索引。 但它給出了 null 錯誤 Idk 為什么

這是我的代碼 class，其中包含選項卡和內容：

 class SalesManListDemo extends StatefulWidget {
  const SalesManListDemo({
    Key key,
  }) : super(key: key);

  

    @override
  State<SalesManListDemo> createState() => _SalesManListDemoState();
}

class _SalesManListDemoState extends State<SalesManListDemo>
    with SingleTickerProviderStateMixin {
  bool isSearching = false;
  TabController _tabController;


  final List<Tab> myTabs = <Tab>[
    const Tab(
      text: 'All',
    ),
    const Tab(
      text: 'Active',
    ),
    const Tab(
      text: 'InActive',
    ),
    const Tab(
      text: 'Lunch',
    ),
    const Tab(
      text: 'Prayer',
    ),
  ];
    @override
  void initState() {
    _tabController = TabController(length: myTabs.length, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

TabBar(
            controller: _tabController,
            labelColor: const Color(0xff2454f4),
            labelStyle: TextStyle(
              decoration: TextDecoration.underline,
              fontSize: 18.sp,
              fontWeight: FontWeight.w700,
            ),
            unselectedLabelStyle: TextStyle(
              color: Colors.grey,
              decoration: TextDecoration.none,
              fontSize: 18.sp,
              fontWeight: FontWeight.w700,
            ),
            isScrollable: true,
            indicatorColor: Colors.transparent,
            unselectedLabelColor: const Color(0xffa3a3a3),
            tabs: myTabs,
          ),
          SizedBox(
            height: 8.h,
          ),
          Expanded(
            child: TabBarView(controller: _tabController, children: [
              // All employees List View
              SalesmanList(
                SalesmanDataa: SalesmanData,
                list_length: SalesmanData.length,
              ),
              SalesmanList(
                SalesmanDataa: activeemp,
                list_length: activeemp.length,
              ),
              SalesmanList(
                SalesmanDataa: inActiveEmployees,
                list_length: inActiveEmployees.length,
              ),
              SalesmanList(
                SalesmanDataa: atLunchEmployees,
                list_length: atLunchEmployees.length,
              ),
              SalesmanList(
                SalesmanDataa: atPrayerEmployees,
                list_length: atPrayerEmployees.length,
              ),
            ]),

這是另一個 class 的代碼，我從這里導航回選項卡屏幕：

leading: IconButton(
        onPressed: () {
          Navigator.pushReplacement(context,
              MaterialPageRoute(builder: (context) => SalesManListDemo()));
        },

Answer 1

請嘗試CupertinoTabScaffold 。 在這個state中，你將之前的state保留在memory中，返回時可以從舊的state繼續。

instagram、twitter等應用的tab bar邏輯是這樣的。

需要一個tabBar和一個tabBuilder 。 CupertinoTabScaffold將自動偵聽提供的 CupertinoTabBar 的點擊回調以更改活動選項卡。

controller 可用於提供最初選擇的選項卡索引並管理后續的選項卡更改。 如果未指定 controller，腳手架將創建自己的CupertinoTabController並在內部進行管理。 否則，由 controller 的所有者在使用完后對其調用 dispose。

例如：

CupertinoTabScaffold( tabBar: CupertinoTabBar(
items: const <BottomNavigationBarItem> [
  // ...
],), tabBuilder: (BuildContext context, int index) {
return CupertinoTabView(
  builder: (BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Page 1 of tab $index'),
      ),child: Center(
        child: CupertinoButton(
          child: const Text('Next page'),
          onPressed: () {
            Navigator.of(context).push(
              CupertinoPageRoute<void>(
                builder: (BuildContext context) {
                  return CupertinoPageScaffold(
                    navigationBar: CupertinoNavigationBar(
                      middle: Text('Page 2 of tab $index'),
                    ),
                    child: Center(
                      child: CupertinoButton(
                        child: const Text('Back'),
                        onPressed: () { Navigator.of(context).pop(); },
                      ),
                    ),
                  );
                },
              ),);
          },
        ),
      ),
    );
  },
);

}, )