Text組件：用于顯示文本內(nèi)容

示例1：Text("Hello, World!")，顯示"Hello, World!"文本
示例2：Text("Your score is (score)")，顯示帶變量的文本，其中score是一個(gè)整數(shù)變量

SecureField組件：用于輸入敏感信息（例如密碼）的文本框

示例1：SecureField("Password", text: $password)，創(chuàng)建一個(gè)帶有“Password”標(biāo)簽的安全文本框，用戶可以在其中輸入密碼。此示例中的$password是一個(gè)綁定變量，它將保存用戶輸入的密碼。
示例2：SecureField("", text: $password).textFieldStyle(RoundedBorderTextFieldStyle()), 創(chuàng)建一個(gè)帶有圓角邊框樣式的安全文本框，沒有標(biāo)簽，用戶可以在其中輸入密碼。這個(gè)例子展示了如何使用textFieldStyle()方法來應(yīng)用自定義文本框樣式。

Label組件：用于將標(biāo)簽與內(nèi)容組合在一起

示例1：Label("Save", systemImage: "square.and.arrow.down"), 創(chuàng)建一個(gè)帶有系統(tǒng)圖像“square.and.arrow.down”的標(biāo)簽，“Save”是標(biāo)簽的文本內(nèi)容。
示例2：Label { Text("Edit") Text("Document") } icon: { Image(systemName: "doc") }, 創(chuàng)建一個(gè)標(biāo)簽，其中包含文本“Edit”和“Document”，以及系統(tǒng)圖像“doc”。

Image組件：用于顯示圖像

示例1：Image("example")，顯示名為"example"的本地圖像
示例2：Image("[https://xxx.jpg")，顯示遠(yuǎn)程圖像，其中"https://xxx.jpg"是圖像的URL

AsyncImage：用于異步加載圖像的視圖

示例1：AsyncImage(url: URL(string: "[https://example.com/image.png](https://example.com/image.png)"), placeholder: { Text("Loading ...") }, image: { Image(uiImage: $0).resizable() }), 創(chuàng)建一個(gè)異步圖像視圖，用于加載指定URL的圖像。在圖像加載完成之前，將顯示一個(gè)“Loading ...”文本視圖。
示例2：AsyncImage(url: URL(string: "[https://example.com/image.png](https://example.com/image.png)"), transaction: Transaction(animation: .spring())) { phase in switch phase { case .empty: ProgressView() case .success(let image): image.resizable() case .failure(_): Image(systemName: "exclamationmark.icloud.fill") } }, 創(chuàng)建一個(gè)異步圖像視圖，用于加載指定URL的圖像。這個(gè)例子中的視圖是可變的，并在加載過程中顯示進(jìn)度視圖。如果加載失敗，將顯示一個(gè)帶有感嘆號的圖標(biāo)。

Button組件：用于創(chuàng)建交互式按鈕

示例1：Button("Click me!") { print("Button clicked!") }，創(chuàng)建一個(gè)按鈕，當(dāng)按鈕被點(diǎn)擊時(shí)，輸出"Button clicked!"
示例2：Button(action: startGame) { Text("Start game") }，創(chuàng)建一個(gè)按鈕，當(dāng)按鈕被點(diǎn)擊時(shí)調(diào)用startGame函數(shù)，并顯示"Start game"文本

EditButton：一個(gè)按鈕，用于觸發(fā)編輯模式，可以在此模式下編輯列表和其他視圖

示例1：NavigationView { List { ForEach(items) { item in Text(item) }.onDelete(perform: delete) } .navigationBarTitle("Items") .navigationBarItems(trailing: EditButton()) }, 使用EditButton將列表視圖轉(zhuǎn)換為可編輯模式，并將其放置在導(dǎo)航欄的右側(cè)。
示例2：VStack { Text("Hello, world!") Spacer() EditButton() }, 在一個(gè)垂直的StackView中使用EditButton，以便用戶可以通過點(diǎn)擊該按鈕將其放置在可編輯模式下。

TextField組件：用于接受用戶輸入的文本

