Flutter SliverAppBar右上角关闭按钮显示异常问题求助

问题根源 #

你把关闭按钮放在SliverAppBar的actions里，再加上设置了expandedHeight和flexibleSpace，展开状态下actions的元素会跟着flexibleSpace的布局垂直居中，再加上给按钮加了bottom:15的内边距，直接把按钮拉到了中间位置。弹窗组件的布局约束也可能导致顶部间距异常。

修复步骤 #

1. 用Stack重构flexibleSpace布局：把关闭按钮放在flexibleSpace的上层，脱离actions的布局约束，固定在右上角。
2. 移除多余内边距：删除按钮的bottom:15 padding，避免不必要的位置偏移。
3. 适配状态栏高度：用MediaQuery获取状态栏高度，防止按钮被状态栏遮挡。

修改后的LiveStreamingModalVideoWidget关键代码：

SliverAppBar(
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(8),
      topRight: Radius.circular(8),
    ),
  ),
  pinned: true,
  floating: false,
  expandedHeight: 370,
  collapsedHeight: kToolbarHeight,
  automaticallyImplyLeading: false,
  backgroundColor: SuperSportColorScheme.white,
  surfaceTintColor: const Color(0xFF6CAEDF),
  elevation: 0,
  forceElevated: true,
  centerTitle: true,
  flexibleSpace: ClipRRect(
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(8),
      topRight: Radius.circular(8),
    ),
    child: Stack(
      children: [
        FlexibleSpaceBar(
          background: _playerSummaryInfo(),
        ),
        // 固定关闭按钮在右上角
        Positioned(
          top: MediaQuery.of(context).padding.top + 8,
          right: 16,
          child: _closePlayerStatusPage(team: widget.channels),
        ),
      ],
    ),
  ),
),

// 移除按钮的bottom内边距
Widget _closePlayerStatusPage({required LiveVideo? team}) {
  return IconButton(
    icon: SvgPicture.asset(
      close_white_button,
      height: 24,
      width: 24,
      fit: BoxFit.contain,
    ),
    onPressed: () {
      if (mounted) {
        Navigator.of(context).pop();
      }
    },
  );
}

额外提示 #

如果弹窗顶部仍有异常间距，检查SlideUpPageTransitionAnimation和SlinkyCardWidget的内部布局，看是否默认添加了padding或margin，针对性调整这两个组件的内边距参数即可。

内容的提问来源于stack exchange，提问作者SaDev