HowTo —— SwiftUI2.0 如何使用 Label

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

基本用法

Label("Hello World",systemImage:"person.badge.plus")
image-20200709174029886

健康笔记是我开发的一个iOS app,主要服务于有长期健康管理需求的人士。可为全家不同成员创建各自的笔记,允许使用者自定义数据类型以记录各种健康数据。

推广

支持自定义标签风格

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
本博客所有文章除特别声明外,均采用CC 4.0许可协议。转载请注明出处和作者。

关注微信公共号肘子的Swift记事本或在推特上关注@fatbobman,永远不会错过新内容! 您的支持和鼓励将为我的博客写作增添更多的动力! 如果您或身边的朋友有健康数据管理的需求,请使用我开发的app【健康笔记】,正是因为它我才创建了这个博客。

关注