SwiftUI - 基本元件

SwiftUI 是 Apple 的框架，旨在用更少的程式碼和更好的效能為 Apple 的所有平臺（包括 iOS、macOS、watchOS、tvOS、visionOS 等）建立簡單和複雜的介面。

它使用宣告式語法，這意味著我們只需要描述使用者介面應該是什麼樣子以及它的行為方式，SwiftUI 會完成其餘的實現工作。為了建立一個豐富而動態的應用程式，SwiftUI 提供了以下基本元件：

現在，讓我們詳細討論每個元件：

SwiftUI 中的檢視

檢視是開發使用者介面的基本構建塊。或者我們可以說它是使用者介面的一部分，開發人員可以在其中定義介面的佈局和外觀。應用程式中使用者可見的每一部分都源自開發人員在檢視中給出的描述。任何符合 View 協議的型別都充當檢視。

名稱	描述	語法
文字	用於顯示文字。	Text("Hello TutorialsPoint")
影像	用於顯示影像。	Image(systemName: "rectangle")
按鈕	用於建立一個可點選的按鈕	Button(action: { print("Tapped button") }) { Text("Button") }
文字欄位	用於顯示文字欄位或建立可編輯的文字介面。	@State private var age: String = "" TextField("Enter your age", text: $age)

佈局和容器是控制子檢視排列方式的結構。一些常用的容器和佈局如下：

名稱	描述	語法
VStack	用於垂直堆疊子檢視。	VStack { Text("Hello") Text("TutorialsPoint") }
HStack	用於水平堆疊子檢視。	HStack { Text("Hello") Text("TutorialsPoint") }
ZStack	用於將子檢視重疊。	ZStack { Rectangle().fill(Color.mint) Text("TutorialsPoint") }
列表	用於顯示可滾動的列表資料。	List { Text("Hello") Text("TutorialsPoint") }
表單	用於對資料輸入控制元件進行分組。	Form { Toggle("Notification", isOn:$isOn) Toggle("Sliding Bar", isOn:$isOn) }

SwiftUI 中的修飾符是用於更改檢視外觀或行為的方法。我們可以按順序在一個元件上應用多個修飾符。使用它們，我們可以建立簡單和複雜的圖案。一些常用的修飾符如下：

狀態和資料繫結用於管理和傳播整個應用程式的資料。狀態用於管理檢視的狀態。每當狀態更新為新值時，SwiftUI 會根據新狀態自動更新檢視。

而繫結用於在 UI 元件及其底層資料模型之間建立關係。它使用雙向通訊。以下是一些常用的狀態和資料繫結物件：

名稱	描述	語法
@State	這是一個屬性包裝器，用於管理檢視內部的狀態	@State private var myState:Bool = false
@Binding	用於建立與父檢視中 @state 屬性的雙向連線。	@Binding var myState:Bool = false
@ObservedObject	用於在複雜資料模型中觀察外部可觀察檢視。	@ObservedObject var myData = MyObservableObject()
@EnvironmentObject	用於在 SwiftUI 層次結構中的所有檢視之間共享資料。	@EnvironmentObject var myData : MyObservableObject

導航是建立使用者介面的過程，它允許使用者在應用程式中從一個檢視移動到另一個檢視或螢幕。SwiftUI 提供了各種用於實現導航的工具，一些常用元件如下：

名稱	描述	語法
NavigationLink	用於控制導航呈現。	32
Sheet	用於顯示模態檢視。	.sheet(isPresented:)

手勢用於向檢視新增互動功能。它們允許使用者使用點選、拖動、滑動、旋轉等與應用程式互動。SwiftUI 支援各種內建手勢，您可以使用手勢修飾符在檢視中使用它們。一些常用的手勢如下：

列印頁面