带有列表的渐变背景颜色

Question

我不明白为什么我不能应用我的背景颜色。我尝试了几种组合，并在几个地方添加“列表”，背景颜色消失了。谢谢。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .top, endPoint: .bottom)
            List {
                HStack {
                    Text("Boulangerie Roussel")
                            .font(.title3)
                            .foregroundColor(Color.black)
                        Spacer()
                    Text("Ouvert")
                            .font(.title3)
                            .foregroundColor(Color.green)
                            .padding(.horizontal)
                    
                }
            }
        }
    }
}

Answer 1

您需要先清除背景色，然后才能在背景上看到渐变色。而且，将列表或您想要的任何视图放在 LinearGradient 之后的 '.overlay()' 中，如下所示：

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("Boulangerie Roussel")
                            .font(.title3)
                            .foregroundColor(Color.black)
                        Spacer()
                        Text("Ouvert")
                            .font(.title3)
                            .foregroundColor(Color.green)
                            .padding(.horizontal)
                        
                    }
                }
            )
        }
    }
}

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

Answer 2

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)
        )
    }

带有列表的渐变背景颜色

Gradient Background Color with List

ios

xcode

swiftui

gradient

background-color