├── .gitignore ├── LICENSE ├── README.md └── assets ├── images ├── containers │ ├── group │ │ └── 1.png │ ├── navigationview │ │ ├── 1.png │ │ └── 2.png │ └── tabview │ │ └── 1.png ├── input │ ├── button │ │ ├── 1.png │ │ └── 2.png │ ├── date_picker │ │ └── 1.png │ ├── picker │ │ └── 1.png │ ├── slider │ │ └── 1.png │ ├── tap │ │ └── 1.png │ ├── textfield │ │ ├── 1.png │ │ └── 2.png │ └── toggle │ │ └── 1.png ├── layout │ ├── background │ │ ├── 1.png │ │ └── 2.png │ ├── hstack │ │ └── 1.png │ ├── vstack │ │ ├── 1.png │ │ └── 2.png │ └── zstack │ │ └── 1.png ├── list │ ├── 1.png │ ├── 2.png │ └── 3.png ├── navigation │ └── 1.png └── view │ ├── image │ ├── 1.png │ ├── 2.png │ ├── 3.png │ └── 4.png │ ├── shape │ ├── 1.png │ └── 2.png │ └── text │ ├── 1.png │ ├── 2.png │ └── 3.png └── swift-ui-logo.png /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Simple Boilerplates 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SwiftUI 2.0 Cheat Sheet 2 | 3 | ![SwiftUI](./assets/swift-ui-logo.png) 4 | 5 | 6 | ### Table of Contents 7 | - [SwiftUI Cheat Sheet](#swiftui-cheat-sheet) 8 | - [Table of Contents](#table-of-contents) 9 | - [Resource](#resource) 10 | - [UIKit equivalent in SwiftUI](#uikit-equivalent-in-swiftui) 11 | - [View](#view) 12 | - [Text](#text) 13 | - [Label](#label) 14 | - [TextEditor](#texteditor) 15 | - [Image](#image) 16 | - [Shape](#shape) 17 | - [ProgressView](#progressview) 18 | - [Map](#map) 19 | - [Layout](#layout) 20 | - [Background](#background) 21 | - [VStack](#vstack) 22 | - [HStack](#hstack) 23 | - [ZStack](#zstack) 24 | - [LazyVStack](#lazyvstack) 25 | - [LazyHStack](#lazyhstack) 26 | - [LazyVGrid](#lazyvgrid) 27 | - [LazyHGrid](#lazyhgrid) 28 | - [Input](#input) 29 | - [Toggle](#toggle) 30 | - [Button](#button) 31 | - [TextField](#textfield) 32 | - [Slider](#slider) 33 | - [Date Picker](#date-picker) 34 | - [Picker](#picker) 35 | - [Stepper](#stepper) 36 | - [Tap](#tap) 37 | - [Gesture](#gesture) 38 | - [OnChange](#onChange) 39 | - [List](#list) 40 | - [Containers](#containers) 41 | - [NavigationView](#navigationview) 42 | - [TabView](#tabView) 43 | - [Group](#group) 44 | - [Alerts and Action Sheets](#alerts-and-action-sheets) 45 | - [Navigation](#navigation) 46 | - [Work with UIKit](#work-with-uikit) 47 | - [Navigate to ViewController](#navigate-to-viewcontroller) 48 | - [Use UIKit and SwiftUI Views Together](#use-uikit-and-swiftui-views-together) 49 | 50 | # Resource 51 | - [SwiftUI Tutorials (Official)](https://developer.apple.com/tutorials/swiftui/creating-and-combining-views) 52 | - [Introducing SwiftUI: Building Your First App (Official)](https://developer.apple.com/videos/play/wwdc2019/204/) 53 | - [SwiftUI: Getting Started Raywenderlich](https://www.raywenderlich.com/3715234-swiftui-getting-started) 54 | - [SwiftUI Essentials (Official)](https://developer.apple.com/videos/play/wwdc2019/216) 55 | - [SwiftUI - How to setup a project](https://medium.com/@martinlasek/swiftui-getting-started-372389fff423) 56 | - [About SwiftUI](https://github.com/Juanpe/About-SwiftUI) 57 | 58 | 59 | # UIKit equivalent in SwiftUI 60 | | UIKit | [SwiftUI](https://developer.apple.com/xcode/swiftui/) | 61 | | ----------- | ----------- | 62 | | UILabel | [Text](#text) & [Label](#label)| 63 | | UIImageView | [Image](#image) | 64 | | UITextField | [TextField](#textfield) | 65 | | UITextView | [TextEditor](#texteditor) | 66 | | UISwitch | [Toggle](#toggle) | 67 | | UISlider | [Slider](#slider) | 68 | | UIButton | [Button](#button) | 69 | | UITableView | [List](#list) | 70 | | UICollectionView | [LazyVGrid](#lazyvgrid) / [LazyHGrid](#lazyhgrid) | 71 | | UINavigationController | [NavigationView](#navigationview) | 72 | | UITabBarController | [TabView](#tabview) | 73 | | UIAlertController with style .alert | [Alert](#alerts-and-action-sheets) | 74 | | UIAlertController with style .actionSheet | [ActionSheet](#alerts-and-action-sheets) | 75 | | UIStackView with horizontal axis| [HStack](#hstack) / [LazyHStack](#lazyhstack) | 76 | | UIStackView with vertical axis| [VStack](#vstack) / [LazyVStack](#lazyvstack) | 77 | | UISegmentedControl | [Picker](#picker) | 78 | | UIStepper | [Stepper](#stepper) | 79 | | UIDatePicker | [DatePicker](#date-picker) | 80 | | NSAttributedString | No equivalent (use [Text](#text)) | 81 | | MapKit | [Map](#map) | 82 | | UIProgressView | [ProgressView](#progressview) | 83 | 84 | 85 | 86 | # View 87 | 88 | ### Text 89 | 90 | To show a **text** in UI simply write: 91 | ``` swift 92 | Text("Hello World") 93 | ``` 94 | 95 |
Screenshot 96 |

