Flutter实现圆形头像覆盖SliverAppBar及下方内容的方案求助

你当前的代码里，圆形头像放在了NestedScrollView的body内部，而headerSliverBuilder生成的SliverAppBar层级比body内容更高，导致头像被遮挡。要实现头像覆盖在AppBar和下方内容上方的效果，需要把头像放在更高层级的Stack中，让它浮在整个NestedScrollView之上。

修改后的完整代码如下：

import 'package:flutter/material.dart';
import 'package:uber_eats_clone/view/components/restaurant_info_page_sliver_appbar.dart';

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

  @override
  State<PopupRestaurantPage> createState() => _PopupRestaurantPageState();
}

class _PopupRestaurantPageState extends State<PopupRestaurantPage> {
  // 假设你的SliverAppBar展开后的高度是200，可根据实际值调整
  final double appBarExpandedHeight = 200;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          NestedScrollView(
            headerSliverBuilder: (context, innerBoxIsScrolled) {
              return [
                const RestaurantInfoPageSliverAppbar(),
              ];
            },
            body: SingleChildScrollView(
              // 给内容顶部加padding，避免被头像遮挡
              child: Padding(
                padding: EdgeInsets.only(top: 70), // 头像直径是70（35*2），所以padding设为70
                child: Container(
                  height: 300,
                  child: Text('w'),
                ),
              ),
            ),
          ),
          // 把头像放在Stack的最上层，覆盖在NestedScrollView上方
          Positioned(
            left: 0,
            right: 0,
            top: appBarExpandedHeight - 35, // 35是头像半径，让头像底部刚好衔接内容顶部
            child: const CircleAvatar(
              radius: 35.0,
              backgroundColor: Colors.white,
              child: CircleAvatar(
                radius: 20.0,
                backgroundImage: AssetImage('images/domino_logo.png'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键修改说明：

• 将头像从body的Stack中移出，放到包裹NestedScrollView的外层Stack里，确保头像层级最高
• 通过Positioned的top值计算，让头像刚好卡在SliverAppBar的底部位置（appBarExpandedHeight - 头像半径），需要根据你实际的SliverAppBar展开高度调整appBarExpandedHeight的值
• 给body内的内容添加顶部padding，避免内容被头像遮挡

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