android - 用户向上滚动时无法单击 SliverPersistentHeader 上的操作按钮

Question

我正在构建一个使用 SliverPersistentHeader 的 Flutter 应用程序，我添加了一些操作按钮覆盖 SliverPersistentHeader。但是该应用程序遇到了一个问题，即当用户向上滚动时操作按钮无法点击。我不想使用 SliverAppBar，因为我无法将卡片小部件覆盖在它上面。所以我改用 SliverPersistentHeader 因为它能够放置一个卡片小部件覆盖它。

如您所见，这是我尝试固定 SliverPersistentHeader 的输出。这样用户就可以在向上滚动时看到操作按钮。但不幸的是，我无法点击该操作按钮。

下面是代码。请注意，我将 SliverrPersistenHeader 包裹在 NestedScrollView 和 DefaultTabController

中

SliverPersistentHeader(
        delegate: MySliverAppBar(
       /// pass data by here
                  
        expandedHeight: 230,          
       ),
    pinned: true,
    floating: true,
 ),

这是 SliverPersistentHeaderDelegate 类。

@override
Widget build(
  BuildContext context, double shrinkOffset, bool overlapsContent) {
const Color _devider_color = Color(0xff425262);
final _actionButtonColor = Theme.of(context).cardColor.withOpacity(0.7);
return Stack(
  fit: StackFit.expand,
  overflow: Overflow.visible,
  children: [
    Image.network(
      clanProfile.mainImage == null ? _clanLogo : clanProfile.mainImage,
      fit: BoxFit.cover,
    ),

    Positioned(
      top: 0,
      left: 12,
      child: InkWell(
        onTap: () {
          Navigator.pop(context);
        },
        child: SafeArea(
          child: Container(
              height: 50,
              width: 50,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(25),
                color: _actionButtonColor,
              ),
              child: Icon(Icons.arrow_back_ios)),
        ),
      ),
    ),
    Positioned(
      top: 0,
      right: 12,
      child: SafeArea(
        child: Row(
          children: [
            InkWell(
              onTap: () {
                Navigator.of(context).pushNamed(MembersListPage.routeName,
                    arguments: MembersListPageArguments(
                      members: members,
                      masterId: masterId,
                    ));
              },
              child: Container(
                height: 50,
                width: 50,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25),
                  color: _actionButtonColor,
                ),
                child: Icon(Icons.info),
              ),
            ),
            PaddingSmall(isHorizontal: true),
            Visibility(
              visible: isClanMaster && true,
              child: Row(
                children: <Widget>[
                  InkWell(
                    onTap: () {
                      Navigator.pushNamed(
                              context, EditClanPagePage.routeName,
                              arguments: EditClanPagePageArgument(
                                  clanPageModel: clanProfile))
                          .then((Object message) {
                        if (message == 'Success') {
                          load();
                        }
                      });
                    },
                    child: Container(
                        height: 50,
                        width: 50,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(25),
                          color: _actionButtonColor,
                        ),
                        child: Icon(Icons.edit)),
                  ),
                  PaddingSmall(isHorizontal: true),
                  InkWell(
                    onTap: () {
                      generateInviteLink().then((value) {
                        _showInviteDialogue(
                            context: context, message: value);
                      });
                    },
                    child: Container(
                      height: 50,
                      width: 100,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(25),
                        color: _actionButtonColor,
                      ),
                      child: Text(
                        'Invite ',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 14,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
    Center(
      child: Opacity(
        opacity: shrinkOffset / expandedHeight,
        child: Text(
          name,
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w700,
            fontSize: 23,
          ),
        ),
      ),
    ),
    Positioned(
      // top: 60,
      top: expandedHeight / 1.3 - shrinkOffset,
      left: constants.padding_large,
      right: constants.padding_large,
      child: _buildUserDetailOverlayContainer(),
        ),
      ),
    ),
  ],
);
 }

我在 SliverAppBar 上使用 SliverPersistentHeader 的原因是我想用一张卡片覆盖它。这是它的样子

Answer 1

不好说，因为你的代码示例不全。但我认为堆栈中的最后一个小部件位于带有按钮行的小部件上。尝试交换它们。