SwiftUI新手求助：如何让List组件完全透明？

嘿，作为SwiftUI新手碰到List样式调整的问题太正常了，完全可以实现你想要的「无背景色+灰色分隔线间有内容」的效果！我来一步步帮你修改代码：

核心修改点 #

要实现这个效果，主要需要处理两个部分：移除List的默认白色背景，以及确保分隔线和列表内容的样式符合预期。

1. 移除List的白色背景

在iOS 16及以上，苹果提供了非常简洁的API来隐藏滚动视图的背景，直接给List添加.scrollContentBackground(.hidden)修饰符就行。同时，我们需要把每个列表项的背景设为透明，避免列表项自带的白色背景影响效果。

2. 调整分隔线样式

你可以选择使用系统默认的分隔线并修改颜色，或者自定义分隔线来获得更灵活的样式。

修改后的完整代码 #

下面是针对你的代码调整后的版本，我还补充了一些示例内容（你可以替换成自己的业务逻辑）：

struct Search: View {
    @ObservedObject var webservice = Webservice()
    @State var depart = "Gent-Sint-Pieters"
    @State var destination = "Mechelen"
    
    // 如果需要兼容iOS 15及以下，添加这个初始化方法
    // init() {
    //     UITableView.appearance().backgroundColor = .clear
    //     UITableViewCell.appearance().backgroundColor = .clear
    // }
    
    var body: some View {
        VStack (spacing: 20){
            Rechercher(depart: $depart , destination: $destination)
            HStack {
                List(webservice.rides, id:\.id) { item in
                    // 这里替换成你实际的列表内容
                    VStack(alignment: .leading, spacing: 4) {
                        Text("\(item.departureStation) → \(item.destinationStation)")
                            .font(.headline)
                        Text("出发时间: \(item.departureTime)")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                    .padding(.vertical, 10)
                    .listRowBackground(Color.clear) // 列表项背景透明
                    .listRowSeparatorTint(Color.gray.opacity(0.5)) // 修改系统分隔线颜色
                }
                .scrollContentBackground(.hidden) // 隐藏List默认白色背景
                .listStyle(.plain) // 使用plain样式，避免额外的背景和间距
                Spacer()
            }
            RechercheButton()
        }
    }
}

各修饰符的作用解释 #

• .scrollContentBackground(.hidden)：直接移除List（本质是ScrollView）的默认白色背景，这是iOS 16+的最优解。
• .listRowBackground(Color.clear)：确保每个列表项的背景完全透明，不会遮挡你设置的底层背景色。
• .listRowSeparatorTint(Color.gray.opacity(0.5))：修改系统默认分隔线的颜色为浅灰色，符合你想要的效果。
• .listStyle(.plain)：切换到plain列表样式，避免grouped等样式带来的额外背景、圆角和间距。

如果你的App需要兼容iOS 15及以下，就把我注释掉的init()代码打开，通过修改UITableView的外观来实现背景透明的效果。

这样调整后，你的List就会呈现出无白色背景、灰色分隔线间隔内容的样式啦！

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