97 | 98 | ![](./assets/images/view/text/1.png) 99 | 100 |

101 |
102 | 103 | To add style 104 | 105 | ``` swift 106 | Text("Hello World") 107 | .font(.largeTitle) 108 | .foregroundColor(Color.green) 109 | .lineSpacing(50) 110 | .lineLimit(nil) 111 | .padding() 112 | ``` 113 | 114 |
Screenshot 115 |

116 | 117 | ![](./assets/images/view/text/2.png) 118 | 119 |

120 |
121 | 122 | To format text inside text view 123 | 124 | ``` swift 125 | static let dateFormatter: DateFormatter = { 126 | let formatter = DateFormatter() 127 | formatter.dateStyle = .long 128 | return formatter 129 | }() 130 | 131 | var now = Date() 132 | var body: some View { 133 | Text("Task due date: \(now, formatter: Self.dateFormatter)") 134 | } 135 | ``` 136 | 137 |
Screenshot 138 |

139 | 140 | ![](./assets/images/view/text/3.png) 141 | 142 |

143 |
144 | 145 | ### Label 146 | Labels are a much-needed addition in the latest SwiftUI iteration. They let you set icons alongside text with the following line of code. 147 | 148 | ``` swift 149 | Label("SwiftUI CheatSheet 2.0", systemImage: "up.icloud") 150 | ``` 151 | 152 | It's possible to set URL, upon clicking which will redirect to browser. 153 | 154 | ``` swift 155 | Link("Click me",destination: URL(string: "your_url")!) 156 | ``` 157 | 158 | ### TextEditor 159 | Multi-line scrollable UITextViews natively in SwiftUI 160 | 161 | ``` swift 162 | TextEditor(text: $currentText) 163 | .onChange(of: clearText) { value in 164 | if clearText { 165 | currentText = "" 166 | } 167 | } 168 | ``` 169 | 170 | ### Map 171 | MapKit natively in SwiftUI 172 | 173 | ``` swift 174 | Map(mapRect:interactionModes:showsUserLocation: userTrackingMode: 175 | ``` 176 | 177 | ### Image 178 | To show image 179 | 180 | ``` swift 181 | Image("hello_world") //image name is hello_world 182 | ``` 183 | 184 |
Screenshot 185 |

