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
