SwiftUI - 文本视图

文本视图在 SwiftUI 中显示一行或多行静态文本或字符串。它是开发者最常用的构建块，用于在用户界面上显示文本数据。此视图显示的文本是只读的，这意味着不允许编辑文本。

如果要显示动态文本，则需要使用带有变量的文本。我们可以借助 SwiftUI 提供的预定义修饰符来更改 Text 视图的外观和行为。在本章中，我们将学习如何实现文本视图以及如何自定义文本视图。

语法

以下是语法：

Text("Hello SwiftUI")

示例

下面的 SwiftUI 程序用于在视图上显示静态文本。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Text("Hello SwiftUI")
   }
}
#Preview {
   ContentView()
}

输出

多行文本

在 SwiftUI 中，我们可以使用文本视图显示单行或多行文本或一段落。它还提供诸如 .multilineTextAlignment、lineLimit、.foregroundStyle 等修饰符来自定义用户界面中多行文本的外观。

示例

下面的 SwiftUI 程序用于在视图上显示多行文本。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Text("Text Chapter: This chapter explains how we will display text in the view. It also explains how we can customize the text according to the requirement of the design. ").font(.headline)
   }
}
#Preview {
   ContentView()
}

输出

自定义文本视图

自定义文本视图意味着我们可以更改文本的外观，包括文本颜色、背景颜色、字体样式、对齐方式、行间距等，在用户界面中。我们可以使用以下修饰符更改文本的外观以适应界面的所需设计：

字体
字体样式
对齐方式
颜色
行间距
行限制

让我们详细讨论这些修饰符以及示例：

自定义字体

我们可以借助字体修饰符来自定义文本视图的字体。我们可以通过两种不同的方式使用此修饰符：

基本字体样式：此修饰符支持系统已支持的预定义样式，它们是：.title、.largeTitle、.title2、.title3、.headline、.subheadline、.body、.caption、.caption2 等。以下是语法：

.font(.title)

自定义字体：我们还可以借助 .font() 修饰符创建自定义字体。在这里，我们可以指定字体的尺寸、粗细、设计等。以下是语法：

.font(.system(size: 30, weight: .bold))

示例

下面的 SwiftUI 程序用于更改文本视图中存在的文本的字体。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Text("Hello SwiftUI").font(.headline)
      Text("Hello Swift").font(.system(size: 60, weight: .thin))
   }
}
#Preview {
   ContentView()
}

输出

自定义字体样式

SwiftUI 提供各种修饰符来设置文本视图中存在的文本的样式。使用这些修饰符，我们可以调整字体的粗细、设计、大小等。一些常用的字体样式如下：

修饰符名称	语法	描述
字体粗细	.fontWeight()->Text	此修饰符用于指定给定文本的字体粗细。它只接受一个参数 weight，其值可以是：.black、.bold、.heavy、.light、.medium、.regular、.semibold、.thin、.ultraLight。
斜体	.italic()	用于将斜体应用于文本。
下划线	.underLine()-> Text	用于为文本添加下划线。它接受两个参数：isActive 参数的值表示文本是否有下划线，而 color 用于表示下划线的颜色。默认颜色为黑色。
删除线	.strikethrough()-> Text	用于为文本添加删除线。它接受两个参数：isActive 参数的值表示文本是否应用了删除线，而 color 用于表示删除线的颜色。默认颜色为黑色。
字距	.kerning()-> Text	用于设置一行中每个字符之间的间距。它只接受一个参数，该参数表示每个字符之间的空间量。此修饰符的默认值为 0。
粗体	.bold()	用于将文本加粗。

示例

下面的 SwiftUI 程序用于设置文本视图中存在的文本的样式。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Text("Hello SwiftUI")
         .fontWeight(.heavy)
         .italic()
         .underline(true, color: .green)
         .padding(10)
      Text("Hello Swift")
         .strikethrough()
         .kerning(3.0)
         .bold()
   }
}
#Preview {
   ContentView()
}

输出

文本对齐

在 SwiftUI 中，对齐用于指定文本在给定容器或视图内的位置。我们可以使用以下任何修饰符来更改给定文本的对齐方式：

.frame() 修饰符

这用于指定视图在不可见框架内的位置。以下是语法：

