如何实现SwiftUI中NavigationSplitView侧边栏背景透明？

要实现侧边栏透明并让下方详情视图可见，核心是修改SwiftUI底层UIKit容器的背景色，以下是具体方案：

1. 全局设置UIKit外观（通用方案） #

在App启动时，通过UIAppearance修改相关控件的默认背景，从根源消除白色背景：

@main
struct TransparentSidebarApp: App {
    init() {
        // 拆分视图控制器背景设为透明
        UISplitViewController.appearance().view.backgroundColor = .clear
        // 导航控制器背景设为透明（适配iPhone竖屏弹出的侧边栏容器）
        UINavigationController.appearance().view.backgroundColor = .clear
        // 列表背景设为透明，避免列表自身的不透明背景
        UITableView.appearance().backgroundColor = .clear
    }
    
    var body: some Scene {
        WindowGroup {
            NavigationSplitView {
                List {
                    ForEach(1...10, id: \.self) { num in
                        Text("侧边栏选项 \(num)")
                    }
                }
                .background(.clear) // SwiftUI层面设置视图透明
                .navigationTitle("侧边栏")
            } detail: {
                // 详情视图示例，用深色背景方便测试透明效果
                ZStack {
                    Color.indigo
                    Text("详情内容")
                        .font(.largeTitle)
                        .foregroundColor(.white)
                }
            }
        }
    }
}

2. 局部修改父视图背景（针对性方案） #

如果不想全局修改外观，可以通过UIViewRepresentable在侧边栏内部修改父级容器背景：

// 自定义视图用于清除父级容器背景
struct ClearParentBackground: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        DispatchQueue.main.async {
            // 向上遍历父视图，找到容器控制器的视图并设为透明
            var currentView = view.superview
            while currentView != nil {
                if currentView is UINavigationView || currentView is UISplitView {
                    currentView?.backgroundColor = .clear
                    break
                }
                currentView = currentView?.superview
            }
        }
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {}
}

// 使用示例
NavigationSplitView {
    ZStack {
        ClearParentBackground() // 放在最底层清除容器背景
        List {
            Text("选项1")
            Text("选项2")
        }
        .background(.clear)
    }
} detail: {
    // 详情视图内容
}

注意事项 #

• iPhone竖屏模式下，侧边栏是以弹出层形式呈现的，需要确保UINavigationController的背景也被设为透明，否则弹出层的容器仍会显示白色。
• 若使用List，必须同时设置SwiftUI层面的.background(.clear)和UIKit层面的UITableView.appearance().backgroundColor = .clear，否则列表自身的背景会遮挡透明效果。

内容的提问来源于stack exchange，提问作者Анна Овчинникова