How it works
LabeledContentStyle is the protocol that defines the appearance and layout of a LabeledContent view — the pairing of a label with its associated value. Rather than positioning a label and value yourself, you express the content once and delegate its presentation to a style, which decides how the two parts are arranged and decorated for the surrounding context. Conform a type to this protocol to build a reusable look, or apply one of the built-in styles to adopt platform-standard behavior. Reach for it when you want consistent label-and-value rows across a screen, especially inside a Form where SwiftUI expects this style-driven layout.
Conform to LabeledContentStyle by implementing makeBody(configuration:)
The protocol's single requirement is makeBody(configuration:), which receives a LabeledContentStyleConfiguration and returns the styled view. The configuration exposes a
labeland acontentproperty that you compose however you like, letting the sameLabeledContentadopt different presentations without changing its call site.Apply a style with the labeledContentStyle(_:) modifier
You attach a style to a view hierarchy using
.labeledContentStyle(...), as on eachLabeledContent("Battery", value: "82%")andLabeledContent("Network", value: "Wi-Fi"). The modifier sets the style through the environment, so every LabeledContent beneath it renders with that style unless overridden lower in the tree.Adopt the system default with the automatic style
Passing
.automaticselects the context-appropriate built-in style, the same one LabeledContent uses when no style is specified. Inside aForm, automatic produces the familiar leading-label, trailing-value row, which is why.labeledContentStyle(.automatic)here yields standard settings-style rows.Let the container shape the style's output
Because LabeledContentStyle reads the environment, the enclosing container influences the result: the same automatic style laid out in a
Formaligns the value to the trailing edge, while in other contexts it falls back to a plainer arrangement. The style describes intent; the surroundingFormresolves it into concrete layout.
configuration.label and configuration.content in red bold, then replace .automatic with .labeledContentStyle(MyStyle()) to see your custom layout take over both rows.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct LabeledContentStyleDemo: View {
var body: some View {
Form {
LabeledContent("Battery", value: "82%")
.labeledContentStyle(.automatic)
LabeledContent("Network", value: "Wi-Fi")
.labeledContentStyle(.automatic)
}
.padding()
}
}