.frame(width:CGFloat, height:CGFloat, alignment: Alignment)

它接受以下参数：

width：用于设置框架的宽度。如果此参数的值为 nil，则框架的宽度将根据视图的大小行为进行设置。
height：用于设置框架的高度。如果此参数的值为 nil，则框架的高度将根据视图的大小行为进行设置。
Alignment：用于设置视图在框架内的对齐方式。此参数的值可以是以下任何一个：.topLeading、.top、.topTrailing、.leading、.center、.trailing、.bottomLeading、.bottom、.bottomTrailing。

multilineTextAlignment(_:) 修饰符

这用于设置文本视图中多行的对齐方式。以下是语法：

.multilineTextAlignment(_alignment: TextAlignement) -> some View

这只接受一个参数 alignment。此参数的值可以是以下任何一个：.leading、.trailing 和 .center。

示例

下面的 SwiftUI 程序用于对齐视图上的文本。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Text("Hello SwiftUI")
         .frame(width: 100, height: 100, alignment: .bottomTrailing)
      Text("Text Chapter: This chapter explains how we will display text in the view. It also explains how we can customize the text according to the requirement of the design. ")
         .multilineTextAlignment(.trailing)
   }
}
#Preview {
   ContentView()
}

输出

自定义颜色

在 SwiftUI 中，我们可以通过更改文本颜色和背景颜色来增强文本的外观。我们可以使用以下修饰符来更改文本的颜色：

.foregroundStyle(_:) 修饰符：此修饰符用于设置前景文本/元素的样式。以下是语法：
```
.foregroundStyle<S>(_style:S)-> some View where S : ShapeStyle
```
此修饰符只接受一个参数 style。此处 style 表示前景文本/元素的颜色或图案。

要更改文本的颜色，我们在此修饰符中使用 Color.colorName 属性，它会更改文本的颜色。除了 Color 之外，image() 和 linearGradient() 也是 foregroundstyle 修饰符的属性。
.background(_:) 修饰符：此修饰符用于设置文本视图的背景颜色。以下是语法：
```
.background(.colorName)
```
此修饰符接受我们想要用作文本背景的颜色名称。

示例

下面的 SwiftUI 程序用于设置视图上文本的背景色和前景色。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Text("Hello SwiftUI")
         .font(.largeTitle)
         .foregroundStyle(Color.red)
         .background(.mint)        
   }
}

#Preview {
   ContentView()
}

输出

行间距

要在行之间添加额外的空间，SwiftUI 提供了一个 .lineSpacing 修饰符。

语法

以下是语法：

.lineSpacing(_lineSpacing:CGFloat)-> some View

此修饰符只接受一个参数 lineSpacing。它表示一行底部和下一行顶部之间的额外空间量。

示例

下面的 SwiftUI 程序用于在文本视图中存在的行之间添加行间距。

import SwiftUI

struct ContentView: View {
   var body: some View {
        
      // Without line spacing
      Text("Text Chapter: This chapter explains how we will display text in the view. It also explains how we can customize the text according to the requirement of the design. ")
      .padding(10)
           
      // With line spacing
      Text("Text Chapter: This chapter explains how we will display text in the view. It also explains how we can customize the text according to the requirement of the design. ")
      .lineSpacing(10.0)
        
   }
}
#Preview {
   ContentView()
}

输出

行限制

为了限制在用户界面上显示的行数，SwiftUI 提供了一个名为 .lineLine(_:) 的修饰符。如果给定文本中的文本溢出，则它会在文本的最后一行末尾使用省略号(...)。

语法

以下是语法：

.lineLimit(_number: Int?)->some View

它只接受一个参数，该参数表示行限制的数字。如果此修饰符的值为 nil，则没有行限制。

示例

下面的 SwiftUI 程序用于限制文本视图中的行数。

import SwiftUI

struct ContentView: View {
   var body: some View {
        
      // Without line limit
      Text("Text Chapter: This chapter explains how we will display text in the view. It also explains how we can customize the text according to the requirement of the design. ")
          .padding(10)
      
      // With line limit
      Text("Text Chapter: This chapter explains how we will display text in the view. It also explains how we can customize the text according to the requirement of the design. ").lineLimit(2)        
   }
}

#Preview {
   ContentView()
}

输出

打印页面