SwiftUI列表背景色 [英] SwiftUI List Background color

问题描述

我正在尝试使用以下代码将视图背景色设置为黑色

I am trying on setting a view background color to black with the following code

struct RuleList: View {[![enter image description here][1]][1]
private var presenter: ConfigurationPresenter?

@ObservedObject
private var viewModel: RowListViewModel

init(presenter: ConfigurationPresenter?, viewModel: RowListViewModel) {
    self.presenter = presenter
    self.viewModel = viewModel
}

var body: some View {
    List(viewModel.configurations) { configuration in
        RuleListRow(website: configuration.website).background(Color.black)
    }.background(Color.black)
}
}

struct RuleListRow: View {
var website: Website
@State private var websiteState = 0

var body: some View {
    VStack {
        Text(website.id).foregroundColor(.white)

        Picker(website.id, selection: $websiteState) {
            Text("Permis").tag(0)
            Text("Ascuns").tag(1)
            Text("Blocat").tag(2)
        }.pickerStyle(SegmentedPickerStyle()).background(Color.crimson)
    }.listRowBackground(Color.green)
}
}

该视图托管在混合UIKit-SwiftUI故事板中，因此该特定视图嵌入在Hosting控制器中

The view is hosted in a mixed UIKit - SwiftUI storyboard, so this specific view is embed in a Hosting controller

class ConfigurationHostingController: UIHostingController<RuleList> {
private var presenter: ConfigurationPresenter = ConfigurationPresenter()

required init?(coder: NSCoder) {
    super.init(rootView: RuleList(presenter: presenter, viewModel: presenter.rowListViewModel))
}
}

我尝试了 .background ， .listRowBackground(Color.black)和 .colorMultiply(.black)的任意组合想起了，我得到的最好的就是这个

I've tried any combination of .background, .listRowBackground(Color.black) and .colorMultiply(.black) I could think of, and the best I got is this

推荐答案

iOS 14

在iOS 14中，您可以考虑使用 LazyVStack 代替列表:

ScrollView {
    LazyVStack {
        ForEach((1...100), id: \.self) {
            Text("Placeholder \($0)")
        }
    }
    .background(Color.yellow)
}

请记住， LazyVStack 是惰性的，不会一直呈现所有行.因此，它们非常出色，并由Apple自己在WWDC 2020中提出.

Keep in mind that LazyVStack is lazy and doesn't render all rows all the time. So they are very performant and suggested by Apple itself in WWDC 2020.

所有SwiftUI的 List 都由iOS中的 UITableView 支持.因此您需要更改 tableView 的背景颜色.但是，由于 Color 和 UIColor 的值略有不同，因此您可以摆脱 UIColor .

All SwiftUI's Lists are backed by a UITableViewin iOS. so you need to change the background color of the tableView. But since Color and UIColor values are slightly different, you can get rid of the UIColor.

struct ContentView: View {
    
    init() {
        /// These could be anywhere before the list has loaded.
        UITableView.appearance().backgroundColor = .clear // tableview background
        UITableViewCell.appearance().backgroundColor = .clear // cell background
    }

    var body: some View {
        List {
            ,,,
        }
        .background(Color.yellow)
    }
}

现在，您可以使用所需的任何背景(包括所有颜色)

Now you can use Any background (including all Colors) you want

请注意，顶部和底部的白色区域是安全区域，您可以使用 .edgesIgnoringSafeArea()修饰符来摆脱它们.

Note that those top and bottom white areas are safe are and you can use .edgesIgnoringSafeArea() modifier to get rid of them.

Apple即将淘汰我们在SwiftUI中使用的所有UIKit技巧(例如，调整UIAppearance).因此，您可能要考虑始终使代码适应最新的iOS

Apple is on its way to deprecate all UIKit tricks that we are using in the SwiftUI (like tweaking the UIAppearance). So you may want to consider adapting your code to the latest iOS always

这篇关于SwiftUI列表背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！