SwiftUI - 文字檢視

上一頁
下一頁

SwiftUI - 文字檢視

文字檢視在 SwiftUI 中顯示一行或多行靜態文字或字串。它是開發者最常用的構建塊，用於在使用者介面上顯示文字資料。此檢視顯示的文字是隻讀的，這意味著不允許編輯文字。

如果要顯示動態文字，則需要使用帶有變數的文字。我們可以藉助 SwiftUI 提供的預定義修飾符來更改 Text 檢視的外觀和行為。在本章中，我們將學習如何實現文字檢視以及如何自定義文字檢視。

語法

以下是語法：

Text("Hello SwiftUI")

示例

下面的 SwiftUI 程式用於在檢視上顯示靜態文字。

import SwiftUI

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

輸出

Text View

多行文字

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

輸出

Text View

自定義文字檢視

自定義文字檢視意味著我們可以更改文字的外觀，包括文字顏色、背景顏色、字型樣式、對齊方式、行間距等，在使用者介面中。我們可以使用以下修飾符更改文字的外觀以適應介面的所需設計：

  • 字型
  • 字型樣式
  • 對齊方式
  • 顏色
  • 行間距
  • 行限制

讓我們詳細討論這些修飾符以及示例：

自定義字型

我們可以藉助字型修飾符來自定義文字檢視的字型。我們可以透過兩種不同的方式使用此修飾符：

基本字型樣式：此修飾符支援系統已支援的預定義樣式，它們是：.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()
}

輸出

Text View

自定義字型樣式

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

輸出

Text View

文字對齊

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

輸出

Text View

自定義顏色

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

輸出

Text View

行間距

要在行之間新增額外的空間，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()
}

輸出

Text View

行限制

為了限制在使用者介面上顯示的行數，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()
}

輸出

Text View
列印頁面
上一頁
下一頁
廣告