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

Question

我想更改表单的 "light gray" 背景颜色，但 .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 的 List 均由 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)
    }
}

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

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

恢复

由于UITableView.appearance().backgroundColor适用于全局，您可以使用.onAppear修饰符在不同的视图中更改它（因为它是全局更改）。因此，您可以使用 另一个 onAppear 或 onDisappear 来将它重置为您想要的。

默认颜色为：

UIColor.systemGroupedBackground 分组样式。并且

UIColor.systemBackground 为 普通样式。

而且它们都自动支持深色模式和浅色模式。

Answer 2

上面 Mojtaba Hosseini 接受的答案有效，但 init() 语句不适合 UITableView 语句。这是因为它 "hard codes" ContentView 的初始化参数。在这种情况下，它有 none，所以一切正常，但如果将 @ObservedObject 添加到视图，那么这将破坏 init 函数。

只需将 UITable 语句添加到 body，显式 return Form 并删除 init().

就简单多了

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

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

Answer 3

试试这个

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

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

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

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

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

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

这是影响所有表单的全局更改。

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

.background(Color(.systemGroupedBackground))

Answer 6

不要更改全局 `appearance()`。

您可以使用 UITableView.appearance().backgroundColor = .red 例如将 Form 的背景颜色设置为红色。这可以进入视图的 init，但是这会影响 every 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 { [=10=].backgroundColor = .systemBlue }
        .foregroundColor(Color.blue)
    }
}

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

.listRowBackground(Color.blue)

Answer 7

将这些代码复制到每个表单视图下方：

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

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

How to change the background color for a Form in SwiftUI?

ios

swiftui

可行的解决方案：

恢复

不要更改全局 `appearance()`。

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

How to change the background color for a Form in SwiftUI?

ios

swiftui

可行的解决方案：

恢复

不要更改全局 appearance()。

不要更改全局 `appearance()`。