如何在 Flutter 中滑动子选项卡切换到父选项卡？

Question

我正在构建一个带有嵌套 TabBarView 小部件的 Flutter 应用程序。父选项卡有两个主要选项卡（“选项卡 1”和“选项卡 2”）。在“Tab 2”内部，有使用第二个 TabBarView 实现的子选项卡（“子选项卡 1”、“子选项卡 2”等）。

当用户从子选项卡 1 向左滑动时，我想转到主选项卡 1。 特别是我如何检测是否有人从子选项卡 1 向左滑动？这样我就可以轻松地为主选项卡 1 制作动画。

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2, // Parent tabs
      child: Builder( // Use Builder to get a proper context for the parent DefaultTabController
        builder: (BuildContext parentContext) {

          return Scaffold(
            appBar: AppBar(
              title: const Text('Tabs Example'),
            ),
            body: Column(
              children: [
                // Main TabBar
                const TabBar(
                  tabs: [
                    Tab(text: 'Tab 1'),
                    Tab(text: 'Tab 2'),
                  ],
                ),
                Expanded(
                  child: TabBarView(
                    children: [
                      // First Tab Content
                      const Center(child: Text('This is Tab 1')),

                      // Second Tab with Sub-tabs
                      DefaultTabController(
                        length: 4,
                        child: Scaffold(
                          appBar: AppBar(
                            bottom: const TabBar(
                              padding: EdgeInsets.symmetric(horizontal: 20),
                              tabs: [
                                Tab(text: 'Sub Tab 1'),
                                Tab(text: 'Sub Tab 2'),
                                Tab(text: 'Sub Tab 3'),
                                Tab(text: 'Sub Tab 4'),
                              ],
                            ),
                          ),
                          body: const TabBarView(
                            children: [
                              Center(child: Text('Content for Sub Tab 1')),
                              Center(child: Text('Content for Sub Tab 2')),
                              Center(child: Text('Content for Sub Tab 3')),
                              Center(child: Text('Content for Sub Tab 4')),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

Answer 1

您可以通过使用 tabbarcontroller 来实现这一点。但您需要一些更多的自定义功能。我想你可以尝试手势检测器小部件。

 final PageController _parentPageController = PageController();
  int _currentParentTabIndex = 0;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2, 
      child: Builder(
        builder: (BuildContext parentContext) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('Tabs Example'),
            ),
            body: Column(
              children: [
                // Main TabBar
                const TabBar(
                  tabs: [
                    Tab(text: 'Tab 1'),
                    Tab(text: 'Tab 2'),
                  ],
                ),
                Expanded(
                  child: PageView(
                    controller: _parentPageController,
                    onPageChanged: (index) {
                      setState(() {
                        _currentParentTabIndex = index;
                      });
                    },
                    children: [
                      // First Tab Content
                      const Center(child: Text('This is Tab 1')),

                      // Second Tab with Sub-tabs
                      DefaultTabController(
                        length: 4,
                        child: Scaffold(
                          appBar: AppBar(
                            bottom: const TabBar(
                              padding: EdgeInsets.symmetric(horizontal: 20),
                              tabs: [
                                Tab(text: 'Sub Tab 1'),
                                Tab(text: 'Sub Tab 2'),
                                Tab(text: 'Sub Tab 3'),
                                Tab(text: 'Sub Tab 4'),
                              ],
                            ),
                          ),
                          body: GestureDetector(
                            onHorizontalDragEnd: (details) {
                              // Check if the swipe was to the left
                              if (details.velocity.pixelsPerSecond.dx < 0) {
                                // If currently on Sub Tab 1, navigate to Main Tab 1
                                if (TabController.of(parentContext)!.index == 1) {
                                  if (TabController.of(context)!.index == 0) {
                                    _parentPageController.jumpToPage(0);
                                  }
                                }
                              }
                            },
                            child: const TabBarView(
                              children: [
                                Center(child: Text('Content for Sub Tab 1')),
                                Center(child: Text('Content for Sub Tab 2')),
                                Center(child: Text('Content for Sub Tab 3')),
                                Center(child: Text('Content for Sub Tab 4')),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
}