示例1：TextField("Enter your name", text: $name)，創(chuàng)建一個(gè)文本框，讓用戶輸入他們的名字，并將輸入的文本存儲在名為name的變量中
示例2：TextField("Enter your password", text: $password).textFieldStyle(RoundedBorderTextFieldStyle())，創(chuàng)建一個(gè)帶有圓角邊框的文本框，讓用戶輸入他們的密碼，并將輸入的文本存儲在名為password的變量中

Toggle組件：用于創(chuàng)建開關(guān)按鈕

示例1：Toggle("Toggle me", isOn: $toggleValue)，創(chuàng)建一個(gè)帶有標(biāo)簽的切換按鈕，并將其狀態(tài)存儲在名為toggleValue的布爾變量中
示例2：Toggle(isOn: $isDarkMode) { Text("Dark mode") }，創(chuàng)建一個(gè)切換按鈕，當(dāng)按鈕被打開時(shí)，應(yīng)用程序進(jìn)入暗模式，并顯示"Dark mode"文本

Slider組件：用于創(chuàng)建滑塊

示例1：Slider(value: $sliderValue, in: 0...10)，創(chuàng)建一個(gè)滑塊，將其值存儲在名為sliderValue的變量中，并將其范圍設(shè)置為0到10
示例2：Slider(value: $fontSize, in: 12...24, step: 2) { Text("Font size: (fontSize)") }，創(chuàng)建一個(gè)滑塊，當(dāng)滑塊的值改變時(shí)，將字體大小存儲在名為fontSize的變量中，并顯示"Font size: xx"文本，其中xx是字體大小的值

NavigationView組件：用于創(chuàng)建具有導(dǎo)航功能的視圖

