如何使用 List (SwiftUI) 更改视图的背景颜色答案

【问题标题】：How do I change my view's background color using List (SwiftUI)如何使用 List (SwiftUI) 更改视图的背景颜色
【发布时间】：2020-05-15 22:47:44
【问题描述】：

我想让我的单元格看起来不填充列表的列。我已经清除了列表背景颜色和分隔样式设置为 .none。我还将我的cellView's listRowBackground 设置为灰色，但效果不佳。我的单元格中的背景颜色仍然是白色。如何清除列表的列背景颜色？请帮忙。谢谢。

struct TeamListView: View {
@EnvironmentObject var userToken : UserToken

@State var teamResults : [TeamResult] = []

var body: some View {

    NavigationView {

        ZStack{
            Color.gray.edgesIgnoringSafeArea(.all)
            VStack {
                List(teamResults) { team in
                    TeamListCellView(teamResult: team)
                }.navigationBarTitle(Text("My team"),displayMode: .inline)

        }
    }
    .onAppear(perform: {
        self.getTeamData()
        UITableView.appearance().backgroundColor = .gray
        UITableView.appearance().separatorStyle =  .none
    })

    .onDisappear(perform: {
        UITableView.appearance().backgroundColor = .white
        UITableView.appearance().separatorStyle = .singleLine
    })
}

下面是我的cellView，我在这里设置了.listRowBackground(Color.gray)。

struct TeamListCellView: View {
//    @ObservedObject var teamResult: TeamResult
var teamResult: TeamResult
var body: some View {

    NavigationLink(destination: TeamDetail(teamResult1: teamResult)) {

        Image(uiImage: teamResult.teamImage)
                   .resizable()
                    .aspectRatio(contentMode: ContentMode.fill)
                   .frame(width:70, height: 70)
                   .cornerRadius(35)

        VStack(alignment: .leading) {
                    Text(teamResult.groupName)
                    Text(teamResult.groupIntro)
                           .font(.subheadline)
                           .foregroundColor(Color.gray)
                   }

        } .frame(width:200,height: 100)
        .background(Color.green)
        .cornerRadius(10)
        .listRowBackground(Color.gray)        
}
}

【问题讨论】：

标签： swiftui swiftui-list

【解决方案1】：

您可以创建一个Background<Content: View> 并使用它来设置视图的背景颜色。为此，您可以将您的视图嵌入到您的Background View

例如：

struct ContentView: View {
    @EnvironmentObject var userToken : UserToken
    @State var teamResults : [TeamResult] = []
    var body: some View {
        Background{
            NavigationView {
                ZStack{
                    Color.gray.edgesIgnoringSafeArea(.all)
                    VStack {
                        List(teamResults) { team in
                            TeamListCellView(teamResult: team)
                        }
                        .navigationBarTitle(Text("My team"),displayMode: .inline)
                    }
                }
                .onAppear(perform: {
                    self.getTeamData()
                    UITableView.appearance().backgroundColor = .gray
                    UITableView.appearance().separatorStyle =  .none
                })
                .onDisappear(perform: {
                    UITableView.appearance().backgroundColor = .white
                    UITableView.appearance().separatorStyle = .singleLine
                })
            }
        }
    }
}

struct Background<Content: View>: View {
    private var content: Content

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content()
    }

    var body: some View {
        Color.gray
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        .overlay(content)
    }
}

【讨论】：