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 故事板中，因此此特定视图嵌入在托管控制器中

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屋！