186 | 187 | ![](./assets/images/view/image/1.png) 188 | 189 |

190 |
191 | 192 | To use system icon 193 | ``` swift 194 | Image(systemName: "cloud.heavyrain.fill") 195 | ``` 196 | 197 |
Screenshot 198 |

199 | 200 | ![](./assets/images/view/image/2.png) 201 | 202 |

203 |
204 | 205 | you can add style to system icon set 206 | 207 | ``` swift 208 | Image(systemName: "cloud.heavyrain.fill") 209 | .foregroundColor(.red) 210 | .font(.largeTitle) 211 | ``` 212 | 213 |
Screenshot 214 |

215 | 216 | ![](./assets/images/view/image/3.png) 217 | 218 |

219 |
220 | 221 | Add style to Image 222 | 223 | ``` swift 224 | Image("hello_world") 225 | .resizable() //it will sized so that it fills all the available space 226 | .aspectRatio(contentMode: .fill) 227 | .padding(.bottom) 228 | ``` 229 | 230 |
Screenshot 231 |

232 | 233 | ![](./assets/images/view/image/4.png) 234 | 235 |

236 |
237 | 238 | ### Shape 239 | 240 | To create Rectangle 241 | 242 | ``` swift 243 | Rectangle() 244 | .fill(Color.red) 245 | .frame(width: 200, height: 200) 246 | ``` 247 | 248 |
Screenshot 249 |

250 | 251 | ![](./assets/images/view/shape/1.png) 252 | 253 |

254 |
255 | 256 | To create circle 257 | 258 | ``` swift 259 | Circle() 260 | .fill(Color.blue) 261 | .frame(width: 50, height: 50) 262 | ``` 263 | 264 |
Screenshot 265 |

266 | 267 | ![](./assets/images/view/shape/2.png) 268 | 269 |

270 |
271 | 272 | ### ProgressView 273 | 274 | To show a ProgressView 275 | ``` swift 276 | ProgressView("Text", value: 10, total: 100) 277 | ``` 278 | 279 | # Layout 280 | 281 | ### Background 282 | To use image as a background 283 | 284 | ``` swift 285 | Text("Hello World") 286 | .font(.largeTitle) 287 | .background( 288 | Image("hello_world") 289 | .resizable() 290 | .frame(width: 100, height: 100) 291 | ) 292 | ``` 293 | 294 |
Screenshot 295 |

296 | 297 | ![](./assets/images/layout/background/1.png) 298 | 299 |

300 |
301 | 302 | Gradient background 303 | 304 | ``` swift 305 | Text("Hello World") 306 | .background( 307 | LinearGradient( 308 | gradient: Gradient(colors: [.white, .red, .black]), 309 | startPoint: .leading, 310 | endPoint: .trailing 311 | ), 312 | cornerRadius: 0 313 | ) 314 | ``` 315 | 316 |
Screenshot 317 |

318 | 319 | ![](./assets/images/layout/background/2.png) 320 | 321 |

322 |
323 | 324 | ### VStack 325 | Shows child view vertically 326 | 327 | ``` swift 328 | VStack { 329 | Text("Hello") 330 | Text("World") 331 | } 332 | ``` 333 | 334 |
Screenshot 335 |

336 | 337 | ![](./assets/images/layout/vstack/1.png) 338 | 339 |

340 |
341 | 342 | Styling 343 | 344 | ``` swift 345 | VStack(alignment: .leading, spacing: 20) { 346 | Text("Hello") 347 | Divider() 348 | Text("World") 349 | } 350 | ``` 351 | 352 |
Screenshot 353 |

354 | 355 | ![](./assets/images/layout/vstack/2.png) 356 | 357 |

358 |
359 | 360 | ### HStack 361 | Shows child view horizontally 362 | 363 | ``` swift 364 | HStack { 365 | Text("Hello") 366 | Text("World") 367 | } 368 | ``` 369 | 370 |
Screenshot 371 |

