Flutter实现可折叠且嵌入Google Map的AppBar问题求助

问题根源 #

你当前的SliverAppBar设置了expandedHeight: MediaQuery.of(context).size.height，这会让AppBar展开后占满整个屏幕高度，导致滚动交互覆盖全屏。另外NestedScrollView的body是不可滚动的Text组件，无法触发AppBar的收起逻辑。

修改要点 #

1. 给SliverAppBar设置合理的展开高度（比如屏幕高度的1/2，或固定值如300），限制AppBar的范围。
2. 确保NestedScrollView的body是可滚动组件（比如ListView、SingleChildScrollView），这样滚动操作才能触发AppBar的收起/展开。
3. 用FlexibleSpaceBar包裹地图组件，确保内容正确适配AppBar的尺寸约束。

修改后的完整代码 #

Widget build(BuildContext context) {
  return Scaffold(
    body: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[const AppBarHomePage()];
      },
      // 替换为可滚动组件，触发AppBar滚动逻辑
      body: ListView(
        children: const [
          Padding(
            padding: EdgeInsets.all(16.0),
            child: Text("Test"),
          ),
          // 添加足够高度的内容，让滚动效果更明显
          SizedBox(height: 800),
          Text("更多内容"),
        ],
      ),
    ),
  );
}

class AppBarHomePage extends StatefulWidget {
  const AppBarHomePage({super.key});

  @override
  State<AppBarHomePage> createState() => _AppBarHomePageState();
}

class _AppBarHomePageState extends State<AppBarHomePage> {
  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      // 设置AppBar展开后的高度，这里取屏幕高度的一半
      expandedHeight: MediaQuery.of(context).size.height * 0.5,
      floating: true,
      pinned: true,
      snap: true,
      actionsIconTheme: const IconThemeData(opacity: 0.0),
      flexibleSpace: FlexibleSpaceBar(
        // 包裹地图组件，确保其在AppBar范围内显示
        background: GoogleMapWidget(),
      ),
    );
  }
}

额外说明 #

• 如果GoogleMapWidget本身没有内部尺寸约束，建议在组件内添加SizedBox或使用LayoutBuilder获取父容器尺寸，避免地图超出AppBar范围。
• 可根据UI需求调整expandedHeight的数值，自定义AppBar展开后的大小。

内容的提问来源于stack exchange，提问作者Gaetan MCPE-FR Lg