Flutter中向上滚动时如何隐藏图形？

问题根源是你的图形组件脱离了滚动折叠区域的控制，或是层级设置导致它始终浮在内容上方，可通过以下方式修复：

方法一：将图形纳入SliverAppBar的可折叠区域 #

确保图形和文本处于同一可收缩容器内——也就是SliverAppBar的flexibleSpace中，让它随滚动同步收缩隐藏。调整布局示例：

SliverAppBar(
  expandedHeight: 200,
  flexibleSpace: FlexibleSpaceBar(
    background: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("需要隐藏的文本"),
        // 图形与文本同属flexibleSpace的背景区域
        Image.network("your_image_url"),
      ],
    ),
  ),
)

方法二：通过滚动控制器控制图形显隐 #

如果布局结构无法调整，可监听滚动偏移量，动态切换图形的显示状态：

late ScrollController _scrollController;
bool _showGraphic = true;

@override
void initState() {
  super.initState();
  _scrollController = ScrollController()
    ..addListener(() {
      // 根据实际需求设置偏移阈值，比如超过60时隐藏
      setState(() {
        _showGraphic = _scrollController.offset < 60;
      });
    });
}

@override
Widget build(BuildContext context) {
  return CustomScrollView(
    controller: _scrollController,
    slivers: [
      // 你的SliverAppBar及其他滚动组件
      SliverToBoxAdapter(
        child: Visibility(
          visible: _showGraphic,
          child: Image.network("your_image_url"),
        ),
      ),
    ],
  );
}

针对你代码的具体修改 #

看你提供的代码结构，图形是通过Stack+Positioned放在了SliverAppBar外部，导致它不受折叠逻辑影响。只需把图形移到FlexibleSpaceBar的background内部即可：

// 修改前
Stack(
  children: [
    SliverAppBar(...),
    Positioned(top: 120, child: Image.asset(...)), // 浮在上方的图形
  ],
)

// 修改后
SliverAppBar(
  expandedHeight: 200,
  flexibleSpace: FlexibleSpaceBar(
    background: Stack(
      children: [
        // 原有背景或文本组件
        Text("目标文本"),
        Positioned(top: 120, child: Image.asset(...)), // 纳入折叠区域
      ],
    ),
  ),
)

这样滚动时，图形会随flexibleSpace的收缩一起被隐藏，不再浮在其他Widget上方。

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