372 | 373 | ![](./assets/images/layout/hstack/1.png) 374 | 375 |

376 |
377 | 378 | ### ZStack 379 | 380 | To create overlapping content use ZStack 381 | 382 | ``` swift 383 | ZStack() { 384 | Image("hello_world") 385 | Text("Hello World") 386 | .font(.largeTitle) 387 | .background(Color.black) 388 | .foregroundColor(.white) 389 | } 390 | ``` 391 | 392 |
Screenshot 393 |

394 | 395 | ![](./assets/images/layout/zstack/1.png) 396 | 397 |

398 |
399 | 400 | ### LazyVStack 401 | 402 | It loads content as and when it’s needed thus improving performance 403 | 404 | ``` swift 405 | ScrollView(.horizontal) { 406 | LazyVStack(spacing: 10) { 407 | ForEach(0..<1000) { index in 408 | Text("\(index)") 409 | .frame(width: 100, height: 200) 410 | .border(Color.gray.opacity(0.5), width: 0.5) 411 | .background(Color.blue) 412 | .cornerRadius(6) 413 | } 414 | } 415 | .padding(.leading, 10) 416 | } 417 | ``` 418 | 419 | ### LazyHStack 420 | 421 | It loads content as and when it’s needed thus improving performance 422 | 423 | ``` swift 424 | ScrollView(.horizontal) { 425 | LazyHStack(spacing: 10) { 426 | ForEach(0..<1000) { index in 427 | Text("\(index)") 428 | .frame(width: 100, height: 200) 429 | .border(Color.gray.opacity(0.5), width: 0.5) 430 | .background(Color.blue) 431 | .cornerRadius(6) 432 | } 433 | } 434 | .padding(.leading, 10) 435 | } 436 | ``` 437 | 438 | ### LazyVGrid 439 | A 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 440 | 441 | 442 | ``` swift 443 | struct ContentView: View { 444 | 445 | let colors: [Color] = [.red, .green, .yellow, .blue] 446 | 447 | var columns: [GridItem] = 448 | Array(repeating: .init(.flexible(), alignment: .center), count: 3) 449 | 450 | var body: some View { 451 | ScrollView { 452 | LazyVGrid(columns: columns, spacing: 10) { 453 | ForEach(0...100, id: \.self) { index in 454 | Text("Tab \(index)") 455 | .frame(width: 110, height: 200) 456 | .background(colors[index % colors.count]) 457 | .cornerRadius(8) 458 | } 459 | } 460 | } 461 | } 462 | } 463 | 464 | ``` 465 | 466 | ### LazyHGrid 467 | A containers for grid-based layouts that let you set child views horizontally in LazyHGrid 468 | 469 | 470 | ``` swift 471 | struct ContentView: View { 472 | 473 | let colors: [Color] = [.red, .green, .yellow, .blue] 474 | 475 | var columns: [GridItem] = 476 | Array(repeating: .init(.flexible(), alignment: .center), count: 3) 477 | 478 | var body: some View { 479 | ScrollView { 480 | LazyHGrid(columns: columns, spacing: 10) { 481 | ForEach(0...100, id: \.self) { index in 482 | Text("Tab \(index)") 483 | .frame(width: 110, height: 200) 484 | .background(colors[index % colors.count]) 485 | .cornerRadius(8) 486 | } 487 | } 488 | } 489 | } 490 | } 491 | 492 | ``` 493 | 494 | # Input 495 | 496 | ### Toggle 497 | 498 | Toggle lets users move between true and false states 499 | 500 | ``` swift 501 | @State var isShowing = true //state 502 | 503 | Toggle(isOn: $isShowing) { 504 | Text("Hello World") 505 | }.padding() 506 | ``` 507 | 508 |
Screenshot 509 |

510 | 511 | ![](./assets/images/input/toggle/1.png) 512 | 513 |

514 |
515 | 516 | ### Button 517 | To create button 518 | 519 | ``` swift 520 | Button( 521 | action: { 522 | // do something 523 | }, 524 | label: { Text("Click Me") } 525 | ) 526 | ``` 527 | 528 |
Screenshot 529 |

