Text组件：用于显示文本内容

示例1：Text("Hello, World!")，显示"Hello, World!"文本
示例2：Text("Your score is (score)")，显示带变量的文本，其中score是一个整数变量

SecureField组件：用于输入敏感信息（例如密码）的文本框

示例1：SecureField("Password", text: $password)，创建一个带有“Password”标签的安全文本框，用户可以在其中输入密码。此示例中的$password是一个绑定变量，它将保存用户输入的密码。
示例2：SecureField("", text: $password).textFieldStyle(RoundedBorderTextFieldStyle()), 创建一个带有圆角边框样式的安全文本框，没有标签，用户可以在其中输入密码。这个例子展示了如何使用textFieldStyle()方法来应用自定义文本框样式。

Label组件：用于将标签与内容组合在一起

示例1：Label("Save", systemImage: "square.and.arrow.down"), 创建一个带有系统图像“square.and.arrow.down”的标签，“Save”是标签的文本内容。
示例2：Label { Text("Edit") Text("Document") } icon: { Image(systemName: "doc") }, 创建一个标签，其中包含文本“Edit”和“Document”，以及系统图像“doc”。

Image组件：用于显示图像

示例1：Image("example")，显示名为"example"的本地图像
示例2：Image("[https://xxx.jpg")，显示远程图像，其中"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() }), 创建一个异步图像视图，用于加载指定URL的图像。在图像加载完成之前，将显示一个“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") } }, 创建一个异步图像视图，用于加载指定URL的图像。这个例子中的视图是可变的，并在加载过程中显示进度视图。如果加载失败，将显示一个带有感叹号的图标。

Button组件：用于创建交互式按钮

示例1：Button("Click me!") { print("Button clicked!") }，创建一个按钮，当按钮被点击时，输出"Button clicked!"
示例2：Button(action: startGame) { Text("Start game") }，创建一个按钮，当按钮被点击时调用startGame函数，并显示"Start game"文本

EditButton：一个按钮，用于触发编辑模式，可以在此模式下编辑列表和其他视图

示例1：NavigationView { List { ForEach(items) { item in Text(item) }.onDelete(perform: delete) } .navigationBarTitle("Items") .navigationBarItems(trailing: EditButton()) }, 使用EditButton将列表视图转换为可编辑模式，并将其放置在导航栏的右侧。
示例2：VStack { Text("Hello, world!") Spacer() EditButton() }, 在一个垂直的StackView中使用EditButton，以便用户可以通过点击该按钮将其放置在可编辑模式下。

TextField组件：用于接受用户输入的文本

示例1：TextField("Enter your name", text: $name)，创建一个文本框，让用户输入他们的名字，并将输入的文本存储在名为name的变量中
示例2：TextField("Enter your password", text: $password).textFieldStyle(RoundedBorderTextFieldStyle())，创建一个带有圆角边框的文本框，让用户输入他们的密码，并将输入的文本存储在名为password的变量中

Toggle组件：用于创建开关按钮

示例1：Toggle("Toggle me", isOn: $toggleValue)，创建一个带有标签的切换按钮，并将其状态存储在名为toggleValue的布尔变量中
示例2：Toggle(isOn: $isDarkMode) { Text("Dark mode") }，创建一个切换按钮，当按钮被打开时，应用程序进入暗模式，并显示"Dark mode"文本

Slider组件：用于创建滑块

示例1：Slider(value: $sliderValue, in: 0...10)，创建一个滑块，将其值存储在名为sliderValue的变量中，并将其范围设置为0到10
示例2：Slider(value: $fontSize, in: 12...24, step: 2) { Text("Font size: (fontSize)") }，创建一个滑块，当滑块的值改变时，将字体大小存储在名为fontSize的变量中，并显示"Font size: xx"文本，其中xx是字体大小的值

NavigationView组件：用于创建具有导航功能的视图

