当用户向上滚动时，无法单击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(),
        ),
      ),
    ),
  ],
);
 }

我使用SliverPersistentHeader而不是SliverAppBar的原因是我想在其上放置一个卡片叠加。以下是它的外观。

- Visal Sambo

Answer 1

很难说，因为你的代码示例不完整。但我认为堆栈中的最后一个小部件会放在带有按钮行的小部件上面。尝试交换它们。

- Kherel