渐变背景颜色与列表答案

【问题标题】：Gradient Background Color with List渐变背景颜色与列表
【发布时间】：2021-10-24 23:38:24
【问题描述】：

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

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

【问题讨论】：

标签： ios xcode swiftui gradient background-color

【解决方案1】：

您需要先清除背景颜色，然后才能在背景上看到渐变颜色。此外，将 List 或您想要的任何视图放在 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() 而不是整个列表；)

【讨论】：

谢谢。我们整天都收到他们的来信?