SwiftUI实现VStack原生半透明背景（仿苹果应用侧边栏效果）

要实现苹果应用（如Safari标签栏、Xcode文件区）那种半透明模糊的侧边栏效果，不能直接用带透明度的纯色（会导致内容也变透明），而是要用SwiftUI提供的Material模糊背景，它能保留前景内容清晰的同时，让背景产生系统级的模糊穿透效果。

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            VStack {
                Color.green
            }
            // 替换原紫色背景为半透明模糊背景
            VStack {
                // 这里可以放你的侧边栏内容，比如列表、按钮等
                Text("侧边栏内容")
                    .foregroundColor(.primary)
                    .padding()
            }
            .background(.thinMaterial) // 核心：使用Material模糊背景
            .frame(maxWidth: 250) // 侧边栏固定宽度，可选
        }
        .frame(
            minWidth: 0,
            maxWidth: .infinity,
            minHeight: 0,
            maxHeight: .infinity
        )
    }
}

#Preview {
    ContentView()
}

关键说明 #

• 用.background(.thinMaterial)替换原Color.purple，这是实现系统级半透明模糊的核心
• Material背景不会影响前景内容的清晰度，只会模糊后方的视图/壁纸
• 可以根据需求选择不同模糊强度的Material：
  • .ultraThinMaterial：最淡的模糊，几乎接近透明
  • .thinMaterial：轻微模糊，和Safari标签栏、Xcode文件区效果一致
  • .regularMaterial：中等模糊，平衡背景与前景
  • .thickMaterial：强模糊，突出前景内容
  • .ultraThickMaterial：最强模糊，几乎完全遮挡背景

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