SwiftUI-02-文本展示Text&Label

潜水的鱼儿
499 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第28天，点击查看活动详情。

  • 本文主要介绍我们的SwiftUI中的视图中文本展示Text&Label使用

1. Text

比我我们新建的项目默认会有Text，相当于我们的Label，用于文字的展示，不用我们创建frame,也不用我们addSubview添加

image.png

对于Text更多的是文字的展示，那么Label呢，我们通过组件库快捷方式拖入一个Label

image.png

它包含了一个图片，类似一个标签类似它实际意义的翻译Label（标签），而我们的Text则是文本。我们直接拖拽到可视化视图中，左边会创建相对应的代码。

image.png

这里的Label我们也可以设置自定义的一些图片

Label("Label1", image: "custom")

1.1 markdown语法

对于Text也是支持markdown的语法，比如

  • 加粗 我们使用**包裹我们的内容

image.png

  • 添加连接 我们添加一个URL连接，通常在markdown中就是中括号加（）连接

image.png

  • 添加斜体 通过下划线包装内容 image.png

  • 删除 删除则是波浪号包装内容删除

image.png

还有很多的其他的语法，感兴趣可以自己查找，支持markdown语法，可以方便我们快速的展示我们想要的效果，而不用我们之前的富文本进行编辑。

1.2 常用的设置

对于我们修改字体,通过点语法进行表达

.font(.system(size: 20))

我们也可以使用系统的字体

Text().font(.title)
  • 颜色 我们修改字体颜色也是同样很简单，通过设置foregroundColor 比如我们设置

image.png

  • frame 当然我们也可以自定义设置它的frame

image.png

2. label

对于label来说，他其实更像一个组合。它是由2个view类型组合的

struct Label<Title, Icon> where Title : View, Icon : View
  • 文字和图片
Label("Rain", systemImage: "cloud.rain")
Label("Lightning", systemImage: "bolt.fill")

image.png

2.1 样式显示

我们也可以选择只显示字体或者图标通过labelStyle

image.png

当然也可以使用自定义的样式

struct RedBorderedLabelStyle: LabelStyle {

    func makeBody(configuration: Configuration) -> some View {

        Label(configuration)

            .border(Color.red)

    }

}

image.png

我们也可以在视图外统一使用样式

image.png

2.2 组合方式

我们也可以自己自定义组合的方式定义我们想要的效果

Label {

                Text("hello")

                    .font(.body)

                    .foregroundColor(.primary)

                Text("world")

                    .font(.subheadline)

                    .foregroundColor(.secondary)

            } icon: {

                Circle()

                    .fill(.yellow)

                    .frame(width: 44, height: 44, alignment: .center)

                    .overlay(Text("5"))

            }

运行效果

image.png

3. 总结

对于我们一般的文本使用Text即可，对于使用标签类的使用Label进行组合。一些样式我们也可以自定义的方式实现，链式语法的使用更加方便我们阅读。

avatar
文章
阅读
粉丝