示例1：NavigationView { Text("Hello, World!") }，创建一个带有"Hello, World!"文本的视图，并添加导航功能
示例2：NavigationView { List(items) { Text($(item) } }，创建一个带有列表视图的导航视图，其中items是一个包含多个项目的数组，每个项目都会显示为列表中的一个行文本。

VStack和HStack组件：用于垂直和水平布局子视图

示例1：VStack(alignment: .leading, spacing: 10) { Text("Title") Text("Subtitle") }，创建一个垂直堆栈，其中包含标题和副标题文本，标题文本位于上方，副标题文本位于下方，两个文本之间的间距为10个点。
示例2：HStack { Image("icon") Text("Label") }，创建一个水平堆栈，其中包含图像和标签文本，图像位于标签文本的左侧。

List组件：用于创建列表视图

示例1：List(items) { Text($0) }，创建一个简单的列表视图，其中items是一个包含字符串的数组，每个字符串都会显示为一个列表行文本。
示例2：List(tasks) { task in TaskView(task: task) }，创建一个包含多个任务视图的列表视图，其中tasks是一个包含多个任务对象的数组，TaskView是一个自定义的视图组件，用于显示单个任务。

Form组件：用于创建表单视图

示例1：Form { TextField("Name", text: $name) TextField("Email", text: $email) }，创建一个包含姓名和电子邮件文本字段的简单表单视图。
示例2：Form { Toggle("Dark mode", isOn: $isDarkMode) Section(header: Text("Settings")) { TextField("Username", text: $username) TextField("Password", text: $password) } }，创建一个包含切换按钮和用户名/密码输入的表单视图，切换按钮用于切换暗模式，用户名和密码输入包含在一个包含标题的部分中。

Alert组件：用于创建警报框视图

示例1：Button("Show Alert") { showAlert.toggle() } .alert(isPresented: $showAlert) { Alert(title: Text("Alert"), message: Text("This is an alert"), dismissButton: .default(Text("OK"))) }，创建一个按钮，单击后显示一个带有标题，消息和一个“OK”按钮的警报框视图。
示例2：Alert(title: Text("Delete"), message: Text("Are you sure you want to delete this item?"), primaryButton: .destructive(Text("Delete")) { deleteItem() }, secondaryButton: .cancel())，创建一个带有警告消息，一个红色的“删除”按钮和一个“取消”按钮的警报框视图，用于在用户确认删除操作之前进行确认。

ActionSheet组件：用于创建操作表视图

示例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()]) }，创建一个按钮，单击后显示一个操作表视图，其中包含两个默认操作和一个“取消”按钮。
示例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()])，创建一个带有标题和消息的操作表视图，其中包含三个不同的共享选项按钮和一个“取消”按钮。每个按钮上的操作会调用不同的分享函数。

TabView组件：用于创建带有多个标签页的视图

示例1：TabView { Text("Tab 1") .tabItem { Image(systemName: "star") Text("Tab 1") } Text("Tab 2") .tabItem { Image(systemName: "heart") Text("Tab 2") } }，创建一个带有两个标签页的视图，每个标签页都包含一个文本视图和一个图标，用于切换不同的视图内容。
示例2：TabView(selection: $selectedTab) { ForEach(tabs) { tab in TabContentView(tab: tab) .tabItem { Image(tab.icon) Text(tab.title) } } }，创建一个具有多个标签页的视图，其中每个标签页都具有自定义的图标和标题，并在选定标签页时显示对应的内容视图。

NavigationLink组件：用于在导航视图中创建可点击的链接

示例1：NavigationLink(destination: DetailView()) { Text("Go to Detail View") }，创建一个可点击的链接，单击后将导航到名为“DetailView”的目标视图。
示例2：ForEach(items) { item in NavigationLink(destination: ItemDetailView(item: item)) { Text(item.name) } }，创建一个带有多个链接的列表视图，每个链接都导航到一个名为“ItemDetailView”的目标视图，该视图显示有关该项的详细信息。

Picker：一个视图，用于在一个列表中显示一组选项，并允许用户选择其中一个选项。

示例1：Picker("Fruit", selection: $selectedFruit) { ForEach(fruits, id: .self) { Text($0) } }，创建一个Picker，用于在一个水果列表中选择一个选项，并将选择的选项绑定到名称为“selectedFruit”的绑定变量中。 示例2：Picker(selection: $selectedColor, label: Text("Color")) { ForEach(colors, id: .self) { Text($0) } }.pickerStyle(.segmented)，创建一个Picker，用于在一组颜色中选择一个选项，并将选择的选项绑定到名称为“selectedColor”的绑定变量中。使用.segmented样式使Picker的外观更改为分段控件样式。

DatePicker组件：用于创建日期选择器

示例1：DatePicker("Select a date", selection: $selectedDate, displayedComponents: .date)，创建一个日期选择器，用户可以选择日期，该日期将存储在名为“selectedDate”的绑定变量中。
示例2：DatePicker("Select a time", selection: $selectedTime, displayedComponents: .hourAndMinute)，创建一个时间选择器，用户可以选择时间，该时间将存储在名为“selectedTime”的绑定变量中。

Stepper组件：用于创建步进器视图

示例1：Stepper("Value: (value)", value: $value)，创建一个步进器视图，用户可以单击“+”或“-”按钮来增加或减少值，该值将存储在名为“value”的绑定变量中。
示例2：Stepper(onIncrement: { incrementValue() }, onDecrement: { decrementValue() }) { Text("Value: (value)") }，创建一个自定义的步进器视图，当用户单击“+”或“-”按钮时，分别调用两个不同的函数来增加或减少值，并在视图中显示当前值。