示例1：NavigationView { Text("Hello, World!") }，創(chuàng)建一個(gè)帶有"Hello, World!"文本的視圖，并添加導(dǎo)航功能
示例2：NavigationView { List(items) { Text($(item) } }，創(chuàng)建一個(gè)帶有列表視圖的導(dǎo)航視圖，其中items是一個(gè)包含多個(gè)項(xiàng)目的數(shù)組，每個(gè)項(xiàng)目都會顯示為列表中的一個(gè)行文本。

VStack和HStack組件：用于垂直和水平布局子視圖

示例1：VStack(alignment: .leading, spacing: 10) { Text("Title") Text("Subtitle") }，創(chuàng)建一個(gè)垂直堆棧，其中包含標(biāo)題和副標(biāo)題文本，標(biāo)題文本位于上方，副標(biāo)題文本位于下方，兩個(gè)文本之間的間距為10個(gè)點(diǎn)。
示例2：HStack { Image("icon") Text("Label") }，創(chuàng)建一個(gè)水平堆棧，其中包含圖像和標(biāo)簽文本，圖像位于標(biāo)簽文本的左側(cè)。

List組件：用于創(chuàng)建列表視圖

示例1：List(items) { Text($0) }，創(chuàng)建一個(gè)簡單的列表視圖，其中items是一個(gè)包含字符串的數(shù)組，每個(gè)字符串都會顯示為一個(gè)列表行文本。
示例2：List(tasks) { task in TaskView(task: task) }，創(chuàng)建一個(gè)包含多個(gè)任務(wù)視圖的列表視圖，其中tasks是一個(gè)包含多個(gè)任務(wù)對象的數(shù)組，TaskView是一個(gè)自定義的視圖組件，用于顯示單個(gè)任務(wù)。

Form組件：用于創(chuàng)建表單視圖

示例1：Form { TextField("Name", text: $name) TextField("Email", text: $email) }，創(chuàng)建一個(gè)包含姓名和電子郵件文本字段的簡單表單視圖。
示例2：Form { Toggle("Dark mode", isOn: $isDarkMode) Section(header: Text("Settings")) { TextField("Username", text: $username) TextField("Password", text: $password) } }，創(chuàng)建一個(gè)包含切換按鈕和用戶名/密碼輸入的表單視圖，切換按鈕用于切換暗模式，用戶名和密碼輸入包含在一個(gè)包含標(biāo)題的部分中。

Alert組件：用于創(chuàng)建警報(bào)框視圖

示例1：Button("Show Alert") { showAlert.toggle() } .alert(isPresented: $showAlert) { Alert(title: Text("Alert"), message: Text("This is an alert"), dismissButton: .default(Text("OK"))) }，創(chuàng)建一個(gè)按鈕，單擊后顯示一個(gè)帶有標(biāo)題，消息和一個(gè)“OK”按鈕的警報(bào)框視圖。
示例2：Alert(title: Text("Delete"), message: Text("Are you sure you want to delete this item?"), primaryButton: .destructive(Text("Delete")) { deleteItem() }, secondaryButton: .cancel())，創(chuàng)建一個(gè)帶有警告消息，一個(gè)紅色的“刪除”按鈕和一個(gè)“取消”按鈕的警報(bào)框視圖，用于在用戶確認(rèn)刪除操作之前進(jìn)行確認(rèn)。

ActionSheet組件：用于創(chuàng)建操作表視圖

示例1：Button("Show Action Sheet") { showActionSheet.toggle() } .actionSheet(isPresented: $showActionSheet) { ActionSheet(title: Text("Actions"), message: Text("Choose an action"), buttons: [.default(Text("Action 1")), .default(Text("Action 2")), .cancel()]) }，創(chuàng)建一個(gè)按鈕，單擊后顯示一個(gè)操作表視圖，其中包含兩個(gè)默認(rèn)操作和一個(gè)“取消”按鈕。
示例2：ActionSheet(title: Text("Share"), message: Text("Choose a sharing option"), buttons: [.default(Text("Share on Facebook")) { shareOnFacebook() }, .default(Text("Share on Twitter")) { shareOnTwitter() }, .default(Text("Share via Email")) { shareViaEmail() }, .cancel()])，創(chuàng)建一個(gè)帶有標(biāo)題和消息的操作表視圖，其中包含三個(gè)不同的共享選項(xiàng)按鈕和一個(gè)“取消”按鈕。每個(gè)按鈕上的操作會調(diào)用不同的分享函數(shù)。

TabView組件：用于創(chuàng)建帶有多個(gè)標(biāo)簽頁的視圖

示例1：TabView { Text("Tab 1") .tabItem { Image(systemName: "star") Text("Tab 1") } Text("Tab 2") .tabItem { Image(systemName: "heart") Text("Tab 2") } }，創(chuàng)建一個(gè)帶有兩個(gè)標(biāo)簽頁的視圖，每個(gè)標(biāo)簽頁都包含一個(gè)文本視圖和一個(gè)圖標(biāo)，用于切換不同的視圖內(nèi)容。
示例2：TabView(selection: $selectedTab) { ForEach(tabs) { tab in TabContentView(tab: tab) .tabItem { Image(tab.icon) Text(tab.title) } } }，創(chuàng)建一個(gè)具有多個(gè)標(biāo)簽頁的視圖，其中每個(gè)標(biāo)簽頁都具有自定義的圖標(biāo)和標(biāo)題，并在選定標(biāo)簽頁時(shí)顯示對應(yīng)的內(nèi)容視圖。

NavigationLink組件：用于在導(dǎo)航視圖中創(chuàng)建可點(diǎn)擊的鏈接

示例1：NavigationLink(destination: DetailView()) { Text("Go to Detail View") }，創(chuàng)建一個(gè)可點(diǎn)擊的鏈接，單擊后將導(dǎo)航到名為“DetailView”的目標(biāo)視圖。
示例2：ForEach(items) { item in NavigationLink(destination: ItemDetailView(item: item)) { Text(item.name) } }，創(chuàng)建一個(gè)帶有多個(gè)鏈接的列表視圖，每個(gè)鏈接都導(dǎo)航到一個(gè)名為“ItemDetailView”的目標(biāo)視圖，該視圖顯示有關(guān)該項(xiàng)的詳細(xì)信息。

Picker：一個(gè)視圖，用于在一個(gè)列表中顯示一組選項(xiàng)，并允許用戶選擇其中一個(gè)選項(xiàng)。

示例1：Picker("Fruit", selection: $selectedFruit) { ForEach(fruits, id: .self) { Text($0) } }，創(chuàng)建一個(gè)Picker，用于在一個(gè)水果列表中選擇一個(gè)選項(xiàng)，并將選擇的選項(xiàng)綁定到名稱為“selectedFruit”的綁定變量中。 示例2：Picker(selection: $selectedColor, label: Text("Color")) { ForEach(colors, id: .self) { Text($0) } }.pickerStyle(.segmented)，創(chuàng)建一個(gè)Picker，用于在一組顏色中選擇一個(gè)選項(xiàng)，并將選擇的選項(xiàng)綁定到名稱為“selectedColor”的綁定變量中。使用.segmented樣式使Picker的外觀更改為分段控件樣式。

DatePicker組件：用于創(chuàng)建日期選擇器

示例1：DatePicker("Select a date", selection: $selectedDate, displayedComponents: .date)，創(chuàng)建一個(gè)日期選擇器，用戶可以選擇日期，該日期將存儲在名為“selectedDate”的綁定變量中。
示例2：DatePicker("Select a time", selection: $selectedTime, displayedComponents: .hourAndMinute)，創(chuàng)建一個(gè)時(shí)間選擇器，用戶可以選擇時(shí)間，該時(shí)間將存儲在名為“selectedTime”的綁定變量中。

Stepper組件：用于創(chuàng)建步進(jìn)器視圖

示例1：Stepper("Value: (value)", value: $value)，創(chuàng)建一個(gè)步進(jìn)器視圖，用戶可以單擊“+”或“-”按鈕來增加或減少值，該值將存儲在名為“value”的綁定變量中。
示例2：Stepper(onIncrement: { incrementValue() }, onDecrement: { decrementValue() }) { Text("Value: (value)") }，創(chuàng)建一個(gè)自定義的步進(jìn)器視圖，當(dāng)用戶單擊“+”或“-”按鈕時(shí)，分別調(diào)用兩個(gè)不同的函數(shù)來增加或減少值，并在視圖中顯示當(dāng)前值。

ProgressView組件：用于顯示進(jìn)度條或輪廓視圖

示例1：ProgressView()，創(chuàng)建一個(gè)默認(rèn)樣式的進(jìn)度條視圖。
示例2：ProgressView("Loading...")，創(chuàng)建一個(gè)帶有標(biāo)簽“Loading...”的進(jìn)度條視圖。

ScrollView組件：用于創(chuàng)建可滾動(dòng)的視圖

示例1：ScrollView { Text("Scrollable content") }

ColorPicker組件：用于創(chuàng)建顏色選擇器

示例1：ColorPicker("Select a color", selection: $selectedColor)，創(chuàng)建一個(gè)顏色選擇器，當(dāng)用戶選擇顏色時(shí)，將觸發(fā)綁定變量“selectedColor”的值更改，并在選擇器旁邊顯示標(biāo)簽“Select a color”。
示例2：ColorPicker(selection: $selectedColor, supportsOpacity: true)，創(chuàng)建一個(gè)顏色選擇器，支持選擇不透明度，并且不顯示標(biāo)簽。

VideoPlayer組件：用于在應(yīng)用程序中播放視頻

示例1：VideoPlayer(player: player) ，創(chuàng)建一個(gè)視頻播放器，其中“player”是一個(gè)包含要播放的視頻的AVPlayer實(shí)例。
示例2：VideoPlayer(player: player, controls: .custom(actions: { CustomControls() }))，創(chuàng)建一個(gè)視頻播放器，自定義播放器控件。

MapView組件：用于在應(yīng)用程序中顯示地圖

示例1：MapView(coordinate: CLLocationCoordinate2D(latitude: 37.3318, longitude: -122.005))，創(chuàng)建一個(gè)地圖視圖，其中心點(diǎn)坐標(biāo)為經(jīng)度37.3318，緯度-122.005的位置。
示例2：MapView(coordinateRegion: $region)，創(chuàng)建一個(gè)地圖視圖，其中心點(diǎn)坐標(biāo)和縮放比例由綁定變量“region”控制。

Gauge：用于顯示某個(gè)值相對于給定范圍的百分比。它可以是一個(gè)圓形或者一個(gè)半圓形。

示例1：Gauge(value: progress, in: 0...100)。創(chuàng)建一個(gè)圓形的Gauge，用于顯示進(jìn)度百分比，progress是0到100之間的值，in參數(shù)表示Gauge的范圍。
示例2：Gauge(value: progress, in: 0...100, label: { Text("(Int(progress))%") })。創(chuàng)建一個(gè)圓形的Gauge，用于顯示進(jìn)度百分比，progress是0到100之間的值，in參數(shù)表示Gauge的范圍。同時(shí)，定義一個(gè)標(biāo)簽，用于在Gauge中心顯示進(jìn)度百分比。

Menu組件：用于創(chuàng)建菜單

示例1：Menu(content: { Text("Menu item 1") Text("Menu item 2") }, label: { Text("Menu") })，創(chuàng)建一個(gè)菜單，包含兩個(gè)菜單項(xiàng)“Menu item 1”和“Menu item 2”，并在標(biāo)簽中顯示文本“Menu”。
示例2：Menu(content: { Button("Delete") { delete() } }, trigger: .init(label: { Text("More") }))，創(chuàng)建一個(gè)菜單，包含一個(gè)按鈕“Delete”，單擊后調(diào)用“delete”函數(shù)，并在標(biāo)簽中顯示文本“More”。

Link組件：用于創(chuàng)建鏈接

示例1：Link("Open SwiftUI documentation", destination: URL(string: "[https://developer.apple.com/documentation/swiftui](https://developer.apple.com/documentation/swiftui)")!) ，創(chuàng)建一個(gè)鏈接，顯示文本“Open SwiftUI documentation”，單擊后打開目標(biāo)URL地址。
示例2：Link(destination: URL(string: "[https://developer.apple.com/documentation/swiftui](https://developer.apple.com/documentation/swiftui)")!) { Text("Learn more about SwiftUI") }，創(chuàng)建一個(gè)鏈接，顯示文本“Learn more about SwiftUI”，單擊后打開目標(biāo)URL地址。

ShareLink：一個(gè)視圖，用于共享鏈接或其他內(nèi)容

示例1：Button(action: shareLink) { Text("Share Link") }, 在一個(gè)按鈕中使用ShareLink來觸發(fā)共享視圖，并使用shareLink方法來定義共享內(nèi)容。
示例2：ShareLink(destination: URL(string: "[https://www.example.com](https://www.example.com/)")!, label: { Text("Share Link") }), 使用ShareLink在視圖中顯示一個(gè)可共享的鏈接，并將該鏈接標(biāo)記為標(biāo)簽。

WebView組件：用于顯示W(wǎng)eb內(nèi)容

示例1：WebView(url: URL(string: "[https://www.apple.com")!)，創(chuàng)建一個(gè)WebView組件，加載指定的URL。](https://www.apple.xn--com%22%29%21%29%2Cwebview%2Curl-qr76b28ac6nzm2a6zdy61h77xamo5auv0ms1rcb2uh./)
示例2：WebView(htmlString: "<h1>Hello, World!</h1>")，創(chuàng)建一個(gè)WebView組件，顯示指定的HTML字符串。

Spacer組件：用于占用可用空間

示例1：HStack { Text("Left") Spacer() Text("Right") }，創(chuàng)建一個(gè)水平棧視圖，左邊是文本“Left”，右邊是文本“Right”，使用Spacer()占用中間可用的空間。
示例2：VStack { Text("Top") Spacer() Text("Bottom") }，創(chuàng)建一個(gè)垂直棧視圖，上面是文本“Top”，下面是文本“Bottom”，使用Spacer()占用中間可用的空間。

若還有沒想到的組件，請?jiān)谠u論中告訴我，我繼續(xù)完善