滚动轮播、默认选项卡控制器和 GridView 合二为一

Posted 2023-02-23

【中文标题】滚动轮播、默认选项卡控制器和 GridView 合二为一

【英文标题】：Scroll Carousel, Default Tab Controller & GridView as one in flutter

【发布时间】：2020-11-15 16:15:05

【问题描述】：

我有这样的设计。

我想要的是，当我向上滚动 GridView 时，Carousel 会向上滚动，并且选项卡控制器会固定在顶部。所有这些都应该在一个卷轴中完成。我之前使用自定义滚动和 sliver GridView 完成了此操作，但我不知道如何在自定义滚动视图中添加默认选项卡控制器并使其保持固定在顶部。

感谢您的帮助:)

【问题讨论】：

api.flutter.dev/flutter/widgets/SliverGrid-class.html

@D.R.那只会滚动 Sliver GridView。我想将所有 3 个组件放在一个滚动条中。如何放置轮播和默认选项卡控制器，它们都是 RenderObject 而不是 RenderSliv​​er？

所以，您的要求只能通过CustomScrollView()....实现。

这可以通过 CustomScrollView() 来实现，但唯一的缺点是你必须使用 FixedHeight Container 因为 TabBarView()....

是否有不同的标签依赖于DefaultTabController？

【参考方案1】：

我试过下面的代码希望它能解决你的问题....

您也可以在 DartPad NestedScrollView 使用此代码

NestedScrollView(
      physics: ClampingScrollPhysics(),
      headerSliverBuilder: (context, value) 
        return [
          SliverToBoxAdapter(
            /// _buildCarousel() in your case....
            child: Container(
              height: 200,
              child: Center(
                child: Text("Your Carousel will be here"),
              )
            ),
          ),
          SliverToBoxAdapter(
            child: TabBar(
              labelColor: Colors.blue,
              unselectedLabelColor: Colors.black,
              controller: tb,
              tabs: <Widget>[
                Tab(child: Text("tab1"),),
                Tab(child: Text("tab2"),)
              ],
            )
          ),
        ];
      ,
      body: TabBarView(
        controller: tb,
        children: <Widget>[
          GridView.count(
            physics: NeverScrollableScrollPhysics(),
              crossAxisCount: 3,
              children: List.generate(10,
                      (index) =>  Icon(Icons.grid_off)
              ).toList()
          ),
          GridView.count(
              physics: NeverScrollableScrollPhysics(),
              crossAxisCount: 3,
              children: List.generate(5,
                      (index) =>  Icon(Icons.grid_on)
              ).toList()
          ),
        ],
      ),
    )

【讨论】：

非常感谢。它就像一个魅力。但是只是问一下，有没有什么办法可以让轮播向上滚动后的选项卡固定在顶部？

我会尝试让标签保持固定，如果我得到任何帖子答案......

【参考方案2】：

查看此 DartPad 以了解如何运行 ex。 PinnedAppBar_SliverAppBar_NestedScrollView

    NestedScrollView(
          controller: ScrollController(),
          physics: ClampingScrollPhysics(),
          headerSliverBuilder: (context, value) 
            return [
              SliverAppBar(
                pinned: true,
                backgroundColor: Colors.white,
                flexibleSpace: FlexibleSpaceBar(
                  background: 
                  /// _buildCarousel() in your case....
                  Container(
                    height: 200,
                    child: Center(
                      child: Text("Your Carousel will be here"),
                    )
                  ),
                ),
                expandedHeight: 250.0, /// your Carousel + Tabbar height(50)
                floating: true,
                bottom: TabBar(
                  labelColor: Colors.blue,
                  unselectedLabelColor: Colors.black,
                  controller: tb,
                  tabs: <Widget>[
                    Tab(child: Text("tab1"),),
                    Tab(child: Text("tab2"),)
                  ],
                ),
              ),
            ];
          ,
          body: TabBarView(
            controller: tb,
            children: <Widget>[
              GridView.count(
                  crossAxisCount: 3,
                  children: List.generate(10,
                          (index) =>  Icon(Icons.grid_off)
                  ).toList()
              ),
              GridView.count(
                  crossAxisCount: 3,
                  children: List.generate(5,
                          (index) =>  Icon(Icons.grid_on)
                  ).toList()
              ),
            ],
          ),
        )