SwiftUI：列表上的渐变背景

Question

有人可以告诉我如何在 SwiftUI 列表上添加渐变背景吗？

当前代码：

struct TestView: View {
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [Color.red, Color.purple]), startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.vertical)
            .overlay(
                List {
                    Group {
                        Text("Hallo")
                        Text("World")
                    }
                    .background(Color.blue)
                }
                .background(Color.green)
                .padding(50)
        )
    }
}

当前布局，其中渐变在单元格后面可见。 我想让单元格透明以查看下面的渐变。

谢谢！

Answer 1

您已经添加了渐变。 只需使背景 colors 清晰并摆脱那些测试代码；）

iOS 16

您可以使用scrollContentBackground(.hidden)修饰符隐藏任何可滚动内容的背景

iOS 15及以下

您应该使用UITableView和UITableViewCell的appearance属性隐藏默认列表背景和所有单元格

您也可以使用.listRowBackground(.clear)隐藏单元格背景

例子

struct TestView: View {

    init() {
        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().backgroundColor = .clear
    }
    
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [Color.red, Color.purple]), startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.vertical)
            .overlay(
                List {
                    Group {
                        Text("Hallo")
                        Text("World")
                    }
                }
                .padding(50)
        )
    }

Answer 2

struct ContentView: View {

init() {
    UITableView.appearance().backgroundColor = .clear
    UITableViewCell.appearance().backgroundColor = .clear
}

var body: some View {
    ZStack {
        LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.vertical)
            .overlay(
                List {
                    HStack {
                        Text("Item List")
                            .font(.title3)
                            .foregroundColor(Color.black)
                        Spacer()
                        Text("Fatemeh")
                            .font(.title3)
                            .foregroundColor(Color.green)
                            .padding(.horizontal)
                        
                    }
                    
                    
                    
                }
            )
        }
    }
}

如果您希望列表项更改背景颜色，只需将 HStack 放入.overlay() 而不是整个列表；）