跳转至
Protocol

LabelStyle

A protocol for creating styles for Label views.

Declaration

protocol LabelStyle

Overview

Use this protocol to create a label style that can easily be reused, or to quickly implement one of the built-in label styles. These can all be applied to a Label with the labelStyle(_:) modifier.

Styling a Label with a LabelStyle

There are two ways to style a Label:

  • By creating a struct that conforms to this protocol.
  • By using a default struct that conforms to this protocol.

Creating Your Own LabelStyle

To create your own label style by conforming to the LabelStyle protocol, there is only one required function: makeBody(configuration:).

makeBody(configuration:) is a function that takes in a LabelStyleConfiguration parameter and expects some View to be returned. So what is a LabelStyleConfiguration? Basically, just like a Label, it's an icon and a title.

struct MyLabelStyle: LabelStyle {
    let color: Color

    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.title
            configuration.icon
                .foregroundColor(color)
        }
    }
}
This label style does two things: it stacks the title and icon vertically, and colors the icon. See below for how to use this custom label style.

Built-in LabelStyle Structures

If you don't want to create your own label style, there are 3 default styles. These are structs that conform to the LabelStyle protocol by implementing the makeBody(configuration:) function internally, so you don't have to do it yourself.

These are the default styles:

All 3 styles have only one initializer, which takes no parameters. See below for how to use them.

Using a LabelStyle

To use a LabelStyle, pass it to a Label's labelStyle(_:) modifier.

Here is an example that uses our custom label style from earlier:

struct ContentView: View {
    var body: some View {
        VStack {
            Label("Banana", systemImage: "suit.heart.fill")
                .labelStyle(MyLabelStyle(color: .yellow))
            Label("Apple", systemImage: "suit.heart.fill")
                .labelStyle(MyLabelStyle(color: .red))
        }
        .font(.title)
    }
}
A screenshot displaying two custom labels in a VStack that read "Banana" and "Apple," each with a heart emoji underneath it corresponding to the color defined in the label style.

And here is a comparison of the 3 built-in label styles:

struct ContentView: View {
    var body: some View {
        VStack {
            Label("Banana", systemImage: "suit.heart.fill")
                .labelStyle(DefaultLabelStyle())
            Label("Banana", systemImage: "suit.heart.fill")
                .labelStyle(IconOnlyLabelStyle())
            Label("Banana", systemImage: "suit.heart.fill")
                .labelStyle(TitleOnlyLabelStyle())
        }
        .font(.title)
    }
}
A screenshot displaying three default labels in a VStack that read "Banana" with a black heart icon to its left, a black heart icon by itself, and "Banana" by itself. These displays are dictated by their corresponding label styles, which render them differently in each case.

Availability

iOS 14.0+

macOS 11.0+

tvOS 14.0+

watchOS 7.0+

Topics


Instance Method

makeBody(configuration:) Creates a view that represents the body of a label.


Type Alias

Configuration The properties of a label.


Associated Type

Body A view that represents the body of a label.