- SwiftUI 教程
- SwiftUI - 首頁
- SwiftUI - 概述
- SwiftUI vs UIKit
- SwiftUI 環境
- SwiftUI - 環境設定
- SwiftUI - 基本元件
- SwiftUI - 構建第一個應用程式
- SwiftUI 檢視
- SwiftUI - 檢視
- SwiftUI - 自定義文字檢視
- SwiftUI - 自定義影像檢視
- SwiftUI - 堆疊
- SwiftUI 繪製形狀
- SwiftUI - 形狀
- SwiftUI - 繪製線條
- SwiftUI - 繪製矩形
- SwiftUI - 繪製圓角矩形
- SwiftUI - 繪製三角形
- SwiftUI - 繪製圓形
- SwiftUI - 繪製星形
- SwiftUI - 繪製多邊形
- SwiftUI - 繪製餅圖
- SwiftUI - 使用內建形狀
- SwiftUI - 文字
- SwiftUI - 文字檢視
- SwiftUI - 文字輸入和輸出
- SwiftUI - 顏色
- SwiftUI - 顏色
- SwiftUI - 顏色選擇器
- SwiftUI - 漸變
- SwiftUI - 調整顏色
- SwiftUI - 效果
- SwiftUI - 效果
- SwiftUI - 混合效果
- SwiftUI - 模糊效果
- SwiftUI - 陰影效果
- SwiftUI - 懸停效果
- SwiftUI - 動畫
- SwiftUI - 動畫
- SwiftUI - 建立動畫
- SwiftUI - 建立顯式動畫
- SwiftUI - 多個動畫
- SwiftUI - 轉場
- SwiftUI - 非對稱轉場
- SwiftUI - 自定義轉場
- SwiftUI - 圖片
- SwiftUI - 影像
- SwiftUI - 圖片作為背景
- SwiftUI - 旋轉影像
- SwiftUI - 媒體
- SwiftUI - 檢視佈局
- SwiftUI - 檢視佈局
- SwiftUI - 檢視大小
- SwiftUI - 檢視間距
- SwiftUI - 檢視填充
- SwiftUI - 列表和表格
- SwiftUI - 列表
- SwiftUI - 靜態列表
- SwiftUI - 動態列表
- SwiftUI - 自定義列表
- SwiftUI - 表格
- SwiftUI - 表單
- SwiftUI - 表單
- SwiftUI - 將表單分成多個部分
- SwiftUI 有用資源
- SwiftUI - 有用資源
- SwiftUI - 討論
SwiftUI - 檢視
在 SwiftUI 中,檢視是用於建立應用程式使用者介面的基本構建塊。單個應用程式可以包含多個檢視,每個檢視都包含對螢幕上將顯示內容的描述。我們在螢幕上看到的任何內容都源自檢視中給出的描述。
檢視是值型別,而不是指標型別。檢視很輕量級,並且始終存在於層次結構中。
在 SwiftUI 中建立檢視
要建立檢視,我們必須定義一個符合View協議的結構體。View 協議負責如何在應用程式的檢視上顯示什麼內容。View 協議使用body屬性來定義檢視的內容。我們可以使用內建檢視或自定義檢視來建立檢視。請按照以下步驟建立一個簡單的檢視:
步驟 1:匯入 SwiftUI
首先在專案中匯入 SwiftUI 來建立檢視。
import SwiftUI
步驟 2:定義符合 View 協議的結構體
現在定義一個符合 View 協議的結構體。它就像一個藍圖,描述了功能。符合該檢視的結構體必須滿足協議提供的功能。之後,您可以將自定義檢視新增到檢視層次結構中,使其成為應用程式的一部分。
struct ContentView: View {
}
步驟 3:實現 body 屬性
建立結構體後,我們必須實現 body 屬性。此 body 屬性是 View 協議的主要要求,它描述了檢視的佈局和內容。
在 SwiftUI 中,我們不需要顯式宣告 body 屬性,而是使用 some View 語法宣告 body 屬性,此語法表示 body 型別符合 View。body 的型別取決於 body 的內容,可以在開發過程中進行編輯,或者可以說 Swift 會自動推斷型別。
在這裡,我們可以使用內建檢視或自定義檢視來建立應用程式的使用者介面。此外,我們可以藉助 SwiftUI 提供的修飾符來配置檢視的外觀。這些修飾符只不過是與特定檢視關聯的方法。
import SwiftUI
struct ContentView: View {
var body: some View {
// Code..
}
}
步驟 4:將檢視新增到檢視層次結構
在 SwiftUI 中,我們可以透過將其宣告到將在層次結構中顯示的位置來將檢視新增到其他檢視中。
import SwiftUI
struct ContentView: View {
var body: some View {
MyNewView(x:.title)
}
}
步驟 5:預覽
我們可以藉助 #Preview 檢視檢視的預覽。
#Preview {
ContentView()
}
以下 SwiftUI 程式用於建立一個簡單的檢視。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack{
Rectangle()
.fill(Color.gray)
.frame(width: 200, height: 100)
.overlay((Text("TutorialsPoint").font(.title)))
}
}
}
#Preview {
ContentView()
}
輸出
SwiftUI 中的內建檢視
SwiftUI 提供了廣泛的檢視,用於建立動態且響應迅速的使用者介面。這些檢視具有廣泛的功能和修飾符。一些常用的內建檢視如下:
| 檢視 | 描述 |
|---|---|
| Text("Some Text") | 用於顯示文字。 |
| Image("image") | 用於顯示影像。 |
| Button(action:) | 用於顯示一個可點選的按鈕,點選時執行操作。 |
| Toggle(isOn:) | 用於建立一個切換開關。 |
| Slider(value:, in:) | 用於建立一個滑塊,從給定範圍內選擇一個值。 |
| TextField("name", text:) | 允許使用者輸入和編輯資料。 |
| List() | 用於顯示一個可滾動的列表。 |
| Form() | 用於建立一個表單,從使用者那裡獲取輸入。 |
| Spacer() | 用於在檢視之間新增空間。 |
| ScrollView | 用於為其子檢視建立一個可滾動的容器。 |