SwiftUI For Dummies. Wei-Meng Lee

      1 Chapter 1FIGURE 1-1: UIKit is event driven, and it uses delegates to handle events.FIGURE 1-2: SwiftUI is a state-driven declarative framework.FIGURE 1-3: Installing Xcode from the Mac App Store.FIGURE 1-4: Launching Xcode.FIGURE 1-5: Selecting the Single View App project type.FIGURE 1-6: Naming the project.FIGURE 1-7: Viewing the project that you’ve created.FIGURE 1-8: Dismissing the Inspector window.FIGURE 1-9: The canvas allows you to preview your application without deploying...FIGURE 1-10: Previewing your app on the canvas.FIGURE 1-11: Modifying the ContentView.swift file.FIGURE 1-12: The preview is updated to reflect the changes in the code.FIGURE 1-13: Occasionally you have to click the Try Again button to update the ...FIGURE 1-14: Clicking the Live Preview button allows you to run your applicatio...FIGURE 1-15: Testing your application in Live Preview mode.FIGURE 1-16: Previewing the UI on two iOS devices — the latest iPhone and an iP...FIGURE 1-17: The content of the project created.FIGURE 1-18: Examining the items in the Info.plist file.

      2 Chapter 3FIGURE 3-1: The Live Preview dynamically shows the changes made to your Content...FIGURE 3-2: The Text view after applying the chains of modifiers.FIGURE 3-3: Showing the SwiftUI Inspector.FIGURE 3-4: The SwiftUI Inspector allows you to customize the various propertie...FIGURE 3-5: Changing the font weight of the Text view in the SwiftUI Inspector.FIGURE 3-6: You can also add modifiers to a view through the SwiftUI Inspector.FIGURE 3-7: Calling the border() modifier on the Text view.FIGURE 3-8: Displaying a border on the Text view.FIGURE 3-9: Adding an image to the Assets.xcassets file in your Xcode project.FIGURE 3-10: The Image view displaying the image that you've just added to your...FIGURE 3-11: The Image view displayed with a circle.FIGURE 3-12: Aligning the image to the bottom-right corner of the frame.FIGURE 3-13: The image inside the Image view resizing itself to fit the frame.FIGURE 3-14: The customized version of the button.FIGURE 3-15: Using the VStack view to contain a series of views.FIGURE 3-16: Aligning the views contained within the VStack view to the left.FIGURE 3-17: Nesting the various views.FIGURE 3-18: The HStack view nesting the various other views.FIGURE 3-19: Aligning the entire HStack to the top of the screen.FIGURE 3-20: You can also visually embed views in the HStack or VStack views.FIGURE 3-21: The final name card with tappable buttons.

      3 Chapter 4FIGURE 4-1: The TextField and Text views on the screen.FIGURE 4-2: The content of the Text view is updated as the user types in the tw...FIGURE 4-3: The username created by removing special characters from the first ...FIGURE 4-4: The TextField views with rounded corners.FIGURE 4-5: The Login button is disabled until the user enters both the usernam...FIGURE 4-6: The SecureField view masks the text entered.FIGURE 4-7: The Toggle view with the background color of yellow when it's enabl...FIGURE 4-8: The Toggle view with the background color of gray when it’s disable...FIGURE 4-9: The Toggle view with the label hidden.FIGURE 4-10: As the user moves the Slider view, its value is displayed in the T...FIGURE 4-11: The temperature converter involving two Slider views.FIGURE 4-12: The Stepper view with its label.FIGURE 4-13: When the Stepper reaches its minimum values, the Text view is disp...FIGURE 4-14: When the Stepper reaches its maximum values, the Text view is disp...FIGURE 4-15: The Picker view displaying a list of options.FIGURE 4-16: Hiding the label for the Picker view.FIGURE 4-17: Embedding the Picker view within a Form.FIGURE 4-18: The list of options from the Picker view is displayed on another p...FIGURE 4-19: The custom view that you’ll be building.FIGURE 4-20: Adding a new SwiftUI View file to the project.FIGURE 4-21: Applying border to a rounded Image view.FIGURE 4-22: Displaying a border on the corner-rounded Image view.FIGURE 4-23: Adding images to the Xcode project.FIGURE 4-24: Using the custom view that you’ve created.

      4 Chapter 5FIGURE 5-1: The List view displaying a list of itemsFIGURE 5-2: For this example to work, you need to add the various flag images t...FIGURE 5-3: Each row showing the flag of the country and the country's name.FIGURE 5-4: Generating a list of items from 1 to 10 in a List view using the Fo...FIGURE 5-5: The List view enclosed within the NavigationView.FIGURE 5-6: Tapping the last item in the List and displaying the item selected ...FIGURE 5-7: Adding a new row to the List view.FIGURE 5-8: Deleting a row from the List view.FIGURE 5-9: The Edit button allows you to delete items directly from the List v...FIGURE 5-10: When the List view is in edit mode, each item will display a Delet...FIGURE 5-11: The Delete button appears when you tap the Delete icon.FIGURE 5-12: The drag handle of each item allows you to rearrange the items.FIGURE 5-13: Rearranging an item in the List view.FIGURE 5-14: The Settings app in iOS uses the List view.FIGURE 5-15: The List view displays two sections, each with two items.FIGURE 5-16: Displaying countries grouped by continent.FIGURE 5-17: Showing the List view in GroupedListStyle.FIGURE 5-18: Sections are displayed without any headers.FIGURE 5-19: The Environment Overrides section on Xcode allows you to switch be...FIGURE 5-20: The List view displayed in Dark mode.FIGURE 5-21: Viewing the preview in both Light and Dark modes.

      5 Chapter 6FIGURE 6-1: The flow of a navigation-style app.FIGURE 6-2: The flow of a tabbed app.FIGURE 6-3: A Text view wrapped within a NavigationView.FIGURE 6-4: Displaying the navigation bar title.FIGURE 6-5: Displaying the navigation bar title in inline display mode.FIGURE 6-6: Clicking the This Is a Text View link navigates to another screen (...FIGURE 6-7: The back button to return to the previous screenFIGURE 6-8: You can now navigate between the screens using the Next and Back bu...FIGURE 6-9: The structure of the JSON content displayed using www.jsonlint.com.FIGURE 6-10: Displaying the news headlines using the List view.FIGURE 6-11: Adding a package to your XCode project.FIGURE 6-12: Displaying an image next to each news headline.FIGURE 6-13: Displaying the navigation bar title.FIGURE 6-14: Reducing the font size of the navigation bar title.FIGURE 6-15: Previewing the details page.FIGURE 6-16: Tapping a news item displays the news in more detail.FIGURE 6-17: The details page with an empty space below the navigation bar.FIGURE 6-18: The empty space below the navigation bar is gone.FIGURE 6-19: Displaying a TabView with two screens.FIGURE 6-20: Programmatically displaying the TabView2.

      6 Chapter 7FIGURE 7-1: The rectangle is displayed in the center of the screen.FIGURE 7-2: Showing the rectangle with a border.FIGURE 7-3: The VStack view now contains two rectangles.FIGURE 7-4: Aligning both rectangles to the right.FIGURE 7-5: The VStack views now occupy the entire screen.FIGURE 7-6: Aligning the content of the VStack using the leading and trailing o...FIGURE 7-7: Aligning the content of the VStack using the topLeading and bottomT...FIGURE 7-8: Applying padding to the first rectangle.FIGURE 7-9: Applying padding with the various specified options.FIGURE 7-10: The order of applying the modifiers matter.FIGURE 7-11: Applying a Spacer view between the two rectangles.FIGURE 7-12: The Spacer