这是默认的分组框样式。您可以使用自定义样式创建所需的任何分组框。
这里有一个例子。在 Xcode 12 / iOS 14 上进行了测试。
struct DemoGroupBox: View {
var body: some View {
GroupBox(label: Text("Label"), content: {
Text("Content")
})
.groupBoxStyle(TransparentGroupBox())
.padding()
}
}
struct TransparentGroupBox: GroupBoxStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.content
.frame(maxWidth: .infinity)
.padding()
.background(RoundedRectangle(cornerRadius: 8).fill(Color.blue))
.overlay(configuration.label.padding(.leading, 4), alignment: .topLeading)
}
}
这个问题的答案在最近的(iOS16)版本中发生了变化。现在您可以使用 backgroundStyle(_:)
。文档可以在这里找到
GroupBox(label: Text("Label"), content: {
Text("Content")
})
.backgroundStyle(Color.blue)
可以用以下方法来解决这个问题。
在iOS 16上测试,Xcode 14.0 Beta可用。
struct TestView: View {
var body: some View {
GroupBox(label: Text("Label"), content: {
Text("Content")
})
.groupBoxStyle(ColoredGroupBox())
.padding()
}
}
struct ColoredGroupBox: GroupBoxStyle {
func makeBody(configuration: Configuration) -> some View {
VStack {
HStack {
configuration.label
.font(.headline)
Spacer()
}
configuration.content
}
.padding()
.background(RoundedRectangle(cornerRadius: 8, style: .continuous)
.fill(.blue)) // Set your color here!!
}
}
结果:
以上结果的完整代码
struct TestView: View {
var body: some View {
VStack {
Divider()
HStack {
Text("Asperi's solution")
Text("(Problematic with label)")
.bold()
}
GroupBox(label: Text("Label"), content: {
Text("Content")
})
.groupBoxStyle(TransparentGroupBox())
.padding()
Divider()
Text("My Solution")
GroupBox(label: Text("Label"), content: {
Text("Content")
})
.groupBoxStyle(ColoredGroupBox())
.padding()
Divider()
Text("Default")
GroupBox(label: Text("Label"), content: {
Text("Content")
})
.padding()
Divider()
}
}
}
struct TransparentGroupBox: GroupBoxStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.content
.frame(maxWidth: .infinity)
.padding()
.background(RoundedRectangle(cornerRadius: 8).fill(Color.blue))
.overlay(configuration.label.padding(.leading, 4), alignment: .topLeading)
}
}
struct ColoredGroupBox: GroupBoxStyle {
func makeBody(configuration: Configuration) -> some View {
VStack {
HStack {
configuration.label
.font(.headline)
Spacer()
}
configuration.content
}
.padding()
.background(RoundedRectangle(cornerRadius: 8, style: .continuous)
.fill(.blue)) // Set your color here!!
}
}
简短回答:目前SwiftUI不支持此功能 :(
详细回答:你可以创建自定义的GroupBoxStyle
(参见示例),这将允许您更改背景... 但代价是需要手动布局内容(这有点违背了原本设计的目的)。