SwiftUI List设置透明背景不生效及列表内添加渐变方案咨询

遗漏的配置项 #

• 适配iOS16及以上版本：SwiftUI 4.0后List底层默认改用UICollectionView实现，原有UITableView全局外观配置不再生效，需要给List添加scrollContentBackground(.hidden)修饰符隐藏系统自带的列表背景层。
• 行背景单独配置：需要给List内的每一行明确设置listRowBackground(Color.clear)，避免行自带默认白色背景遮挡下层内容。

List内部额外添加渐变的实现方法 #

直接在List的background修饰符中添加目标渐变层即可，该渐变层会位于全局背景上方、List行内容下方，不会遮挡全局背景同时实现List区域的渐变叠加效果。

完整修改后代码 #

struct TestView: View {
    init() {
        // 兼容iOS15及以下版本的全局外观配置
        UITableView.appearance().backgroundColor = UIColor.clear
        UITableViewCell.appearance().backgroundColor = .clear
        UITableView.appearance().separatorStyle = .none
    }

    var body: some View {
        NavigationView {
            ZStack {
                // 下层全局渐变背景
                LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .top, endPoint: .bottom)
                    .edgesIgnoringSafeArea(.all)
                
                List(iphonedata) { data in
                    CompleteCell(contact: data)
                        .listRowBackground(Color.clear) // 行背景设为透明
                }
                .scrollContentBackground(.hidden) // 隐藏iOS16+默认List背景
                .background(
                    // List内部额外添加的渐变层，可自行调整透明度和颜色
                    LinearGradient(gradient: Gradient(colors: [Color.white.opacity(0.1), Color.black.opacity(0.1)]), startPoint: .top, endPoint: .bottom)
                )
            }
            .navigationTitle("Version signées")
        }
    }
}

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