Flutter 使用Stack负定位实现modalBottomSheet头像凸出时被裁剪如何解决

核心原因：showModalBottomSheet 默认的 clipBehavior 属性为 Clip.hardEdge，会自动裁剪所有超出弹窗内容边界的组件，你设置的负定位让头像超出了弹窗布局边界，因此顶部被裁剪。

方案1：关闭裁剪（最简便） #

直接修改弹窗和Stack的裁剪属性，同时给内容容器顶部留出对应边距避免布局偏移：

showModalBottomSheet(
    context: context,
    clipBehavior: Clip.none, // 关闭弹窗全局裁剪
    builder: (context) {
        return Stack(
            clipBehavior: Clip.none, // 关闭Stack自身的裁剪
            alignment: AlignmentDirectional.bottomStart,
            children: [
                Container(
                    width: double.infinity,
                    height: 200,
                    margin: const EdgeInsets.only(top: 38), // 顶部预留头像高度，避免内容顶到弹窗顶部
                    color: Colors.white,
                    child: Column(
                      // 这里放置你的文本、按钮等内容
                    )
                ),
                Positioned(
                    top: 0,
                    left: 0,
                    right: 0,
                    child: CircleAvatar(
                        backgroundColor: Palette.white,
                        radius: 38,
                        child: CircleAvatar(
                            backgroundImage: NetworkImage(snapshot.data.image),
                            radius: 34,
                            backgroundColor: Palette.white
                        ),
                     ),
                 )
            ]
        );
    }
);

方案2：透明背景预留空间（兼容性更好） #

如果担心关闭全局裁剪带来其他布局异常，可以将弹窗背景设为透明，外层加Padding预留头像高度：

showModalBottomSheet(
    context: context,
    backgroundColor: Colors.transparent, // 弹窗背景设为透明，隐藏预留区域的背景
    builder: (context) {
        return Padding(
            padding: const EdgeInsets.only(top: 38), // 顶部预留和头像半径一致的高度
            child: Stack(
                clipBehavior: Clip.none,
                alignment: AlignmentDirectional.bottomStart,
                children: [
                    Container(
                        width: double.infinity,
                        height: 200,
                        color: Colors.white,
                        child: Column(
                          // 这里放置你的文本、按钮等内容
                        )
                    ),
                    Positioned(
                        top: -38,
                        left: 0,
                        right: 0,
                        child: CircleAvatar(
                            backgroundColor: Palette.white,
                            radius: 38,
                            child: CircleAvatar(
                                backgroundImage: NetworkImage(snapshot.data.image),
                                radius: 34,
                                backgroundColor: Palette.white
                            ),
                         ),
                     )
                ]
            ),
        );
    }
);

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