530 | 531 | ![](./assets/images/input/button/1.png) 532 | 533 |

534 |
535 | 536 | To create image Button 537 | 538 | ``` swift 539 | Button( 540 | action: { 541 | // do something 542 | }, 543 | label: { Image("hello_world") } 544 | ) 545 | ``` 546 | 547 |
Screenshot 548 |

549 | 550 | ![](./assets/images/input/button/2.png) 551 | 552 |

553 |
554 | 555 | ### TextField 556 | 557 | It heavily relies in state, simply create a state and pass it as it will bind to it 558 | 559 | ``` swift 560 | @State var fullName: String = "Joe" //create State 561 | 562 | TextField($fullName) // passing it to bind 563 | .textFieldStyle(.roundedBorder) // adds border 564 | 565 | ``` 566 | 567 |
Screenshot 568 |

569 | 570 | ![](./assets/images/input/textfield/1.png) 571 | 572 |

573 |
574 | 575 | To create secure TextField 576 | 577 | ``` swift 578 | @State var password: String = "" // create State 579 | 580 | SecureField($password) // passing it to bind 581 | .textFieldStyle(.roundedBorder) // adds border 582 | 583 | ``` 584 | 585 |
Screenshot 586 |

587 | 588 | ![](./assets/images/input/textfield/2.png) 589 | 590 |

591 |
592 | 593 | ### Slider 594 | 595 | ``` swift 596 | @State var value: Double = 0 // create State 597 | 598 | Slider(value: $value, from: -100, through: 100, by: 1) 599 | ``` 600 | 601 |
Screenshot 602 |

603 | 604 | ![](./assets/images/input/slider/1.png) 605 | 606 |

607 |
608 | 609 | ### Date Picker 610 | 611 | ``` swift 612 | @State var selectedDate = Date() 613 | DatePicker( 614 | $selectedDate, 615 | maximumDate: Date(), 616 | displayedComponents: .date 617 | ) 618 | ``` 619 | 620 |
Screenshot 621 |

622 | 623 | ![](./assets/images/input/date_picker/1.png) 624 | 625 |

626 |
627 | 628 | ### Picker 629 | 630 | ``` swift 631 | @State var favoriteColor = 0 632 | var colors = ["Red", "Green", "Blue"] 633 | 634 | Picker("Favorite Color", selection: $favoriteColor) { 635 | ForEach(0 ..< colors.count) { index in 636 | Text(self.colors[index]) 637 | .tag(index) 638 | } 639 | } 640 | .pickerStyle(SegmentedPickerStyle()) 641 | ``` 642 | 643 |
Screenshot 644 |

645 | 646 | ![](./assets/images/input/picker/1.png) 647 | 648 |

649 |
650 | 651 | ### Stepper 652 | 653 | ``` swift 654 | @State var count:Int = 0 655 | 656 | Stepper( 657 | onIncrement: { self.count += 1 }, 658 | onDecrement: { self.count -= 1 }, 659 | label: { Text("Count is \(count)") } 660 | ) 661 | ``` 662 | 663 | or 664 | 665 | ``` swift 666 | @State var count:Int = 0 667 | 668 | Stepper(value: $count, in: 1...10) { 669 | Text("Count is \(count)") 670 | } 671 | ``` 672 | or 673 | 674 | ``` swift 675 | @State private var temperature = 0.0 676 | 677 | Stepper(value: $temperature, in: 0...100.0, step: 0.5) { 678 | Text("Temperature is \(temperature, specifier:"%g")") 679 | } 680 | ``` 681 | 682 | ### Tap 683 | For single tap 684 | 685 | ``` swift 686 | Text("Tap me!") 687 | .onTapGesture { 688 | print("Tapped!") 689 | } 690 | ``` 691 | For double tap 692 | 693 | ``` swift 694 | Text("Tap me!") 695 | .onTapGesture(count: 2) { 696 | print("Tapped!") 697 | } 698 | ``` 699 | 700 |
Screenshot 701 |

702 | 703 | ![](./assets/images/input/tap/1.png) 704 | 705 |

