颤动中的 sliverpersistent 标题代表内部的不可见选项卡栏

Posted 2023-03-23

【中文标题】颤动中的 sliverpersistent 标题代表内部的不可见选项卡栏

【英文标题】：Invisible tabbar inside sliverpersistent header delegate in flutter

【发布时间】：2022-01-10 16:07:09

【问题描述】：

我在SliverPersistentHeader 委托中有一个标签栏，但我正在尝试更改它的颜色，因为它是透明的，但似乎我对任何颜色参数所做的每一次更改都不会改变应用程序中的任何内容，这是我的代码。

SliverPersistentHeader(
  //tabs
  delegate: _SliverAppBarDelegate(
    TabBar(
      labelColor: Colors.yellow,
      unselectedLabelColor: Colors.yellow,
      indicatorColor: Colors.grey[800],
      tabs: [
        Tab(
            child: Text("Guardaroba",
                style: TextStyle(color: Colors.black87))),
        Tab(
            child:
                Text("Post", style: TextStyle(color: Colors.black87))),
        Tab(
            child: Text("Tagged",
                style: TextStyle(color: Colors.black87))),
      ],
    ),
  ),
  pinned: true,
),

这是我的 sliver 应用栏代理

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate 
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) 
    return new Container(
      child: _tabBar,
    );
  

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) 
    return false;
  

如果不对，请见谅，但我试图找到有关代表的文档，但我没有找到太多，所以我从互联网上复制了代码，如果有人有建议，将不胜感激

【问题讨论】：

抱歉，我在格式化代码时遇到了问题。

【参考方案1】：

在这种情况下您不需要使用child，TabBar 带有unselectedLabelStyle。

  SliverPersistentHeader(
          //tabs
          delegate: _SliverAppBarDelegate(
            TabBar(
              controller: controller,
              labelColor: Colors.yellow,
              unselectedLabelColor: Colors.green,
              indicatorColor: Colors.grey[800],
              unselectedLabelStyle: TextStyle(color: Colors.black87),
              tabs: [
                Tab(
                  text: "Guardaroba",
                ),
                Tab(
                  text: "Post",
                ),
                Tab(
                  text: "Tagged",
                ),
              ],
            ),
          ),
          pinned: true,
        ),

在 _SliverAppBarDelegate

 @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) 
    return Opacity(
      opacity: 0,
      child: Container(
        child: _tabBar,
      ),
    );
  

更多关于TabBar-class

【讨论】：

我按照你说的尝试过，但它给了我一个错误，我不明白这怎么会使标签栏不可见

你想隐藏标签栏吗？

不，我不希望它与我的 tabbarview 重叠，因为现在我在其中一个选项卡中有一个列表，并且列表与 tabbar 重叠，就好像 tabbar 是不可见的，除了文本

在这种情况下，您可以使用Opacity 小部件。检查更新答案，如果它没有回答您的问题，您可以包含您想要存档的输出图像吗？