ProgressView组件：用于显示进度条或轮廓视图

示例1：ProgressView()，创建一个默认样式的进度条视图。
示例2：ProgressView("Loading...")，创建一个带有标签“Loading...”的进度条视图。

ScrollView组件：用于创建可滚动的视图

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

ColorPicker组件：用于创建颜色选择器

示例1：ColorPicker("Select a color", selection: $selectedColor)，创建一个颜色选择器，当用户选择颜色时，将触发绑定变量“selectedColor”的值更改，并在选择器旁边显示标签“Select a color”。
示例2：ColorPicker(selection: $selectedColor, supportsOpacity: true)，创建一个颜色选择器，支持选择不透明度，并且不显示标签。

VideoPlayer组件：用于在应用程序中播放视频

示例1：VideoPlayer(player: player) ，创建一个视频播放器，其中“player”是一个包含要播放的视频的AVPlayer实例。
示例2：VideoPlayer(player: player, controls: .custom(actions: { CustomControls() }))，创建一个视频播放器，自定义播放器控件。

MapView组件：用于在应用程序中显示地图

示例1：MapView(coordinate: CLLocationCoordinate2D(latitude: 37.3318, longitude: -122.005))，创建一个地图视图，其中心点坐标为经度37.3318，纬度-122.005的位置。
示例2：MapView(coordinateRegion: $region)，创建一个地图视图，其中心点坐标和缩放比例由绑定变量“region”控制。

Gauge：用于显示某个值相对于给定范围的百分比。它可以是一个圆形或者一个半圆形。

示例1：Gauge(value: progress, in: 0...100)。创建一个圆形的Gauge，用于显示进度百分比，progress是0到100之间的值，in参数表示Gauge的范围。
示例2：Gauge(value: progress, in: 0...100, label: { Text("(Int(progress))%") })。创建一个圆形的Gauge，用于显示进度百分比，progress是0到100之间的值，in参数表示Gauge的范围。同时，定义一个标签，用于在Gauge中心显示进度百分比。

Menu组件：用于创建菜单

示例1：Menu(content: { Text("Menu item 1") Text("Menu item 2") }, label: { Text("Menu") })，创建一个菜单，包含两个菜单项“Menu item 1”和“Menu item 2”，并在标签中显示文本“Menu”。
示例2：Menu(content: { Button("Delete") { delete() } }, trigger: .init(label: { Text("More") }))，创建一个菜单，包含一个按钮“Delete”，单击后调用“delete”函数，并在标签中显示文本“More”。

Link组件：用于创建链接

示例1：Link("Open SwiftUI documentation", destination: URL(string: "[https://developer.apple.com/documentation/swiftui](https://developer.apple.com/documentation/swiftui)")!) ，创建一个链接，显示文本“Open SwiftUI documentation”，单击后打开目标URL地址。
示例2：Link(destination: URL(string: "[https://developer.apple.com/documentation/swiftui](https://developer.apple.com/documentation/swiftui)")!) { Text("Learn more about SwiftUI") }，创建一个链接，显示文本“Learn more about SwiftUI”，单击后打开目标URL地址。

ShareLink：一个视图，用于共享链接或其他内容

示例1：Button(action: shareLink) { Text("Share Link") }, 在一个按钮中使用ShareLink来触发共享视图，并使用shareLink方法来定义共享内容。
示例2：ShareLink(destination: URL(string: "[https://www.example.com](https://www.example.com/)")!, label: { Text("Share Link") }), 使用ShareLink在视图中显示一个可共享的链接，并将该链接标记为标签。

WebView组件：用于显示Web内容

示例1：WebView(url: URL(string: "[https://www.apple.com")!)，创建一个WebView组件，加载指定的URL。](https://www.apple.xn--com%22%29%21%29%2Cwebview%2Curl-qr76b28ac6nzm2a6zdy61h77xamo5auv0ms1rcb2uh./)
示例2：WebView(htmlString: "<h1>Hello, World!</h1>")，创建一个WebView组件，显示指定的HTML字符串。

Spacer组件：用于占用可用空间

示例1：HStack { Text("Left") Spacer() Text("Right") }，创建一个水平栈视图，左边是文本“Left”，右边是文本“Right”，使用Spacer()占用中间可用的空间。
示例2：VStack { Text("Top") Spacer() Text("Bottom") }，创建一个垂直栈视图，上面是文本“Top”，下面是文本“Bottom”，使用Spacer()占用中间可用的空间。

若还有没想到的组件，请在评论中告诉我，我继续完善