706 |
707 | 708 | ### Gesture 709 | Gesture like **TapGesture**, **LongPressGesture**, **DragGesture** 710 | 711 | ``` swift 712 | Text("Tap") 713 | .gesture( 714 | TapGesture() 715 | .onEnded { _ in 716 | // do something 717 | } 718 | ) 719 | 720 | Text("Drag Me") 721 | .gesture( 722 | DragGesture(minimumDistance: 50) 723 | .onEnded { _ in 724 | // do something 725 | } 726 | ) 727 | 728 | Text("Long Press") 729 | .gesture( 730 | LongPressGesture(minimumDuration: 2) 731 | .onEnded { _ in 732 | // do something 733 | } 734 | ) 735 | ``` 736 | 737 | ### OnChange 738 | 739 | onChange 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. 740 | 741 | ``` swift 742 | 743 | TextEditor(text: $currentText) 744 | .onChange(of: clearText) { value in 745 | if clearText{ 746 | currentText = "" 747 | } 748 | } 749 | 750 | ``` 751 | 752 | # List 753 | 754 | To create static scrollable **List** 755 | 756 | ``` swift 757 | List { 758 | Text("Hello world") 759 | Text("Hello world") 760 | Text("Hello world") 761 | } 762 | ``` 763 | 764 |
Screenshot 765 |

766 | 767 | ![](./assets/images/list/1.png) 768 | 769 |

770 |
771 | 772 | To create dynamic **List** 773 | ``` swift 774 | let names = ["Thanos", "Iron man", "Ant man"] 775 | List(names, id: \.self) { name in 776 | Text(name) 777 | } 778 | ``` 779 | 780 | To add section 781 | 782 | ``` swift 783 | List { 784 | Section(header: Text("Good Hero")) { 785 | Text("Thanos") 786 | } 787 | 788 | Section(header: Text("Bad Heros")) { 789 | Text("Iron man") 790 | } 791 | } 792 | ``` 793 | 794 |
Screenshot 795 |

796 | 797 | ![](./assets/images/list/2.png) 798 | 799 |

800 |
801 | 802 | To make it grouped add *.listStyle(GroupedListStyle())* 803 | 804 | ``` swift 805 | List { 806 | Section(header: Text("Good Hero")) { 807 | Text("Thanos") 808 | } 809 | 810 | Section(header: Text("Bad Heros")) { 811 | Text("Iron man") 812 | } 813 | }.listStyle(GroupedListStyle()) 814 | ``` 815 | 816 |
Screenshot 817 |

818 | 819 | ![](./assets/images/list/3.png) 820 | 821 |

822 |
823 | 824 | To add a footer to a section 825 | 826 | ``` swift 827 | List { 828 | Section(header: Text("Good Heros"), footer: Text("Powerful")){ 829 | Text("Thanos") 830 | } 831 | Section(header: Text("Bad Heros"), footer: Text("Not as Powerful")){ 832 | Text("Iron Man") 833 | } 834 | }.listStyle(GroupedListStyle()) 835 | ``` 836 | 837 |
Screenshot 838 |

839 | 840 | ![](./assets/images/list/3.png) 841 | 842 |

843 |
844 | 845 | # Containers 846 | 847 | ### NavigationView 848 | 849 | **NavigationView** is more/less like **UINavigationController**, It handles navigation between views, shows title, places navigation bar on top. 850 | 851 | ``` swift 852 | NavigationView { 853 | Text("Hello") 854 | .navigationBarTitle(Text("World"), displayMode: .inline) 855 | } 856 | ``` 857 | 858 |
Screenshot 859 |

860 | 861 | ![](./assets/images/containers/navigationview/1.png) 862 | 863 |

864 |
865 | 866 | For large title use *.large* 867 | 868 | Add bar items to **NavigationView** 869 | 870 | ``` swift 871 | NavigationView { 872 | Text("Hello") 873 | .navigationBarTitle(Text("World"), displayMode: .inline) 874 | .navigationBarItems( 875 | trailing: 876 | Button( 877 | action: { print("Going to Setting") }, 878 | label: { Text("Setting") } 879 | ) 880 | ) 881 | } 882 | ``` 883 | 884 |
Screenshot 885 |

