flutter - 使用 VerticalScrollableTabview 单击相应选项卡上的移动控件

Question

我被一个我自己无法弄清楚的问题困住了。我想要

a）在垂直滚动上切换选项卡，如下面的链接所示。

b) 单击某个选项卡后，控制权应转移到选定的选项卡内容。

使用下面的代码，我能够实现（a），但我不知道如何实现（b）

我想要达到的效果 https://thumbs.gfycat.com/BogusPoliticalDwarfrabbit-mobile.mp4

我目前的代码 https://drive.google.com/file/d/1IrhQ37145ipjdzVMWaiMFmr3dhqFSrQT/view

import 'package:vertical_scrollable_tabview/vertical_scrollable_tabview.dart';

class SingleRestView extends StatefulWidget {
  @override
  _SingleRestViewState createState() => _SingleRestViewState();
}

class _SingleRestViewState extends State<SingleRestView>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  List<Widget> pageContent = [.............  // Contains list of restuarents food widgets ];
  List<Widget> tabBarContent = [.............  // Contains list of restuarents food category widgets ];
  
@override
  void initState() {
    super.initState();
    _tabController = new TabController(
      vsync: this,
      length: widget.singleRestaurant.restaurantCtg.length,
    );
  }

 @override
  Widget build(BuildContext context) {
    final deviceSize = MediaQuery.of(context).size;
     return   Scaffold(
                      backgroundColor: colorContentBg2,
                      key: _scaffoldKey,
                      bottomNavigationBar: BottomNavigationWidget(),
                      endDrawer: AppDrawer(),
                  

                      body: NestedScrollView(

                        headerSliverBuilder:
                            (BuildContext context, bool innerBoxIsScrolled) {
                          return [
                            // ------------------------------------------------- A P P   B A R
                            SliverAppBar(
                              iconTheme: IconThemeData(color: Colors.black),
                              backgroundColor: Colors.white,
                              expandedHeight: deviceSize.height * 0.3,
                              floating: false,
                              pinned: true,
                              foregroundColor:
                                  isShrink ? Colors.brown : Colors.white,
              actions: [...
              actionsIconTheme: IconThemeData(...
              flexibleSpace: LayoutBuilder(...
                              ),
            // ------------------------------------------------- T A B   B A R S
                            SliverPersistentHeader(
                              delegate: tabsDelegate(
                                _tabController,
                                tabBarContent,
                                sizingInformation.screenSize.height * 0.054, // MaxExtent
                                sizingInformation.screenSize.height * 0.049, // MinExtent
                              ),
                              pinned: true,
                              floating: false,
                            ),
                          ];
                        },
        // ------------------------------------------------- T A B   B A R   C O N T E N T

                         body: VerticalScrollableTabView(
                          tabController: _tabController,
                          listItemData: pageContent.toList(),
                          eachItemChild: (object, index) {
                            return Column(
                              children: [
                                tabBarContent[index],
                                pageContent[index],
                              ],
                            );
                          },
                          verticalScrollPosition:
                              VerticalScrollPosition.begin,
                        ),
                      ),
                  ),
  }
}

选项卡委托

class tabsDelegate extends SliverPersistentHeaderDelegate {
  final double maxextent;
  final double minextent;
  List<Widget> tabBarContent;
  double temp = 0;
  tabsDelegate(
    this._tabController,
    this.tabBarContent,
    this.maxextent,
    this.minextent,
  );

  TabController _tabController;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    // temp = maxExtent / 1.1 - shrinkOffset;
    // print("Inside tabsDelegate build inside SingleRestView: " +
    //     tabBarContent.length.toString() +
    //     " - " +
    //     _tabController.length.toString());

    return ResponsiveBuilder(
      builder: (context, sizingInformation) => Container(
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey,
              blurRadius: 2,
              offset: Offset(0, 0),
            ),
          ],
        ),
        child: TabBar(
          tabs: tabBarContent
              .toList(), // * Contains actual list of widget of title
          controller: _tabController,
          isScrollable: true,
          indicatorColor: Colors.brown,
          // Unselected label style
          unselectedLabelColor: Colors.grey,
          unselectedLabelStyle: TextStyle(
            fontSize: sizingInformation.localWidgetSize.height * 0.25,
            color: Colors.grey,
            fontWeight: FontWeight.w700,
            backgroundColor: Colors.transparent,
            fontFamily: fontUniSans,
          ),
          // Selected label style
          labelColor: Colors.black,
          labelStyle: TextStyle(
            fontSize: sizingInformation.localWidgetSize.height * 0.35,
            fontWeight: FontWeight.w500,
            fontFamily: fontUniSans,
          ),

          dragStartBehavior: DragStartBehavior.down,
        ),
      ),
    );
  }

  @override
  bool shouldRebuild(tabsDelegate oldDelegate) {
    return false;
  }

  @override
  double get maxExtent => maxextent;

  @override
  double get minExtent => minextent;
}

我使用了下面的包 https://pub.dev/packages/vertical_scrollable_tabview

标签： flutterdartscrollviewflutter-sliver