Flutter中展开动画筛选UI时被AppBar遮挡的问题解决

在Flutter应用中，我用Stack组件展示商品列表，同时通过AnimatedPositioned实现了从底部滑出的筛选UI。当把筛选UI高度设为1.sh（等价于MediaQuery.of(context).size.height，即全屏）时，它本该覆盖整个屏幕，但顶部被AppBar挡住了，Android和iOS模拟器都存在这个问题。怎么让筛选UI显示在AppBar上方且完全可见？

相关代码 #

class _FilterScreenState extends ConsumerState<FilterScreen> {
  @override
  Widget build(BuildContext context) {
    debugPrint("Building whole filter ui");
    return GradientScaffold(
        hPadding: 0.w,
        isScollable: false,
        appBar: _buildAppBar(context),
        body:
            Stack(children: [_buildAdsList(context), _showFilterSheet()]));
  }

  AppBar _buildAppBar(BuildContext context) {
    return myAppBar(
        context: context,
        title: "Filter Top Products");
  }

  Widget _buildAdsList(BuildContext context) {
    return Positioned.fill(
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: 1,
            padding: EdgeInsets.symmetric(horizontal: ThemeConstants.hPadding),
            itemBuilder: (context, index) {
              return GestureDetector(
                  onTap: () => AppNavigator.navigateTo(context,
                      wRoute:
                          AdsDetails(showActionButtons: true, prodModel: null)),
                  child: ProductBannerCard(
                      url: "",
                      advModel: null,
                      isChild: buildAdSection(context, advModel: null)));
            }));
  }

  Widget _showFilterSheet() {
    final double appBarHeight = _buildAppBar(context).preferredSize.height;
    final double finalHeight = (1.sh) - appBarHeight;
    return Consumer(builder: (context, ref, _) {
      final isOpen = ref.watch(filterSheetToggleProvider);

      // debugPrint("Rebuilding filter sheet consumer");

      return AnimatedPositioned(
          duration: const Duration(milliseconds: 300),
          bottom: isOpen ? (0) : -finalHeight,
          left: 0,
          right: 0,
          height: finalHeight,
          child: widget.filterSheet);
    });
  }
}

问题核心是：你把筛选UI放在了GradientScaffold的body区域内，而Scaffold的body默认是在AppBar下方的，所以无论怎么设置高度，都无法覆盖AppBar。以下是两种可行的解决思路：

方案1：将筛选UI作为浮层放在Scaffold外部 #

把整个Scaffold和筛选UI放到一个外层Stack中，让筛选UI层级高于Scaffold，这样就能覆盖包括AppBar在内的整个界面：

@override
Widget build(BuildContext context) {
  debugPrint("Building whole filter ui");
  return Stack(
    children: [
      GradientScaffold(
        hPadding: 0.w,
        isScollable: false,
        appBar: _buildAppBar(context),
        body: _buildAdsList(context),
      ),
      _showFilterSheet(),
    ],
  );
}

同时修改_showFilterSheet的高度计算，直接使用全屏高度，无需减去AppBar高度：

Widget _showFilterSheet() {
  final double finalHeight = 1.sh;
  return Consumer(builder: (context, ref, _) {
    final isOpen = ref.watch(filterSheetToggleProvider);

    return AnimatedPositioned(
      duration: const Duration(milliseconds: 300),
      bottom: isOpen ? 0 : -finalHeight,
      left: 0,
      right: 0,
      height: finalHeight,
      child: widget.filterSheet,
    );
  });
}

方案2：把AppBar移入Stack，作为界面的一部分 #

移除Scaffold的appBar属性，将AppBar放到body的Stack中，让筛选UI的层级高于AppBar：

@override
Widget build(BuildContext context) {
  debugPrint("Building whole filter ui");
  return GradientScaffold(
    hPadding: 0.w,
    isScollable: false,
    body: Stack(
      children: [
        _buildAdsList(context),
        // 将AppBar放入Stack，层级低于筛选UI
        _buildAppBar(context),
        _showFilterSheet(),
      ],
    ),
  );
}

然后调整_showFilterSheet的参数，确保覆盖全屏：

Widget _showFilterSheet() {
  return Consumer(builder: (context, ref, _) {
    final isOpen = ref.watch(filterSheetToggleProvider);

    return AnimatedPositioned(
      duration: const Duration(milliseconds: 300),
      bottom: isOpen ? 0 : -1.sh,
      left: 0,
      right: 0,
      top: 0, // 强制从顶部开始，覆盖整个屏幕
      child: widget.filterSheet,
    );
  });
}

注意点 #

• 方案1更推荐，它保留了Scaffold的原生行为（比如AppBar的返回键逻辑、状态栏适配），同时让筛选UI作为独立浮层存在。
• 如果用方案2，需要给AppBar包裹SafeArea，避免内容被系统状态栏遮挡。

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