HowTo —— SwiftUI2.0 如何使用 Label

SwiftUI2.0 中新增了 Label 控件,方便我们添加由图片和文字组成的标签

基本用法

Label("Hello World",systemImage:"person.badge.plus")
image-20200709174029886
健康笔记 - 全家人的健康助手

健康笔记适用于任何有健康管理需求的人士。提供了强大的自定义数据类型功能,可以记录生活中绝大多数的健康项目数据。你可以为每个家庭成员创建各自的记录笔记,或者针对某个特定项目、特定时期创建对应的笔记。

推荐

支持自定义标签风格

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, 不能精细控制
                .font(.title)
                .foregroundColor(color) //颜色是叠加上去的,并不能准确显示
            configuration.title  //View, 不能精细控制
                .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

使用自己的 Label 控件,更多控制力

Label 能够提高开发效率,不过并不能精细控制,下面代码使用自定义 MyLabel,可以支持 SF2.0 提供的彩色符号。

import SwiftUI

struct LabelTest: View {
    @State var multiColor = true
    var body: some View {
        VStack{
        Toggle("彩色符号", 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

希望本文能够对你有所帮助。同时也欢迎你通过 TwitterDiscord 频道或下方的留言板与我进行交流。

本博客文章采用CC 4.0 协议,转载需注明出处和作者。

鼓励作者