如何在 SwiftUI 中更改表单的背景颜色？

Question

我想更改表单的“浅灰色”背景颜色，但 .foregroundColor(Color.blue) 和 .background(Color.blue) 似乎不起作用

struct ContentView : View {

 @State var value = ""

    var body: some View {
        Form {
            Section(header: Text("First Name")) {
                TextField($value)
            }
            Section(header: Text("Last Name")) {
                TextField($value)
            }
        }.foregroundColor(Color.blue)

    }
}

Answer 1

可行的解决方案：

所有 SwiftUI 的 Lists 都由 iOS 中的 UITableView 支持。所以你需要改变tableView的背景颜色。但是由于Color和UIColor的值略有不同，可以去掉UIColor。

struct ContentView: View {
    
    init(){
        UITableView.appearance().backgroundColor = .clear
    }
    
    @State var value = ""
    
    var body: some View {
        Form {
            Section(header: Text("First Name")) {
                TextField("First Name", text: $value)
            }
            Section(header: Text("Last Name")) {
                TextField("Last Name", text: $value)
            }
        }
        .foregroundColor(Color.blue)
        .background(Color.yellow)
    }
}

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

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

---

恢复

由于UITableView.appearance().backgroundColor是全局应用的，你可以使用.onAppear修饰符在不同的视图中改变它（因为它是全局改变）。所以您可以使用另一个 onAppear 或onDisappear 将其重置 回到您想要的状态。

默认颜色为：

UIColor.systemGroupedBackground 用于分组样式。和

UIColor.systemBackground 代表简单风格。

它们都自动支持暗模式和亮模式。

Answer 2

试试这个

.onAppear {
   UITableView.appearance().backgroundColor = .blue
}

Answer 3

上面 Mojtaba Hosseini 接受的答案有效，但 init() 语句不适用于 UITableView 语句。这是因为它“硬编码”了 ContentView 的初始化参数。在这种情况下，它没有，所以一切正常，但是如果将 @ObservedObject 添加到视图中，那么这将破坏 init 函数。

只需将 UITable 语句添加到 body，显式返回 Form 并删除 init()，就简单多了。

var body: some View {
    UITableView.appearance().backgroundColor = .clear
    return Form {...}
 }

但是，在Form 上设置背景颜色通常可以按预期工作。它在ContentView 屏幕上不起作用的事实可能是一个错误。

Answer 4

如果您不想修改Form的安全区域，也可以使用ZStack：

struct ContentView: View {
    
    init(){
        
        UITableView.appearance().backgroundColor = .clear
    }
    
    @State var value = ""
    
    var body: some View {
        ZStack {
            Color(UIColor.systemYellow)
                .edgesIgnoringSafeArea(.all)
            Form {
                Section(header: Text("First Name")) {
                    TextField("First Name", text: $value)
                }
                Section(header: Text("Last Name")) {
                    TextField("Last Name", text: $value)
                }
            }
        }
    }
}

Answer 5

不要更改全局appearance()。

例如，您可以使用UITableView.appearance().backgroundColor = .red 将Form 的背景颜色设置为红色。这可以进入视图的init，但这会影响每个 List 和Form。

或者，您可以使用SwiftUI-Introspect 来自定义一个，方法如下：

struct ContentView: View {
    @State private var value = ""

    var body: some View {
        Form {
            Section(header: Text("First Name")) {
                TextField("First", text: $value)
            }

            Section(header: Text("Last Name")) {
                TextField("Last", text: $value)
            }
        }
        .introspectTableView { $0.backgroundColor = .systemBlue }
        .foregroundColor(Color.blue)
    }
}

您还可以将以下内容添加到每个部分以使这些部分也变成蓝色：

.listRowBackground(Color.blue)

Answer 6

上面的解决方案对我想要实现的目标并没有真正起作用。我想要一个具有清晰背景的表单初始屏幕，以及具有默认 iOS systemGroupedBackground 颜色的后续屏幕。使用出现（）和消失（）对我不起作用，因为在各种选项卡之间切换会导致外观错误。

我想出了以下解决方案。它借鉴了上面的解决方案。

对于我的 ContentView 屏幕，我在 Struct 中插入了这段代码。

init(){
    UITableView.appearance().backgroundColor = .clear
}

这是一个影响所有表单的全局变化。

对于我希望使用默认颜色的所有表单，我将这段代码插入到表单 {} 之外。

.background(Color(.systemGroupedBackground))

Answer 7

将这些代码复制到您的每个 Form 视图下方：

Form {
    // Your form view 
} 
.onAppear { // ADD THESE AFTER YOUR FORM VIEW
    UITableView.appearance().backgroundColor = .clear 

} .onDisappear { // CHANGE BACK TO SYSTEM's DEFAULT
    UITableView.appearance().backgroundColor = .systemGroupedBackground 
} 
.background(.yellow) // Add your background color