{"id":15055301,"url":"https://github.com/simpleboilerplates/swiftui-cheat-sheet","last_synced_at":"2026-03-02T16:47:04.740Z","repository":{"id":50970128,"uuid":"190864373","full_name":"SimpleBoilerplates/SwiftUI-Cheat-Sheet","owner":"SimpleBoilerplates","description":"SwiftUI 2.0 Cheat Sheet","archived":false,"fork":false,"pushed_at":"2022-09-04T12:41:56.000Z","size":10094,"stargazers_count":4404,"open_issues_count":2,"forks_count":308,"subscribers_count":151,"default_branch":"master","last_synced_at":"2025-01-10T08:57:21.556Z","etag":null,"topics":["declarative-ui","swift","swiftui","uikit","uikit-equivalent"],"latest_commit_sha":null,"homepage":"","language":null,"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/SimpleBoilerplates.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-08T08:32:39.000Z","updated_at":"2025-01-09T03:14:29.000Z","dependencies_parsed_at":"2022-08-31T18:03:20.497Z","dependency_job_id":null,"html_url":"https://github.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet","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/SimpleBoilerplates%2FSwiftUI-Cheat-Sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimpleBoilerplates%2FSwiftUI-Cheat-Sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimpleBoilerplates%2FSwiftUI-Cheat-Sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimpleBoilerplates%2FSwiftUI-Cheat-Sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimpleBoilerplates","download_url":"https://codeload.github.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241000578,"owners_count":19891823,"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":["declarative-ui","swift","swiftui","uikit","uikit-equivalent"],"created_at":"2024-09-24T21:40:27.733Z","updated_at":"2026-03-02T16:47:04.698Z","avatar_url":"https://github.com/SimpleBoilerplates.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# SwiftUI 2.0 Cheat Sheet\n\n![SwiftUI](./assets/swift-ui-logo.png)\n\n\n### Table of Contents\n- [SwiftUI Cheat Sheet](#swiftui-cheat-sheet)\n    - [Table of Contents](#table-of-contents)\n- [Resource](#resource)\n- [UIKit equivalent in SwiftUI](#uikit-equivalent-in-swiftui)\n- [View](#view)\n    - [Text](#text)\n    - [Label](#label)\n    - [TextEditor](#texteditor)\n    - [Image](#image)\n    - [Shape](#shape)\n    - [ProgressView](#progressview)\n    - [Map](#map)\n- [Layout](#layout)\n    - [Background](#background)\n    - [VStack](#vstack)\n    - [HStack](#hstack)\n    - [ZStack](#zstack)\n    - [LazyVStack](#lazyvstack)\n    - [LazyHStack](#lazyhstack)\n    - [LazyVGrid](#lazyvgrid)\n    - [LazyHGrid](#lazyhgrid)\n- [Input](#input)\n    - [Toggle](#toggle)\n    - [Button](#button)\n    - [TextField](#textfield)\n    - [Slider](#slider)\n    - [Date Picker](#date-picker)\n    - [Picker](#picker)\n    - [Stepper](#stepper)\n    - [Tap](#tap)\n    - [Gesture](#gesture)\n    - [OnChange](#onChange)\n- [List](#list)\n- [Containers](#containers)\n    - [NavigationView](#navigationview)\n    - [TabView](#tabView)\n    - [Group](#group)\n- [Alerts and Action Sheets](#alerts-and-action-sheets)\n- [Navigation](#navigation)\n- [Work with UIKit](#work-with-uikit)\n    - [Navigate to ViewController](#navigate-to-viewcontroller)\n    - [Use UIKit and SwiftUI Views Together](#use-uikit-and-swiftui-views-together)\n\n# Resource\n- [SwiftUI Tutorials (Official)](https://developer.apple.com/tutorials/swiftui/creating-and-combining-views)\n- [Introducing SwiftUI: Building Your First App (Official)](https://developer.apple.com/videos/play/wwdc2019/204/)\n- [SwiftUI: Getting Started Raywenderlich](https://www.raywenderlich.com/3715234-swiftui-getting-started)\n- [SwiftUI Essentials (Official)](https://developer.apple.com/videos/play/wwdc2019/216)\n- [SwiftUI - How to setup a project](https://medium.com/@martinlasek/swiftui-getting-started-372389fff423)\n- [About SwiftUI](https://github.com/Juanpe/About-SwiftUI)\n\n\n# UIKit equivalent in SwiftUI\n| UIKit | [SwiftUI](https://developer.apple.com/xcode/swiftui/) |\n| ----------- | ----------- |\n| UILabel | [Text](#text) \u0026 [Label](#label)|\n| UIImageView | [Image](#image) |\n| UITextField | [TextField](#textfield) |\n| UITextView | [TextEditor](#texteditor) |\n| UISwitch | [Toggle](#toggle) |\n| UISlider | [Slider](#slider) |\n| UIButton | [Button](#button) |\n| UITableView | [List](#list) |\n| UICollectionView | [LazyVGrid](#lazyvgrid) / [LazyHGrid](#lazyhgrid) |\n| UINavigationController | [NavigationView](#navigationview) |\n| UITabBarController | [TabView](#tabview) |\n| UIAlertController with style .alert | [Alert](#alerts-and-action-sheets) |\n| UIAlertController with style .actionSheet | [ActionSheet](#alerts-and-action-sheets) |\n| UIStackView with horizontal axis| [HStack](#hstack) / [LazyHStack](#lazyhstack) |\n| UIStackView with vertical axis| [VStack](#vstack) / [LazyVStack](#lazyvstack) |\n| UISegmentedControl | [Picker](#picker) |\n| UIStepper | [Stepper](#stepper) |\n| UIDatePicker | [DatePicker](#date-picker) |\n| NSAttributedString | No equivalent (use [Text](#text)) |\n| MapKit | [Map](#map) |\n| UIProgressView | [ProgressView](#progressview) |\n\n\n\n# View\n\n### Text\n\nTo show a **text** in UI simply write:\n``` swift\nText(\"Hello World\")\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/view/text/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nTo add style\n\n``` swift\nText(\"Hello World\")\n    .font(.largeTitle)\n    .foregroundColor(Color.green)\n    .lineSpacing(50)\n    .lineLimit(nil)\n    .padding()\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/view/text/2.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nTo format text inside text view\n\n``` swift\nstatic let dateFormatter: DateFormatter = {\n    let formatter = DateFormatter()\n    formatter.dateStyle = .long\n    return formatter\n}()\n\nvar now = Date()\nvar body: some View {\n    Text(\"Task due date: \\(now, formatter: Self.dateFormatter)\")\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/view/text/3.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### Label\nLabels are a much-needed addition in the latest SwiftUI iteration. They let you set icons alongside text with the following line of code.\n\n``` swift\nLabel(\"SwiftUI CheatSheet 2.0\", systemImage: \"up.icloud\")\n```\n\nIt's possible to set URL, upon clicking which will redirect to browser.\n\n``` swift\nLink(\"Click me\",destination: URL(string: \"your_url\")!)\n```\n\n### TextEditor\nMulti-line scrollable UITextViews natively in SwiftUI\n\n``` swift\nTextEditor(text: $currentText)\n                .onChange(of: clearText) { value in\n                    if clearText {\n                        currentText = \"\"\n                    }\n                }\n```\n\n### Map\nMapKit natively in SwiftUI\n\n``` swift\nMap(mapRect:interactionModes:showsUserLocation: userTrackingMode:\n```\n\n### Image\n To show image\n \n``` swift\nImage(\"hello_world\") //image name is hello_world\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/view/image/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nTo use system icon\n``` swift\nImage(systemName: \"cloud.heavyrain.fill\")\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/view/image/2.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nyou can add style to system icon set\n\n``` swift\nImage(systemName: \"cloud.heavyrain.fill\")\n    .foregroundColor(.red)\n    .font(.largeTitle)\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/view/image/3.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nAdd style to Image\n\n``` swift\nImage(\"hello_world\")\n    .resizable() //it will sized so that it fills all the available space\n    .aspectRatio(contentMode: .fill)\n    .padding(.bottom)\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/view/image/4.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### Shape\n\nTo create Rectangle\n\n``` swift\nRectangle()\n    .fill(Color.red)\n    .frame(width: 200, height: 200)\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/view/shape/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nTo create circle\n\n``` swift\nCircle()\n    .fill(Color.blue)\n    .frame(width: 50, height: 50)\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/view/shape/2.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### ProgressView\n\nTo show a ProgressView\n``` swift\nProgressView(\"Text\", value: 10, total: 100)\n```\n\n# Layout\n\n### Background\nTo use image as a background\n\n``` swift\nText(\"Hello World\")\n    .font(.largeTitle)\n    .background(\n        Image(\"hello_world\")\n            .resizable()\n            .frame(width: 100, height: 100)\n    )\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/layout/background/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nGradient background\n\n``` swift\nText(\"Hello World\")\n    .background(\n        LinearGradient(\n            gradient: Gradient(colors: [.white, .red, .black]), \n            startPoint: .leading, \n            endPoint: .trailing\n        ),\n        cornerRadius: 0\n    )\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/layout/background/2.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### VStack\nShows child view vertically\n\n``` swift\nVStack {\n    Text(\"Hello\")\n    Text(\"World\")\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/layout/vstack/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nStyling\n\n``` swift\nVStack(alignment: .leading, spacing: 20) {\n    Text(\"Hello\")\n    Divider()\n    Text(\"World\")\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/layout/vstack/2.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### HStack\nShows child view horizontally\n\n``` swift\nHStack {\n    Text(\"Hello\")\n    Text(\"World\")\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/layout/hstack/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### ZStack\n\nTo create overlapping content use ZStack\n\n``` swift\nZStack() {\n    Image(\"hello_world\")\n    Text(\"Hello World\")\n        .font(.largeTitle)\n        .background(Color.black)\n        .foregroundColor(.white)\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/layout/zstack/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### LazyVStack\n\nIt loads content as and when it’s needed thus improving performance\n\n``` swift\n  ScrollView(.horizontal) {\n           LazyVStack(spacing: 10) {\n                ForEach(0..\u003c1000) { index in\n                    Text(\"\\(index)\")\n                            .frame(width: 100, height: 200)\n                            .border(Color.gray.opacity(0.5), width: 0.5)\n                            .background(Color.blue)\n                            .cornerRadius(6)\n                }\n            }\n            .padding(.leading, 10)\n        }\n```\n\n### LazyHStack\n\nIt loads content as and when it’s needed thus improving performance\n\n``` swift\n  ScrollView(.horizontal) {\n            LazyHStack(spacing: 10) {\n                ForEach(0..\u003c1000) { index in\n                    Text(\"\\(index)\")\n                            .frame(width: 100, height: 200)\n                            .border(Color.gray.opacity(0.5), width: 0.5)\n                            .background(Color.blue)\n                            .cornerRadius(6)\n                }\n            }\n            .padding(.leading, 10)\n        }\n```\n\n### LazyVGrid\nA containers for grid-based layouts that let you set child views vertically in LazyVGrid. Each element of a SwiftUI grid is a GridItem. We can set the alignments, spacing, and size of the GridItem\n\n\n``` swift\nstruct ContentView: View {\n    \n    let colors: [Color] = [.red, .green, .yellow, .blue]\n    \n    var columns: [GridItem] =\n        Array(repeating: .init(.flexible(), alignment: .center), count: 3)\n    \n    var body: some View {\n        ScrollView {\n            LazyVGrid(columns: columns, spacing: 10) {\n                ForEach(0...100, id: \\.self) { index in\n                    Text(\"Tab \\(index)\")\n                        .frame(width: 110, height: 200)\n                        .background(colors[index % colors.count])\n                    .cornerRadius(8)\n                }\n            }\n        }\n    }\n}\n\n```\n\n### LazyHGrid\nA containers for grid-based layouts that let you set child views horizontally in LazyHGrid\n\n\n``` swift\nstruct ContentView: View {\n    \n    let colors: [Color] = [.red, .green, .yellow, .blue]\n    \n    var columns: [GridItem] =\n        Array(repeating: .init(.flexible(), alignment: .center), count: 3)\n    \n    var body: some View {\n        ScrollView {\n            LazyHGrid(columns: columns, spacing: 10) {\n                ForEach(0...100, id: \\.self) { index in\n                    Text(\"Tab \\(index)\")\n                        .frame(width: 110, height: 200)\n                        .background(colors[index % colors.count])\n                    .cornerRadius(8)\n                }\n            }\n        }\n    }\n}\n\n```\n\n# Input\n\n### Toggle\n\nToggle lets users move between true and false states\n\n``` swift\n@State var isShowing = true //state\n\nToggle(isOn: $isShowing) {\n    Text(\"Hello World\")\n}.padding()\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/input/toggle/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### Button\nTo create button\n\n``` swift\nButton(\n    action: {\n        // do something\n    },\n    label: { Text(\"Click Me\") }\n)\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/input/button/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nTo create image Button\n\n``` swift\nButton(\n    action: {\n        // do something\n    },\n    label: { Image(\"hello_world\") }\n)\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/input/button/2.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### TextField\n\nIt heavily relies in state, simply create a state and pass it as it will bind to it\n\n``` swift\n@State var fullName: String = \"Joe\" //create State\n\nTextField($fullName) // passing it to bind\n    .textFieldStyle(.roundedBorder) // adds border\n\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/input/textfield/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nTo create secure TextField\n\n``` swift\n@State var password: String = \"\" // create State\n\nSecureField($password) // passing it to bind\n    .textFieldStyle(.roundedBorder) // adds border\n\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/input/textfield/2.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### Slider\n\n``` swift\n@State var value: Double = 0 // create State\n    \nSlider(value: $value, from: -100, through: 100, by: 1)\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/input/slider/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### Date Picker\n\n``` swift\n@State var selectedDate = Date()\nDatePicker(\n    $selectedDate,\n    maximumDate: Date(),\n    displayedComponents: .date\n)\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/input/date_picker/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### Picker\n\n``` swift\n@State var favoriteColor = 0\nvar colors = [\"Red\", \"Green\", \"Blue\"]\n\nPicker(\"Favorite Color\", selection: $favoriteColor) {\n    ForEach(0 ..\u003c colors.count) { index in\n        Text(self.colors[index])\n            .tag(index)\n    }\n}\n.pickerStyle(SegmentedPickerStyle())\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/input/picker/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### Stepper\n\n``` swift\n@State var count:Int = 0\n\nStepper(\n    onIncrement: { self.count += 1 }, \n    onDecrement: { self.count -= 1 }, \n    label: { Text(\"Count is \\(count)\") }\n)\n```\n\nor\n\n``` swift\n@State var count:Int = 0\n\nStepper(value: $count, in: 1...10) {\n    Text(\"Count is \\(count)\")\n}\n```\nor\n\n``` swift\n@State private var temperature = 0.0\n\nStepper(value: $temperature, in: 0...100.0, step: 0.5) {\n                Text(\"Temperature is \\(temperature, specifier:\"%g\")\")\n            }\n```\n\n### Tap\nFor single tap\n\n``` swift\nText(\"Tap me!\")\n    .onTapGesture {\n        print(\"Tapped!\")\n    }\n```\nFor double tap\n\n``` swift\nText(\"Tap me!\")\n    .onTapGesture(count: 2) {\n        print(\"Tapped!\")\n    }\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/input/tap/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### Gesture\n Gesture like **TapGesture**, **LongPressGesture**, **DragGesture**\n\n``` swift\nText(\"Tap\")\n    .gesture(\n        TapGesture()\n            .onEnded { _ in\n                // do something\n            }\n    )\n\nText(\"Drag Me\")\n    .gesture(\n        DragGesture(minimumDistance: 50)\n            .onEnded { _ in\n                // do something\n            }\n    )\n\nText(\"Long Press\")\n    .gesture(\n        LongPressGesture(minimumDuration: 2)\n            .onEnded { _ in\n                // do something\n            }\n    )\n```\n\n### OnChange\n\nonChange is a new view modifier that’s available across all SwiftUI views. It lets you listen to state changes and perform actions on a view accordingly.\n\n``` swift\n\n TextEditor(text: $currentText)\n                .onChange(of: clearText) { value in\n                    if clearText{\n                        currentText = \"\"\n                    }\n                }\n\n```\n\n# List\n\nTo create static scrollable **List**\n\n``` swift\nList {\n    Text(\"Hello world\")\n    Text(\"Hello world\")\n    Text(\"Hello world\")\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/list/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nTo create dynamic **List**\n``` swift\nlet names = [\"Thanos\", \"Iron man\", \"Ant man\"]\nList(names, id: \\.self) { name in\n    Text(name)\n}\n```\n\nTo add section\n\n``` swift\nList {\n    Section(header: Text(\"Good Hero\")) {\n        Text(\"Thanos\")\n    }\n\n    Section(header: Text(\"Bad Heros\")) {\n        Text(\"Iron man\")\n    }\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/list/2.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nTo make it grouped add *.listStyle(GroupedListStyle())*\n\n``` swift\nList {\n    Section(header: Text(\"Good Hero\")) {\n        Text(\"Thanos\")\n    }\n\n    Section(header: Text(\"Bad Heros\")) {\n        Text(\"Iron man\")\n    }\n}.listStyle(GroupedListStyle())\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/list/3.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nTo add a footer to a section\n\n``` swift\nList {\n    Section(header: Text(\"Good Heros\"), footer: Text(\"Powerful\")){\n        Text(\"Thanos\")\n    }\n    Section(header: Text(\"Bad Heros\"), footer: Text(\"Not as Powerful\")){\n        Text(\"Iron Man\")\n    }\n}.listStyle(GroupedListStyle())\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/list/3.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n# Containers\n\n### NavigationView\n\n**NavigationView** is more/less like **UINavigationController**, It handles navigation between views, shows title, places navigation bar on top. \n\n``` swift\nNavigationView {\n    Text(\"Hello\")\n        .navigationBarTitle(Text(\"World\"), displayMode: .inline)\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/containers/navigationview/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nFor large title use *.large*\n\nAdd bar items to **NavigationView**\n\n``` swift\nNavigationView {\n    Text(\"Hello\")\n        .navigationBarTitle(Text(\"World\"), displayMode: .inline)\n        .navigationBarItems(\n            trailing:\n                Button(\n                    action: { print(\"Going to Setting\") },\n                    label: { Text(\"Setting\") }\n                )\n        )\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/containers/navigationview/2.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### TabView\n\n**TabView** creates a container similar to **UITabBarController** with radio-style selection control which determines which `View` is presented.\n\n``` swift\n@State private var selection = 0\n\nTabView(selection: $selection) {\n    Text(\"View A\")\n        .font(.title)\n        .tabItemLabel(Text(\"View A\")\n            .font(.caption))\n        .tag(0)\n    Text(\"View B\")\n        .font(.title)\n        .tabItemLabel(Text(\"View B\")\n            .font(.caption))\n        .tag(1)\n    Text(\"View C\")\n        .font(.title)\n        .tabItemLabel(Text(\"View C\")\n            .font(.caption))\n        .tag(2)\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/containers/tabview/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### Group\nGroup creates several views to act as one, also to avoid Stack's 10 View maximum limit.\n\n``` swift\nVStack {\n    Group {\n        Text(\"Hello\")\n        Text(\"Hello\")\n        Text(\"Hello\")\n    }\n    Group {\n        Text(\"Hello\")\n        Text(\"Hello\")\n    }\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/containers/group/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n# Alerts and Action Sheets\nTo Show an Alert\n\n``` swift\nAlert(\n    title: Text(\"Title\"), \n    message: Text(\"message\"), \n    dismissButton: .default(Text(\"Ok!\"))\n)\n\n```\nTo Show Action Sheet\n\n``` swift\nActionSheet(\n    title: Text(\"Title\"), \n    message: Text(\"Message\"), \n    buttons: [\n        .default(Text(\"Ok!\"), action: { print(\"hello\") })\n    ]\n)\n```\n\n# Navigation\nNavigate via **NavigationLink**\n\n``` swift\nNavigationView {\n    NavigationLink(destination: SecondView()) {\n        Text(\"Show\")\n    }.navigationBarTitle(Text(\"First View\"))\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\n\u003cp\u003e\n\n![](./assets/images/navigation/1.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\nNavigate via tap on List Item\n\n``` swift\nlet names = [\"Thanos\", \"Iron man\", \"Ant man\"]\nList(names, id: \\.self) { name in\n    NavigationLink(destination: HeroView(name: name)) {\n        Text(name)\n    }\n}\n```\n\n# Work with UIKit\n\n### Navigate to ViewController\n\n\u003e  It's possible to work with UIKit components from SwiftUI or call SwiftUI views as View Controllers from UIKit. \n\nLet's say you have a View Controller named SuperVillainViewController and want to call it from a SwiftUI view, to do that ViewController needs to implement UIViewControllerRepresentable:\n\n``` swift\nstruct SuperVillainViewController: UIViewControllerRepresentable {\n    var controllers: [UIViewController]\n    func makeUIViewcontroller(context: Context) -\u003e SuperVillainViewController {\n        // you could have a custom constructor here, I'm just keeping it simple\n        let vc = SuperVillainViewController()\n        return vc\n    }\n}\n```\nNow you can use it like \n\n``` swift\nNavigationLink(destination: SuperVillainViewController()) {\n    Text(\"Click\")\n}\n```\n### Use UIKit and SwiftUI Views Together\n\n\u003e To use UIView subclasses from within SwiftUI, you wrap the other view in a SwiftUI view that conforms to the UIViewRepresentable protocol. ([Reference](https://developer.apple.com/tutorials/swiftui/creating-and-combining-views#use-uikit-and-swiftui-views-together))\n\nas example \n\n``` swift\n\nimport SwiftUI\nimport MapKit\n\nstruct MapView: UIViewRepresentable {\n    func makeUIView(context: Context) -\u003e MKMapView {\n        MKMapView(frame: .zero)\n    }\n\n    func updateUIView(_ view: MKMapView, context: Context) {\n        let coordinate = CLLocationCoordinate2D(\n            latitude: 34.011286, \n            longitude: -116.166868\n        )\n        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)\n        let region = MKCoordinateRegion(center: coordinate, span: span)\n        view.setRegion(region, animated: true)\n    }\n}\n\nstruct MapView_Preview: PreviewProvider {\n    static var previews: some View {\n        MapView()\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimpleboilerplates%2Fswiftui-cheat-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimpleboilerplates%2Fswiftui-cheat-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimpleboilerplates%2Fswiftui-cheat-sheet/lists"}