在SwiftUI中更改GroupBox的背景颜色

Question

我该如何在SwiftUI中更改GroupBox视图的默认灰色背景颜色？

我尝试添加背景修饰符，但这只会更改框下面的白色背景（请参见截图）。

GroupBox(label: Text("Label"), content: {
    Text("Content")
})
.background(Color.blue)

- JacobF

---

我认为现在没有办法，但这个链接可能会对你有所帮助：https://www.facebook.com/349275022095690/posts/someone-asked-me-earlier-if-we-can-change-the-groupbox-background-color-in-swift/1141734002849784/ - Ludyem

Answer 1

这是默认的分组框样式。您可以使用自定义样式创建所需的任何分组框。

这里有一个例子。在 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)
    }
}

- Asperi

---

这很有用，但我不认为它算是“答案”，因为你必须自己布置标签。在开头加上一个“你不能”，然后它就是真正的答案了。 - user652038

Answer 2

这个问题的答案在最近的（iOS16）版本中发生了变化。现在您可以使用 backgroundStyle(_:)。文档可以在这里找到

GroupBox(label: Text("Label"), content: {
    Text("Content")
})
.backgroundStyle(Color.blue)

- iain

Answer 3

可以用以下方法来解决这个问题。

在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!!
    }
}

- Will

Answer 4

简短回答：目前SwiftUI不支持此功能 :(

详细回答：你可以创建自定义的GroupBoxStyle（参见示例），这将允许您更改背景... 但代价是需要手动布局内容（这有点违背了原本设计的目的）。

- Nathaniel

---

你是在说其他两个已经得到社区验证的答案是不正确的吗？如果是这样，为什么它们不能满足要求呢？ - Jeremy Caney

@JeremyCaney 我想要向任何寻找解决方案的人明确表达，仅仅改变背景颜色是不可能的，因为提出的“解决方案”虽然可以改变背景颜色，但同时你必须设置角半径、标签布局等等，这使得它比起自定义组件来说更加低效（代码行数更多）。所以，最好还是简单地制作一个自定义组件，因为它已经不再是一个标准的SwiftUI组件。 - Nathaniel

VStack() { Text("标签").frame(maxWidth: .infinity, alignment: .leading).padding(.leading, 8) Text("标签") }.padding().background(Color.blue).cornerRadius(15) - Nathaniel

请将该信息编辑到您的答案中。仅有“不可能”本身是没有解释的评论。 - General Grievance