SwiftUI实现底部上滑带动画菜单及背景同步变暗效果的问题

问题修复方案 #

核心问题根源 #

• 原布局采用VStack将弹出菜单与下层内容同级排布，弹出视图会占用VStack布局空间，导致周围出现异常空白
• 单独修改子视图亮度实现变暗效果效率低，且动画同步性差
• 弹出视图未配置横向最大宽度，导致左右两侧留空

修复后实现代码 #

struct ContentView: View {
    @State private var show = false
    
    var body: some View {
        ZStack(alignment: .bottom) {
            // 原有下层内容
            VStack {
                Button(action: { show.toggle() }) {
                    Text(show ? "hide" : "show")
                }
                .animation(nil, value: show)
                Spacer()
                Other(show: show)
                Spacer()
            }
            // 变暗遮罩层
            if show {
                Color.black
                    .opacity(0.3)
                    .ignoresSafeArea()
                    .transition(.opacity)
            }
            // 弹出菜单
            if show {
                CollapsibleView()
                    .transition(.move(edge: .bottom))
            }
        }
        .animation(.easeOut(duration: 0.2), value: show)
    }
}

struct Other: View {
    var show: Bool
    var body: some View {
        ZStack {
            Color.white
        }
    }
}

struct CollapsibleView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 40)
            .foregroundColor(.white) // 改为需求中的白色
            .frame(maxWidth: .infinity, minHeight: 100) // 撑满横向宽度
            .padding(.horizontal, 16) // 可选：左右留边，不需要可以直接删除
    }
}

调整说明 #

• 若不需要弹出菜单左右留边，删除CollapsibleView的padding(.horizontal, 16)即可
• 可修改遮罩层的opacity数值调整背景变暗程度，数值越大背景越暗
• 动画曲线可根据需求替换为.linear/.spring()等，修改duration参数调整动画时长
• 弹出菜单内部可直接添加其他子视图，外部圆角不会影响内部内容布局，动画全程无卡顿

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