{"id":13484564,"url":"https://github.com/Jinxiansen/SwiftUI","last_synced_at":"2025-03-27T16:31:00.452Z","repository":{"id":37431107,"uuid":"190082368","full_name":"Jinxiansen/SwiftUI","owner":"Jinxiansen","description":"`SwiftUI` Framework  Learning and Usage Guide. 🚀 ","archived":false,"fork":false,"pushed_at":"2024-02-17T16:47:54.000Z","size":20801,"stargazers_count":5259,"open_issues_count":1,"forks_count":524,"subscribers_count":128,"default_branch":"master","last_synced_at":"2024-10-29T15:37:40.728Z","etag":null,"topics":["articles","swiftui","swiftui-example","wwdc","wwdc2019"],"latest_commit_sha":null,"homepage":"https://jinxiansen.github.io/SwiftUI/","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Jinxiansen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":["Jinxiansen"],"open_collective":"SwiftUI"}},"created_at":"2019-06-03T21:07:27.000Z","updated_at":"2024-10-28T19:40:47.000Z","dependencies_parsed_at":"2024-01-17T04:41:00.799Z","dependency_job_id":"1dd51267-9721-465c-bc14-f56de08f0ec6","html_url":"https://github.com/Jinxiansen/SwiftUI","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jinxiansen%2FSwiftUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jinxiansen%2FSwiftUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jinxiansen%2FSwiftUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jinxiansen%2FSwiftUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jinxiansen","download_url":"https://codeload.github.com/Jinxiansen/SwiftUI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245882304,"owners_count":20687862,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["articles","swiftui","swiftui-example","wwdc","wwdc2019"],"created_at":"2024-07-31T17:01:26.219Z","updated_at":"2025-03-27T16:30:56.808Z","avatar_url":"https://github.com/Jinxiansen.png","language":"Swift","funding_links":["https://github.com/sponsors/Jinxiansen","https://opencollective.com/SwiftUI"],"categories":["Samples","Swift","🛠 Examples","OOM-Leaks-Crash","🌎 by the community"],"sub_categories":["Helpers","SwiftUI Learning"],"readme":"\u003cimg src=\"images/icon/banner.png\"/\u003e\n\n[![Build Status](https://img.shields.io/badge/platforms-iOS%20%7C%20tvOS%20%7C%20macOS%20%7C%20watchOS-green.svg)](https://github.com/Jinxiansen/SwiftUI)\n[![Swift](https://img.shields.io/badge/Swift-5.1-orange.svg)](https://swift.org)\n[![Xcode](https://img.shields.io/badge/Xcode-11.0-blue.svg)](https://developer.apple.com/xcode)\n[![Xcode](https://img.shields.io/badge/macOS-15.0-blue.svg)](https://developer.apple.com/macOS)\n[![MIT](https://img.shields.io/badge/licenses-MIT-red.svg)](https://opensource.org/licenses/MIT)\n\n\nThis article refers to SwiftUI [apple example](https://github.com/Jinxiansen/SwiftUI/tree/doc) and records the results of the exploration here, I hope to be helpful to you.\n\nFor the content described in this article, by default you have some experience based on Swift language development, so it will not describe every detail in detail; if you have doubts about Swift syntax, you can learn [Swift](https://swift.org) Grammar.\n\nWhen learning and using `SwiftUI`, if you have any questions, you can join the SwiftUI QQ Group: **18552966** to discuss communication.\n\n[中文版🇨🇳](README_CN.md)\n\n\u003e Recommended Preview: [Windows 11](https://github.com/Jinxiansen/Windows11) desktop client implemented using **SwiftUI**.\n\u003e \n\u003e \u003cimg width=\"80%\" src=\"images/windows11/launchpad.png\"/\u003e\n\n\n### ⭐️ Stargazers over time\n\n[![Stargazers over time](https://starchart.cc/Jinxiansen/SwiftUI.svg)](https://starchart.cc/Jinxiansen/SwiftUI)\n\n### 💻 Requirements\n\n- macOS 10.15\n- Xcode 11.0\n- iOS 13.0\n\n\n## Directory：\n\n### Basic View\n\n* \u003cspan id=\"Text_D\"\u003eText\u003c/span\u003e\n\t- [Text](#Text)\n\t- [TextField](#TextField)\n\t- [SecureField](#SecureField)\n\n* \u003cspan id=\"Image_D\"\u003eImage\u003c/span\u003e\n\t- [Image](#Image)\n\t- [WebImage](#WebImage)\n\n* \u003cspan id=\"Button_D\"\u003eButton\u003c/span\u003e\n\t- [Button](#Button)\n\t- [PullDownButton](#PullDownButton)\n\t- [ItemBasedPopUpButton](#ItemBasedPopUpButton)\n\t- [NavigationButton](#NavigationButton)\n\t- [PresentationButton](#PresentationButton)\n\t- [EditButton](#EditButton)\n\t- [PasteButton](#PasteButton)\n\n* \u003cspan id=\"Picker_D\"\u003ePicker\u003c/span\u003e\n\t- [Picker](#Picker)\n\t- [DatePicker](#DatePicker)\n\t- [Toggle](#Toggle)\n\t- [Slider](#Slider)\n\t- [Stepper](#Stepper)\n\t- [SegmentedControl](#SegmentedControl)\n\n* \u003cspan id=\"Special_D\"\u003eSpecial Views\u003c/span\u003e\n\t- [WebView](#WebView)\n\t- [UIViewController](#UIViewController)\n\n### \u003cspan id=\"Layout_D\"\u003eLayout\u003c/span\u003e\n\t\n* \u003cspan id=\"Stacks_D\"\u003eStacks\u003c/span\u003e\n\t- [HStack](#HStack)\n\t- [VStack](#VStack)\n\t- [ZStack](#ZStack)\n\n* \u003cspan id=\"List_D\"\u003eList\u003c/span\u003e\n\t- [List](#List)\n\t- [ScrollView](#ScrollView)\n\t- [ForEach](#ForEach)\n\n* \u003cspan id=\"Container_D\"\u003eContainer Views\u003c/span\u003e\n\t- [Group](#Group)\n\t- [GroupBox](#GroupBox)\n\t- [Section](#Section)\n  - [Form](#Form)\n\n* \u003cspan id=\"Architectural_D\"\u003eArchitectural Views\u003c/span\u003e\n\t- [NavigationView](#NavigationView)\n\t- [TabView](#TabView)\n\t- [HSplitView](#HSplitView)\n\t- [VSplitView](#VSplitView)\n\n* \u003cspan id=\"Alert_D\"\u003e Alert \u003c/span\u003e\n\t- [Alert](#Alert)\n\t- [Modal](#Modal)\n\t- [Popover](#Popover)\n\t- [Sheet](#Sheet)\n\t- [ActionSheet](#ActionSheet)\n\n\n### \u003cspan id=\"State_D\"\u003eState and Data Flow\u003c/span\u003e\n\n* \u003cspan id=\"Bindings_D\"\u003e Bindings \u003c/span\u003e\n\t* [Binding](#Binding)\n\n* \u003cspan id=\"Data_D\"\u003e Data-Dependent Views \u003c/span\u003e\n\t* [State](#State)\n\t* [ObjectBinding](#ObjectBinding)\n\t* [EnvironmentObject](#EnvironmentObject)\n\n* \u003cspan id=\"Environment_D\"\u003e Environment Values \u003c/span\u003e\n\t* [Environment](#Environment)\n\t* [EnvironmentValues](#EnvironmentValues)\n\n* \u003cspan id=\"ENavigation_D\"\u003e ENavigation Models \u003c/span\u003e\n\t* [DynamicNavigationDestinationLink](#DynamicNavigationDestinationLink)\n\n* \u003cspan id=\"Preferences_D\"\u003e Preferences \u003c/span\u003e\n\t* [LocalizedStringKey](#LocalizedStringKey)\n\n* \u003cspan id=\"Transactions_D\"\u003e Transactions \u003c/span\u003e\n\t* [Transaction](#Transaction)\n\n\n### \u003cspan id=\"Gestures_D\"\u003eGestures\u003c/span\u003e\n\n* \u003cspan id=\"BasicGestures_D\"\u003e Basic Gestures \u003c/span\u003e\n\t* [TapGesture](#TapGesture)\n\t* [LongPressGesture](#LongPressGesture)\n\t* [DragGesture](#DragGesture)\n\t* [MagnificationGesture](#MagnificationGesture)\n\t* [RotationGesture](#RotationGesture)\n\n* \u003cspan id=\"Combined_D\"\u003e Combined Gestures \u003c/span\u003e\n\t* [SequenceGesture](#SequenceGesture)\n\t* [SimultaneousGesture](#SimultaneousGesture)\n\t* [ExclusiveGesture](#ExclusiveGesture)\n\n* \u003cspan id=\"Custom_D\"\u003e Custom Gestures \u003c/span\u003e\n\t* [AnyGesture](#AnyGesture)\n\n\n\u003ch2 id=\"Basic View\"\u003eBasic View\u003c/h2\u003e\n\n\n\u003ch4 id=\"Text\"\u003eText\u003c/h4\u003e\n\n`Text` is used to display one or more lines of text content with the same effect as `UILabel`, but it is even better.\n\nIf you want to create `Text`, just create it with `Text(\"SwiftUI\")`;\nWith chained syntax, you can also add multiple attributes to the text, such as fonts, colors, shadows, spacing between top left and right, and so on.\n\nExample:\n\n```swift\n\nText(\"SwiftUI\")\n    .foregroundColor(.orange)\n    .bold()\n    .font(.system(.largeTitle))\n    .fontWeight(.medium)\n    .italic()\n    .shadow(color: .black, radius: 1, x: 0, y: 2)\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n  \u003cimg width=\"80%\" src=\"images/example/Text.png\"/\u003e\n\u003c/details\u003e\n\n \n\u003e HStack and VStack controls are used to host multiple views, as mentioned later.\n\n[🔝](#Text_D)\n\n\u003ch4 id=\"TextField\"\u003e TextField \u003c/h4\u003e\n \n`TextField` is used to add a normal input box, which is often used as a text input.\n\nExample：\n\n```swift\n\nTextField(self.$name, placeholder: self.nameText, onEditingChanged: { changed in\n    print(\"onEditing: \\(changed)\")\n}) {\n    print(\"userName: \\(self.name)\")\n    self.endEditing(true)\n}}\n.padding(10)\n.frame(height: 50)\n.textFieldStyle(RoundedBorderTextFieldStyle())\n.padding(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/Field.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Text_D)\n\n\u003ch4 id=\"SecureField\"\u003e SecureField \u003c/h4\u003e\n\n`SecureField ` is generally used as a password input. It is used in the same way as `TextField`. The example and the running effect are the same as `TextField`.\n\n\n\u003ch4 id=\"Image\"\u003e Image \u003c/h4\u003e\n\nThe `Image` control is used to display images, example:\n\n```swift\n\nImage(\"icon\")\n    .resizable()\n    .frame(width: 100,\n           height: 100,\n           alignment: .center)\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/Image.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Text_D)\n\n\u003ch4 id=\"WebImage\"\u003e WebImage \u003c/h4\u003e\n\n`webImage` is used to download the web image, use the `URLSession` to download the original `Image` after successful download; you can also use [Kingfisher]((https://github.com/onevcat/Kingfisher)) in the `downloadWebImage ` function .\n\nExample：\n\n```swift\n\nvar body: some View {\n        Image(uiImage: self.uiImage ?? placeholderImage)\n            .resizable()\n            .onAppear(perform: downloadWebImage)\n            .frame(width: 80,\n                   height: 80,\n                   alignment: .center)\n            .onTapGesture {\n                print(\"Tap \")\n        }\n    }\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/WebImage.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Text_D)\n\n\u003ch4 id=\"Button\"\u003e Button \u003c/h4\u003e\n\n`Button` is used to respond to click events.\n\nExample:\n\n```swift\n\nButton(action: {\n    print(\"Tap\")\n}) {\n   Text(\"I'm a Button\")\n}\n\n```\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/Button.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Button_D)\n\n\u003ch4 id=\"PullDownButton\"\u003e PullDownButton \u003c/h4\u003e\n\nWaiting for release.\n\n\u003ch4 id=\"ItemBasedPopUpButton\"\u003e ItemBasedPopUpButton \u003c/h4\u003e\n\nWaiting for release.\n\n\n\u003ch4 id=\"NavigationButton\"\u003e NavigationButton \u003c/h4\u003e\n\n`NavigationButtonPage ` is used to push to the next navigation page.\n\nExample:\n\n```swift\n\nNavigationLink(destination: NavigationButtonPage()) {\n            Text(\"NavigationButton\").bold()\n                .foregroundColor(.orange)\n                .font(.largeTitle)\n            }\n    .navigationBarTitle(Text(\"Page\"))\n\n```     \n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/NavigationButton.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Button_D)\n\n\u003ch4 id=\"PresentationButton\" style='color:red'\u003e PresentationButton is deprecated\u003c/h4\u003e\n\n`PresentationButton` ~~is used to pop up a page.~~ has deprecated, please use `NavigationLink` \n\n\n[🔝](#Button_D)\n\n\u003ch4 id=\"EditButton\"\u003e EditButton \u003c/h4\u003e\n\n`EditButton` is used to trigger the editing state, just use the `navigationBarItems` setting when using it. \n\nExample:\n\n```swift\n\nnavigationBarItems(trailing: EditButton())\n\n```     \n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/EditButton.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Button_D)\n\n\u003ch4 id=\"PasteButton\"\u003e PasteButton \u003c/h4\u003e \n\nWaiting for release.\n \n\n\u003ch4 id=\"Picker\"\u003e Picker \u003c/h4\u003e\n\n`Picker` can customize the selector of the data source.\n\nExample:\n\n```swift\n\nPicker(selection: $leftIndex, label: Text(\"Picker\")) {\n    ForEach(0..\u003cleftSource.count) {\n        Text(self.leftSource[$0]).tag($0)\n    }\n    }.frame(width: UIScreen.main.bounds.width/2)\n\n```     \n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/Picker.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Picker_D)\n\n\u003ch4 id=\"DatePicker\"\u003e DatePicker \u003c/h4\u003e\n\n`DatePicker` is used to select the absolute date of the control.\n\nExample:\n\n```swift\n\nDatePicker(selection: $server.date, \nin: server.spaceDate, \ndisplayedComponents: .date, label: {\n    Text(\"\")\n})\n\n```     \n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/DatePicker.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Picker_D)\n\n\u003ch4 id=\"Toggle\"\u003e Toggle \u003c/h4\u003e\n\n`Toggle` is used to switch the selected state, for example:\n\n```swift\n\nToggle(isOn: $isOn) {\n    Text(\"State: \\(self.isOn == true ? \"Open\":\"open\")\")\n}.padding(20)\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/Toggle.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Picker_D)\n\n\u003ch4 id=\"Slider\"\u003e Slider \u003c/h4\u003e\n\n`Slider ` A control for selecting values from a finite range of values, example:\n\n```swift\n\nSlider(value: $data.rating)\n\n```     \n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/Slider.png\"/\u003e\n\u003c/details\u003e\n \n [🔝](#Picker_D)\n\n\u003ch4 id=\"Stepper\"\u003e Stepper \u003c/h4\u003e\n\n`Stepper ` is used to increase or decrease the value, example:\n\n```swift\n\nStepper(value: $value, step: 2, onEditingChanged: { c in\n    print(c)\n}) {\n    Text(\"Stepper Value: \\(self.value)\")\n    }.padding(50)\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/Stepper.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Picker_D)\n\n\u003ch4 id=\"SegmentedControl\" style=\"color:red\"\u003eSegmentedControl is deprecated\u003c/h4\u003e\n\n`SegmentedControl ` is used for segmentation condition selection, example:\n\n```swift\n\nSegmentedControl(selection: $currentIndex) {\n    ForEach(0..\u003citems.count) { index in\n        Text(self.items[index]).tag(index)\n    }\n    }.tapAction {\n        print(\"currentIndex: \\(self.currentIndex)\")\n}\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/SegmentedControl.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Picker_D)\n\n\u003ch4 id=\"WebView\"\u003e WebView \u003c/h4\u003e\n\n`WebView` is used to display an open web page, example:\n\n```swift\n\nstruct WebViewPage : UIViewRepresentable {\n    func makeUIView(context: Context) -\u003e WKWebView  {\n        return WKWebView()\n    }\n    func updateUIView(_ uiView: WKWebView, context: Context) {\n        let req = URLRequest(url: URL(string: \"https://www.apple.com\")!)\n        uiView.load(req)\n    }\n}\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/WebView.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Special_D)\n\n\u003ch4 id=\"UIViewController\"\u003e UIViewController \u003c/h4\u003e\n\n`UIViewController` is used to display the **UIViewController** that opens **UIKit** in **SwiftUI** and opens the `SwiftUI` View in **UIViewController**.\n\nExample:\n\nFirst define:\n\n```swift\n\nstruct ControllerPage\u003cT: UIViewController\u003e : UIViewControllerRepresentable {\n    \n    typealias UIViewControllerType = UIViewController\n    \n    func makeUIViewController(context: UIViewControllerRepresentableContext\u003cControllerPage\u003e) -\u003e UIViewController {\n        return T()\n    }\n    \n    func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext\u003cControllerPage\u003e) {\n        debugPrint(\"\\(#function)：\\(type(of: T.self))\")\n    }\n    \n}\n\n```\n\nThen use this:\n\n```swift\n\nNavigationButton(destination: ControllerPage\u003cUIKitController\u003e()) {\n    PageRow(title: \"UIViewController\",subTitle: \"Open UIViewController\")\n\n}\n\n```\n\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/UIViewController.png\"/\u003e\n\u003cimg width=\"80%\" src=\"images/example/UIViewController2.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Special_D)\n\n\n### Layout \n\n\n\u003ch4 id=\"HStack\"\u003e HStack \u003c/h4\u003e\n\n`HStack` is used to arrange the subviews on a horizontal line. \n\nExample:\n\n```swift\n\nHStack {\n    Text(\"made in China.\")\n    Divider() // Just add a line.\n    Text(\"the People's Republic Of China.\")\n}\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/HStack.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Layout_D)\n\n\u003ch4 id=\"VStack\"\u003e VStack \u003c/h4\u003e\n\n`VStack` is used to arrange the subviews on a vertical line.\n\nExample:\n\n```swift\n\nVStack {\n    Text(\"made in China.\")\n    Divider() // Just add a line.\n    Text(\"the People's Republic Of China.\")\n}\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/VStack.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Layout_D)\n\n\u003ch4 id=\"ZStack\"\u003e ZStack \u003c/h4\u003e\n\n`ZStack` is used to override the subview, aligned on two axes.\n\nExample:\n\n```swift\n\nZStack {\n    Text(\"made in China.\")\n    Divider() // Just add a line.\n    Text(\"the People's Republic Of China.\")\n}\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/ZStack.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Layout_D)\n\n\u003ch4 id=\"List\"\u003e List \u003c/h4\u003e\n\n`List` list container to display a list of data.\n\nExamples:\n\n```swift\n\nList(0..\u003c5) { item in\n    Text(\"Hello World !\")\n}.navigationBarTitle(Text(\"List\"), displayMode: .large)\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/List.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Layout_D)\n\n\u003ch4 id=\"ScrollView\"\u003e ScrollView \u003c/h4\u003e\n\n`ScrollView` is a scroll view container.\n\nExample:\n\n```swift\n\nScrollView {\n    Text(\"SwiftUI\").padding(20)\n    Divider()\n    Image(\"icon\").resizable()\n        .frame(width: 300, height: 300, alignment: .center)\n    Divider()\n    Text(\"Views and ... user interface.\")\n    }\n    .border(Color.gray.gradient, width: 1)\n            .cornerRadius(10)\n            .padding(10)\n            .navigationBarTitle(Text(\"ScrollView\"))\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/ScrollView.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Layout_D)\n\n\u003ch4 id=\"ForEach\"\u003e ForEach \u003c/h4\u003e\n\n`ForEach` is used to present a view based on a collection of existing data.\n\nExample:\n\n```swift\n\nlet data = (0..\u003c5)\nvar body: some View {\n    ForEach(data) { e in\n        Text(\"Hello \\(e)\")\n            .bold()\n            .font(.system(size: 25, design: .monospaced))\n            .padding(5)\n}\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/ForEach.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Layout_D)\n\n\u003ch4 id=\"Group\"\u003e Group \u003c/h4\u003e\n\n`Group` is used to aggregate multiple views, and the properties set on the Group will be applied to each child view.\n\nExample:\n\n```swift\n\nGroup {\n        Text(\"Hello World !\")\n        Text(\"Hello World !\")\n      }\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/Group.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Layout_D)\n \n\u003ch4 id=\"GroupBox\"\u003e GroupBox \u003c/h4\u003e\n\nWaiting for release.\n\n\n\u003ch4 id=\"Section\"\u003e Section \u003c/h4\u003e\n\n`Section` is used to create the **header/footer** view content, which is generally used in conjunction with the `List` component.\n\nExample:\n\n```swift\n\nSection(header: Text(\"I'm header\"), footer: Text(\"I'm footer\")) {\n    ForEach(0..\u003c3) {\n        Text(\"Hello \\($0)\")\n    }\n}\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/Section.png\"/\u003e\n\u003c/details\u003e\n\n\u003ch4 id=\"Form\"\u003e Form \u003c/h4\u003e\n\n`Form` A container for grouping controls used for data entry, such as in settings or inspectors.\n\nExample:\n\n```swift\n\nForm {\n   TextField(\"First Name\", text: $firstName)\n   TextField(\"Last Name\", text: $lastName)\n}\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/Form.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Layout_D)\n \n\u003ch4 id=\"NavigationView\"\u003e NavigationView \u003c/h4\u003e\n\n`NavigationView` is used to create a view container that contains the top navigation bar.\n\nExample:\n\n```swift\n\nNavigationView {\n            Text(\"🧚‍♂️🧚‍♀️🧜‍♂️🧜‍♀️🧞‍♂️🧞‍♀️\").blur(radius: 5)\n            Text(\"Swifter Swifter\")\n            .bold()\n                .foregroundColor(.orange)\n                .font(.largeTitle)\n        }\n    .navigationBarTitle(Text(\"NavigationView\"))\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/NavigationView.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Layout_D)\n\n\u003ch4 id=\"TabView\"\u003e TabView \u003c/h4\u003e\n\n`TabView` is used to create a view container that contains the bottom ** TabBar**.\n\nExample:\n\n```swift\n\nTabView(selection: $index) {\n    ForEach(0..\u003cimgs.count) { item in\n        TabItemPage(index: item)\n            .tabItem{\n                Image(self.imgs[item])\n                Text(\"\\(item)\")\n        }\n        .tag(item)\n    }\n}\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/TabView.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Layout_D)\n\n\u003ch4 id=\"HSplitView\"\u003e HSplitView \u003c/h4\u003e \n\nWaiting for release.\n\n\u003ch4 id=\"VSplitView\"\u003e VSplitView \u003c/h4\u003e \n\nWaiting for release.\n\n[🔝](#Layout_D)\n\n\u003ch4 id=\"Alert\"\u003e Alert \u003c/h4\u003e\n\n`Alert` is used to display a bullet reminder that needs to be associated with a trigger event.\n\nExample:\n\n```swift\n\nalert(isPresented: $showAlert, content: {\n            Alert(title: Text(\"确定要支付这100000000美元吗？\"),\n                  message: Text(\"请谨慎操作\\n一旦确认，钱款将立即转入对方账户\"),\n                  primaryButton: .destructive(Text(\"确认\")) { print(\"转出中...\") },\n                  secondaryButton: .cancel())\n        }).navigationBarTitle(Text(\"Alert\"))\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/AlertPage.jpg\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Alert_D)\n\n\n\u003ch4 id=\"ActionSheet\"\u003e ActionSheet \u003c/h4\u003e\n\n`ActionSheet` is used to pop up a selection box.\n\nExample:\n\n```swift\n\nActionSheet(title: Text(\"Title\"),\n            message: Text(\"Message\"),\n            buttons:\n    [.default(Text(\"Default\"), onTrigger: {\n        print(\"Default\")\n        self.showSheet = false\n    }),.destructive(Text(\"destructive\"), onTrigger: {\n        print(\"destructive\")\n        self.showSheet = false\n    }),.cancel({\n        print(\"Cancel\")\n        self.showSheet = false\n    })])\n```\n\nusage：\n\n```swift \n\n.actionSheet(isPresented: $showSheet, content: {sheet})\n\n```\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/ActionSheet.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Alert_D)\n\n\n\u003ch4 id=\"Modal\"\u003e Modal \u003c/h4\u003e\n\n`Modal` is used to pop up a view.\n\nExample:\n\n```swift\n\nModal(Text(\"Modal View\"),onDismiss: {\n    print(\"View Dismiss !\")\n})\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/Modal.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Alert_D)\n\n\n\u003ch4 id=\"Popover\"\u003e Popover \u003c/h4\u003e\n\n`Popover` is used to pop up a view, see the results below.\n\nExample:\n\n```swift\n\n.popover(isPresented: $showPop, content: {\n                ImagePage()\n        })\n\n```\n\n\u003cdetails close\u003e\n  \u003csummary\u003eView running results\u003c/summary\u003e\n\u003cimg width=\"80%\" src=\"images/example/Popover.png\"/\u003e\n\u003c/details\u003e\n\n[🔝](#Alert_D)\n\n## 📎 About\n\n* The code involved in the above example is in this repository code. It is recommended to download and run the view.\n* If you have better usage and suggestions about SwiftUI, look forward to sharing it!\n* If there are omissions and errors in the examples in this article,  please create a [**Issue**](https://github.com/Jinxiansen/SwiftUI/issues/new) !\n \n\n\n## ✉️ Contacts\n\nemail : hi@jinxiansen.com\n\n微博 : [@晋先森](http://weibo.com/3205872327)\n\n## 📄 License\t\n\nSwiftUI is released under the [MIT license](LICENSE). See LICENSE for details.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJinxiansen%2FSwiftUI","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJinxiansen%2FSwiftUI","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJinxiansen%2FSwiftUI/lists"}