75142913在线留言
【SwiftUI基础篇】10 常用的文字处理视图 Text(文本)、Label(带图标的文本)_IOS开发_网络人

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

Kwok 发表于:2021-04-03 12:03:16 点击:4 评论: 0

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

一、Text 文字

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

Text("neter8 网络人")
    .font(.title)

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

 Text("http://www.neter8.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.neter8.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))
}

 

除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/ios/124.html
标签:文本Kwok最后编辑于:2021-04-03 13:03:09
0
感谢打赏!

《【SwiftUI基础篇】10 常用的文字处理视图 Text(文本)、Label(带图标的文本)》的网友评论(0)

本站推荐阅读

热门点击文章