【SwiftUI基础篇】10 常用的文字处理视图 Text(文本)、Label(带图标的文本)

前面的例子里已把文字处理的视图使用了很多次了，这足以说明其重要性。Text、Label它们有自己不同的使用特性。

一、Text 文字

Text 用来展示一段文字，通常情况下我们会对文字样式格式化，所以我们需要配合不同的修改器类似 .title, .caption 这样的字号设置字体，SwiftUI 会自动为你匹配对应平台的合适字号如果需要进行细致的调试，可以设置字体，字号，是否有衬线等等。下面使用一个基本的文字设置为标题样式：

Text("55mx 网络人")
    .font(.title)

也可以利用 .bold 或 .italic 进行加粗或使用斜体：

 Text("http://www.55mx.com/")
      .font(.system(size: 12, weight: .light, design: .serif))
      .italic()//设置为斜体
      .lineLimit(1)//占用几行的高度

Text 会占据显示其内容所必需的空间。不过你可以调整内容的布局。例如，你可以用 .frame 来控制视图的某一个维度，Text 会自适应的调整布局：

Text("生存还是毁灭，这是一个值得思考的问题！")
     //宽度只有100，高度10，内容超过部分会被隐藏
     .frame(width: 100,height: 20)
     .padding()//在背影前填充
     .background(Color.blue)//设置背景颜色
     .foregroundColor(.white)//设置文字颜色

你还可以用 .lineLimit, .allowsTightening, .minimumScaleFactor, .trancationMode 等 modifier 控制显示的内容。

可以这样使用非系统默认的字体，在 UIFont.familyNames 中可以查看所有可以使用的字体

Text("自定义字体")
     .font(.custom("Menlo", size: 17))

这里的小示例有文字处理：http://www.55mx.com/ios/110.html

二、Label 带图标的文本

Label 是一个用户界面项的标准标签，由带标题的图标组成。也可以还是图片的名字,还可以是一个自己画的图形。图标和标签的组合是最常见和可识别的用户界面组件之一。这种习惯用法出现在许多类型的应用程序中，并出现在集合、列表、操作项菜单和可公开列表中，这里仅举几个例子。

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

Label("闪电", systemImage: "bolt.fill")

可以用 .labelStyle 来设置 Label 的样式，系统内置了TitleOnlyLabelStyle只显示标题与IconOnlyLabelStyle只显示图标。labelStyle和GroupBoxStyle一样支持自定义的样式。

VStack {
    //TitleOnlyLabelStyle只显示标题，无图标
    Label("闪电", systemImage: "bolt.fill")
        .labelStyle(TitleOnlyLabelStyle())
    // 或者只显示图标不显示标题
    Label("闪电", systemImage: "bolt.fill")
        .labelStyle(IconOnlyLabelStyle())
    // 也可以利用 LabelStyle 协议，自定义 Label 样式
    Label("闪电", systemImage: "bolt.fill")
        .labelStyle(MyLabelStyle())
}

我们自己定义的样式需要遵循LabelStyle协议即可。

//自己定义的样式
struct MyLabelStyle : LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        Label(configuration)
            .border(Color.red)//设置Label边框为红色
    }
}

可以批量对Label样式进行定义操作：

VStack {
    Label("雨", systemImage: "cloud.rain")
    HStack {
        Label("雪", systemImage: "snow")
        Label("太阳", systemImage: "sun.max")
    }
}
// 对于成组的 Label，只需要在最外层使用 .labelStyle 就可以更改组内所有的样式了
.labelStyle(IconOnlyLabelStyle())

Label 还支持我们自己绘制图标，注意到展示的内容也可以是多个视图的组合。

Label {
    Text("Kwok")
        .font(.body)
        .foregroundColor(.primary)
    Text("Mr.Guo")
        .font(.subheadline)
        .foregroundColor(.secondary)
        .clipShape(Capsule())//设置此视图的剪切为胶囊形状。
} icon: {
    Circle()//绘制一个圆
        .fill(Color.purple)//设为紫色
        .frame(width: 50, height: 50, alignment: .center)
        .overlay(Text("KM").foregroundColor(.white))
}

 Label更多使用方式请参考：http://www.55mx.com/ios/167.html

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/124