886 | 887 | ![](./assets/images/containers/navigationview/2.png) 888 | 889 |

890 |
891 | 892 | ### TabView 893 | 894 | **TabView** creates a container similar to **UITabBarController** with radio-style selection control which determines which `View` is presented. 895 | 896 | ``` swift 897 | @State private var selection = 0 898 | 899 | TabView(selection: $selection) { 900 | Text("View A") 901 | .font(.title) 902 | .tabItemLabel(Text("View A") 903 | .font(.caption)) 904 | .tag(0) 905 | Text("View B") 906 | .font(.title) 907 | .tabItemLabel(Text("View B") 908 | .font(.caption)) 909 | .tag(1) 910 | Text("View C") 911 | .font(.title) 912 | .tabItemLabel(Text("View C") 913 | .font(.caption)) 914 | .tag(2) 915 | } 916 | ``` 917 | 918 |
Screenshot 919 |

920 | 921 | ![](./assets/images/containers/tabview/1.png) 922 | 923 |

924 |
925 | 926 | ### Group 927 | Group creates several views to act as one, also to avoid Stack's 10 View maximum limit. 928 | 929 | ``` swift 930 | VStack { 931 | Group { 932 | Text("Hello") 933 | Text("Hello") 934 | Text("Hello") 935 | } 936 | Group { 937 | Text("Hello") 938 | Text("Hello") 939 | } 940 | } 941 | ``` 942 | 943 |
Screenshot 944 |

945 | 946 | ![](./assets/images/containers/group/1.png) 947 | 948 |

949 |
950 | 951 | # Alerts and Action Sheets 952 | To Show an Alert 953 | 954 | ``` swift 955 | Alert( 956 | title: Text("Title"), 957 | message: Text("message"), 958 | dismissButton: .default(Text("Ok!")) 959 | ) 960 | 961 | ``` 962 | To Show Action Sheet 963 | 964 | ``` swift 965 | ActionSheet( 966 | title: Text("Title"), 967 | message: Text("Message"), 968 | buttons: [ 969 | .default(Text("Ok!"), action: { print("hello") }) 970 | ] 971 | ) 972 | ``` 973 | 974 | # Navigation 975 | Navigate via **NavigationLink** 976 | 977 | ``` swift 978 | NavigationView { 979 | NavigationLink(destination: SecondView()) { 980 | Text("Show") 981 | }.navigationBarTitle(Text("First View")) 982 | } 983 | ``` 984 | 985 |
Screenshot 986 |

987 | 988 | ![](./assets/images/navigation/1.png) 989 | 990 |

