1 Text

1.1 顯示一行或多行只讀文本的視圖。

Text("Hello World")

截屏2023-06-13 21.15.22.png

1.2 給文本添加 樣式, 粗體 斜體 下劃線,

Text("Hello World")
  .bold()
  .italic()
  .underline()
  .lineLimit(2)

截屏2023-06-13 21.20.10.png

1.3 Text 中提供的字符串也用作LocalizedStringKey，所以您可以自由獲得 NSLocalizedString 的行為。

截屏2023-06-13 21.52.22.png

1.4 在文本視圖中格式化文本。 實際上這不是 SwiftUI 功能，而是 Swift 5 字符串插值。

static let dateFormatter: DateFormatter = {
      let formatter = DateFormatter()
      formatter.dateStyle = .long
      return formatter
  }()
  
  var now = Date()
  
  var body: some View {
    VStack {
      Text("What time is it?: \(now, formatter: Self.dateFormatter)")
    }
    .padding()
  }

截屏2023-06-13 21.52.22.png

1.5 將 Text 與 + 連接在一起。

Text("Hello ") + Text("World!").bold() // 粗體

截屏2023-06-13 21.55.30.png

1.6 文本對齊

Text("Hello\nWorld!").multilineTextAlignment(.center)

截屏2023-06-13 21.58.18.png

2 Label

2.1 標(biāo)簽 是一種方便的視圖，可以將圖像和文本并排顯示。 適用于菜單項或設(shè)置。

您可以使用自己的圖像或 SF Symbol。

Label("Swift", image: "swift")
Label("Website", systemImage: "globe")

截屏2023-06-13 22.08.44.png

3 TextField. 顯示可編輯文本界面的控件。

@State var name: String = "John"
var body: some View {
    TextField("Name's placeholder", text: $name)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        .padding()
}

截屏2023-06-13 22.13.09.png

4 SecureField, 用戶可以安全地輸入密碼或者私有文本的控件。

@State var password: String = "1234"
var body: some View {
    SecureField("密碼", text: $password)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        .padding()
}

截屏2023-06-13 22.21.50.png

5 TextEditor, 一個可以顯示和編輯長文本的視圖。

@State private var fullText: String = "This is some editable text..."

var body: some View {
    TextEditor(text: $fullText)
}

截屏2023-06-13 22.16.20.png

7 Image, 顯示環(huán)境相關(guān)圖像的視圖。

Image(systemName: "globe")

截屏2023-06-13 22.39.46.png

7.1 我們可以使用新的 SF 符號, 可以為系統(tǒng)圖標(biāo)集添加樣式以匹配您使用的字體

Image(systemName: "clock.fill")      
      Image(systemName: "cloud.heavyrain.fill")
       .foregroundColor(.red)
       .font(.title)
      Image(systemName: "clock")
       .foregroundColor(.red)
       .font(Font.system(.largeTitle).bold())

截屏2023-06-13 22.41.30.png

7.2 給圖片添加樣式

Image(systemName: "clock.fill")
        .resizable() // it will sized so that it fills all the available space
        .aspectRatio(contentMode: .fit)

截屏2023-06-13 22.44.26.png