标签栏不会在 Sliver Persistent Header 内滚动答案

【问题标题】：Tab Bar doesn't scroll in inside Sliver Persistent Header标签栏不会在 Sliver Persistent Header 内滚动
【发布时间】：2022-01-10 02:55:02
【问题描述】：

我试图让一个可滚动的 TabBar 在 Sliver Persistent Header 中工作。标签是可点击的，但我无法滚动浏览标签。难道我做错了什么？我正在使用最新版本的颤振，在 iPhone 模拟器上构建。

SliverPersistentHeader 委托类


class SliverTabBarHeader extends SliverPersistentHeaderDelegate {
  final TabBar tabBar;
  final Color color;

  const SliverTabBarHeader({
    Color color = Colors.transparent,
    required this.tabBar,
  }) : this.color = color;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Stack(
      fit: StackFit.expand,
      children: [
        Container(
          color: Colors.white,
        ),
        Positioned(
          child: tabBar,
          bottom: 20,
        ),
      ],
    );
  }

  @override
  double get maxExtent => tabBar.preferredSize.height + 70;

  @override
  double get minExtent => tabBar.preferredSize.height + 60;

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

Sliver 持久标头实现

SliverPersistentHeader(
      delegate: SliverTabBarHeader(
        tabBar: TabBar(
          indicator: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            border: Border.all(),
            color: Colors.yellow[400],
          ),
          padding: EdgeInsets.symmetric(horizontal: 20.0),
          isScrollable: true,
          unselectedLabelColor: Colors.black,
          labelColor: Colors.black,
          tabs: [
            tabItem(tabName: "All"),
            tabItem(tabName: "Pizza", icon: Icons.ac_unit),
            tabItem(tabName: "Pizza", icon: Icons.ac_unit),
            tabItem(tabName: "Pizza", icon: Icons.ac_unit),
            tabItem(tabName: "Pizza", icon: Icons.ac_unit),
            tabItem(tabName: "Pizza", icon: Icons.ac_unit),
          ],
          controller: _tabController,
        ),
      ),
      floating: true,
    );

【问题讨论】：

标签： flutter tabbar flutter-sliver

【解决方案1】：

您可以使用SliverAppBar 代替SliverPersistentHeader 并将TabBar 作为SliverAppBar 的标题例如：

 SliverAppBar(
          automaticallyImplyLeading: false,
          title:  TabBar(
      indicator: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(),
        color: Colors.yellow[400],
      ),
      padding: EdgeInsets.symmetric(horizontal: 20.0),
      isScrollable: true,
      unselectedLabelColor: Colors.black,
      labelColor: Colors.black,
      tabs: [
        tabItem(tabName: "All"),
        tabItem(tabName: "Pizza", icon: Icons.ac_unit),
        tabItem(tabName: "Pizza", icon: Icons.ac_unit),
        tabItem(tabName: "Pizza", icon: Icons.ac_unit),
        tabItem(tabName: "Pizza", icon: Icons.ac_unit),
        tabItem(tabName: "Pizza", icon: Icons.ac_unit),
      ],
      controller: _tabController,
   ),
   pinned: true,
);

【讨论】：