991 |
992 | 993 | Navigate via tap on List Item 994 | 995 | ``` swift 996 | let names = ["Thanos", "Iron man", "Ant man"] 997 | List(names, id: \.self) { name in 998 | NavigationLink(destination: HeroView(name: name)) { 999 | Text(name) 1000 | } 1001 | } 1002 | ``` 1003 | 1004 | # Work with UIKit 1005 | 1006 | ### Navigate to ViewController 1007 | 1008 | > It's possible to work with UIKit components from SwiftUI or call SwiftUI views as View Controllers from UIKit. 1009 | 1010 | Let'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: 1011 | 1012 | ``` swift 1013 | struct SuperVillainViewController: UIViewControllerRepresentable { 1014 | var controllers: [UIViewController] 1015 | func makeUIViewcontroller(context: Context) -> SuperVillainViewController { 1016 | // you could have a custom constructor here, I'm just keeping it simple 1017 | let vc = SuperVillainViewController() 1018 | return vc 1019 | } 1020 | } 1021 | ``` 1022 | Now you can use it like 1023 | 1024 | ``` swift 1025 | NavigationLink(destination: SuperVillainViewController()) { 1026 | Text("Click") 1027 | } 1028 | ``` 1029 | ### Use UIKit and SwiftUI Views Together 1030 | 1031 | > 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)) 1032 | 1033 | as example 1034 | 1035 | ``` swift 1036 | 1037 | import SwiftUI 1038 | import MapKit 1039 | 1040 | struct MapView: UIViewRepresentable { 1041 | func makeUIView(context: Context) -> MKMapView { 1042 | MKMapView(frame: .zero) 1043 | } 1044 | 1045 | func updateUIView(_ view: MKMapView, context: Context) { 1046 | let coordinate = CLLocationCoordinate2D( 1047 | latitude: 34.011286, 1048 | longitude: -116.166868 1049 | ) 1050 | let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0) 1051 | let region = MKCoordinateRegion(center: coordinate, span: span) 1052 | view.setRegion(region, animated: true) 1053 | } 1054 | } 1055 | 1056 | struct MapView_Preview: PreviewProvider { 1057 | static var previews: some View { 1058 | MapView() 1059 | } 1060 | } 1061 | ``` 1062 | -------------------------------------------------------------------------------- /assets/images/containers/group/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/containers/group/1.png -------------------------------------------------------------------------------- /assets/images/containers/navigationview/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/containers/navigationview/1.png -------------------------------------------------------------------------------- /assets/images/containers/navigationview/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/containers/navigationview/2.png -------------------------------------------------------------------------------- /assets/images/containers/tabview/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/containers/tabview/1.png -------------------------------------------------------------------------------- /assets/images/input/button/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/input/button/1.png -------------------------------------------------------------------------------- /assets/images/input/button/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/input/button/2.png -------------------------------------------------------------------------------- /assets/images/input/date_picker/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/input/date_picker/1.png -------------------------------------------------------------------------------- /assets/images/input/picker/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/input/picker/1.png -------------------------------------------------------------------------------- /assets/images/input/slider/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/input/slider/1.png -------------------------------------------------------------------------------- /assets/images/input/tap/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/input/tap/1.png -------------------------------------------------------------------------------- /assets/images/input/textfield/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/input/textfield/1.png -------------------------------------------------------------------------------- /assets/images/input/textfield/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/input/textfield/2.png -------------------------------------------------------------------------------- /assets/images/input/toggle/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/input/toggle/1.png -------------------------------------------------------------------------------- /assets/images/layout/background/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/layout/background/1.png -------------------------------------------------------------------------------- /assets/images/layout/background/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/layout/background/2.png -------------------------------------------------------------------------------- /assets/images/layout/hstack/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/layout/hstack/1.png -------------------------------------------------------------------------------- /assets/images/layout/vstack/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/layout/vstack/1.png -------------------------------------------------------------------------------- /assets/images/layout/vstack/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/layout/vstack/2.png -------------------------------------------------------------------------------- /assets/images/layout/zstack/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/layout/zstack/1.png -------------------------------------------------------------------------------- /assets/images/list/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/list/1.png -------------------------------------------------------------------------------- /assets/images/list/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/list/2.png -------------------------------------------------------------------------------- /assets/images/list/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/list/3.png -------------------------------------------------------------------------------- /assets/images/navigation/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/navigation/1.png -------------------------------------------------------------------------------- /assets/images/view/image/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/view/image/1.png -------------------------------------------------------------------------------- /assets/images/view/image/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/view/image/2.png -------------------------------------------------------------------------------- /assets/images/view/image/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/view/image/3.png -------------------------------------------------------------------------------- /assets/images/view/image/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/view/image/4.png -------------------------------------------------------------------------------- /assets/images/view/shape/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/view/shape/1.png -------------------------------------------------------------------------------- /assets/images/view/shape/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/view/shape/2.png -------------------------------------------------------------------------------- /assets/images/view/text/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/view/text/1.png -------------------------------------------------------------------------------- /assets/images/view/text/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/view/text/2.png -------------------------------------------------------------------------------- /assets/images/view/text/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/images/view/text/3.png -------------------------------------------------------------------------------- /assets/swift-ui-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleBoilerplates/SwiftUI-Cheat-Sheet/8048c017546883f653740cedbd1a829b7e71c718/assets/swift-ui-logo.png --------------------------------------------------------------------------------