SwiftUI 列表背景色

Question

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

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

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) 的任意组合，我得到的最好的是这个

Answer 1

iOS14

在 iOS 14 中，您可以考虑使用 LazyVStack 而不是列表：

ScrollView {
    LazyVStack {
        ForEach((1...100), id: \.self) {
            Text("Placeholder \([=10=])")
        }
    }
    .background(Color.yellow)
}

请记住，LazyVStack 是惰性的，不会一直呈现所有行。因此它们非常高效，并且在 WWDC 2020 中由 Apple 自己推荐。

iOS 13

所有 SwiftUI 的 List 均由 iOS 中的 UITableView 支持。因此您需要更改 tableView 的背景颜色。但由于 Color 和 UIColor 值略有不同，您可以去掉 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)
    }
}

现在您可以使用您想要的任何背景（包括所有Color）

请注意那些顶部和底部的白色区域是安全的并且您可以使用.edgesIgnoringSafeArea()修饰符来摆脱他们。

⚠️重要提示！

Apple 即将弃用我们在 SwiftUI 中使用的所有 UIKit 技巧（例如调整 UIAppearance）。因此，您可能需要考虑使代码适应最新的 iOS always

SwiftUI 列表背景色

SwiftUI List Background color

swiftui

ios13

xcode11

swiftui-list

iOS14

iOS 13

⚠️重要提示！