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

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))
}

推荐

基础文章推荐

• 《SwiftUI是什么，听听大牛们如何说》

经典教程推荐

• 更新近百篇SwiftUI教程《SwiftUI2020教程》
• 帮您突破数据存储难关《SwiftUI vs CoreData数据存储解决方案》

技术源码推荐

推荐文章

CoreData篇

• SwiftUI数据存储之做个笔记App 新增与查询(CoreData)
• SwiftUI进阶之存储用户状态实现登录与登出
• SwiftUI 数据之List显示Sqlite数据库内容（2020年教程）

Combine篇

• 一篇文章学懂弄通SwiftUI与Combine(含轮播动画App源码)

TextField篇

• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• 《SwiftUI实战之TextField风格自定义与formatters》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》
• 《SwiftUI 当键盘出现时避免TextField被遮挡自动向上移动》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》

JSON文件篇

• SwiftUI JSON文件下载、存储、解析和展示(代码大全)

---

一篇文章系列

• SwiftUI一篇文章全面掌握List(教程和源码)
• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• SwiftUI一篇文章全面掌握Picker,解决数据选择(教程和源码)
• SwiftUI一篇文章全面掌握Form(教程和源码)
• SwiftUI Color 颜色一篇文章全解决

技术交流

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

• 请关注我的专栏icloudend, SwiftUI教程与源码
  https://www.jianshu.com/c/7b3e3b671970