SwiftUI  Label 苹果最爱的控件WWDC2020 基础使用(教程含代码)

SwiftUI Label 苹果最爱的控件WWDC2020 基础使用(教程含代码)

Label 用户界面项的标准标签,由带有标题的图标组成。 struct Label where Title : View, Icon : View 使用教程 最常见且可识别的用户界面组件之一是图标和标签的组合。这个习语出现在许多类型的应用程序中,并显示在集合,列表,操作项菜单和可公开列表中,仅举几...

Label

用户界面项的标准标签,由带有标题的图标组成。

struct Label where Title : View, Icon : View

使用教程

最常见且可识别的用户界面组件之一是图标和标签的组合。这个习语出现在许多类型的应用程序中,并显示在集合,列表,操作项菜单和可公开列表中,仅举几例。

通过提供图像的标题和名称(例如SF Symbols集合中的图标),以最简单的形式创建标签:

Label("Lightning", systemImage: "bolt.fill")

您还可以通过多种方式将样式应用于标签。如果在设备旋转后对视图进行动态更改或更改为窗口大小,则您可能希望使用仅标题标签样式仅显示标签的文本部分:

Label("Lightning", systemImage: "bolt.fill")
    .labelStyle(TitleOnlyLabelStyle())

相反,还有一种仅图标的标签样式:

Label("Lightning", systemImage: "bolt.fill")
    .labelStyle(IconOnlyLabelStyle())

您还可以通过修改现有样式来创建自定义标签样式。本示例向默认标签样式添加红色边框:

struct RedBorderedLabelStyle : LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        Label(configuration)
            .border(Color.red)
    }
}

要进行更广泛的自定义或创建全新的标签样式,您需要采用LabelStyle协议并为新样式实现LabelStyleConfiguration。

要将通用标签样式应用于一组标签,请将样式应用于包含标签的视图层次结构:

VStack {
    Label("Rain", systemImage: "cloud.rain")
    Label("Snow", systemImage: "snow")
    Label("Sun", systemImage: "sun.max")
}
.labelStyle(IconOnlyLabelStyle())

也可以使用视图来以编程方式组成标签的图标来制作标签,而不是使用预制图像。在此示例中,标签的图标部分使用填充有用户姓名首字母的实心圆:

Label {
    Text(person.fullName)
        .font(.body)
        .foregroundColor(.primary)
    Text(person.title)
        .font(.subheadline)
        .foregroundColor(.secondary)
} icon: {
    Circle()
        .fill(person.profileColor)
        .frame(width: 44, height: 44, alignment: .center)
        .overlay(Text(person.initials))
}

推荐

基础文章推荐

经典教程推荐

技术源码推荐

推荐文章

CoreData篇

Combine篇

TextField篇

JSON文件篇


一篇文章系列

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

文章来源于互联网:SwiftUI Label 苹果最爱的控件WWDC2020 基础使用(教程含代码)

0

评论0

鱼翔浅底,鹰击长空,驼走大漠
没有账号? 注册  忘记密码?