肘子的 Swift 记事本

HowTo —— How to Use Label in SwiftUI 2.0

Published on

Get weekly handpicked updates on Swift and SwiftUI!

SwiftUI 2.0 introduced the Label widget, making it convenient for us to add labels composed of images and text.

Basic Usage

Swift
Label("Hello World", systemImage: "person.badge.plus")

image-20200709174029886

Support for Custom Label Styles

Swift
import SwiftUI

struct LabelTest: View {
    var body: some View {
        List(LabelItem.labels(), id: \.id) { label in
            Label(label.title, systemImage: label.image)
                .foregroundColor(.blue)
                .labelStyle(MyLabelStyle(color: label.color))
        }
    }
}

struct MyLabelStyle: LabelStyle {
    let color: Color
    func makeBody(configuration: Self.Configuration) -> some View {
       HStack {
            configuration.icon //View, cannot be finely controlled
                .font(.title)
                .foregroundColor(color) //Color is overlaid, and cannot be displayed accurately
            configuration.title //View, cannot be finely controlled
                .foregroundColor(.blue)
            Spacer()
        }.padding(.all, 10)
        .background(
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.yellow)
        )
    }
}

struct LabelItem: Identifiable {
    let id = UUID()
    let title: String
    let image: String
    let color: Color
    static func labels() -> [LabelItem] {
        return [
            LabelItem(title: "Label1", image: "pencil.tip.crop.circle.badge.plus", color: .red),
            LabelItem(title: "df", image: "person.crop.circle.fill.badge.plus", color: .blue),
        ]
    }
}

image-20200709175339008

Using Your Own Label Widget for More Control

While Labels can improve development efficiency, they do not allow for fine control. The following code uses a custom MyLabel, which supports the colorful symbols provided by SF 2.0.

Swift
import SwiftUI

struct LabelTest: View {
    @State var multiColor = true
    var body: some View {
        VStack {
            Toggle("Colored Symbols", isOn: $multiColor).padding(.horizontal, 20)
            List(LabelItem.labels(), id: \.id) { label in         
                MyLabel(title: label.title,
                        systemImage: label.image,
                        color: label.color,
                        multiColor: multiColor)
            }
        }
    }
}

struct LabelItem: Identifiable {
    let id = UUID()
    let title: String
    let image: String
    let color: Color
    static func labels() -> [LabelItem] {
        return [
            LabelItem(title: "Label1", image: "pencil.tip.crop.circle.badge.plus", color: .red),
            LabelItem(title: "df", image: "person.crop.circle.fill.badge.plus", color: .blue),
        ]
    }
}

struct MyLabel: View {
    let title: String
    let systemImage: String
    let color: Color
    let multiColor: Bool
    
    var body: some View {
        HStack {
            Image(systemName: systemImage)
                .renderingMode(multiColor ? .original : .template)
                .foregroundColor(multiColor ? .clear : color)
            Text(title)
                .bold()
                .foregroundColor(.blue)
            Spacer()
        }
        .padding(.all, 10)
        .background(
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.yellow)
        )
    }
}

image-20200709180353538

I'm really looking forward to hearing your thoughts! Please Leave Your Comments Below to share your views and insights.

Fatbobman(东坡肘子)

I'm passionate about life and sharing knowledge. My blog focuses on Swift, SwiftUI, Core Data, and Swift Data. Follow my social media for the latest updates.

You can support me in the following ways