This tutorial follows the Apple Developer demo app for creating and combining views in SwiftUI. Let’s play with SwiftUI.
Create a new SwiftUI Project
Open Xcode
, and select Create a new Xcode project
.

Under iOS
, select Single View App
and click Next
button.
In the next window, give Product Name
SwiftUITutorial
SwiftUI
User Interface
Next
.

After Next
, select the project location and click on Create
button.
SwiftUI Editor Window
Xcode will open below the SwiftUI Editor window like below. It will ContentView.Swift
Hello, World!

SwiftUI Preview Pane
Click Resume
Hello, World!
text.

SwiftUI Hot-Reloading
Hot-Reloading
is ContentView.Swift
file.
Customize the Text View
You can directly customize the Text View from the Preview pane.
You can customize a view’s display by changing your code, or by using the inspector to discover what’s available and to help you write code.
As you build the Landmarks app, you can use any combination of editors: the source editor, the canvas, or the inspectors. Your code stays updated, regardless of which tool you use.
In the preview pane, Command-Click on the TextView and choose any attribute or inspect it.

Let’s change text and font of text in ContentView.Swift
file.
Combine views using Stacks in SwiftUI
Note that, body property only returns a single view. You can combine and embed multiple views in stacks, which group views together horizontally, vertically, or back-to-front.
Command-click on text view and select Embed in VStack
option.

Add another Text View by clicking on Plus
button on right corner. Search Text and drag-and-drop on the editor window below existing TextView.

After placing TextView, your code and preview looks like this.

Now, we need to add another Text view for the state in the same row. So, first, we need to Embed in HStack
Bear Mountain National Park
Embed in HStack
option.

Add another Text View and place Bear Mountain National Park
New York
font
with subheadline
.
Add space between these two text views by adding Space()
in between them.
Finally, add padding by using padding()
property. Our code looks like this.

Create Image View in SwiftUI
With the name and location views all set, the next thing to do is to add an image for the landmark.
Instead of adding more code in this file, you’ll create a custom view that applies a mask, border, and drop shadow to the image.
Add an image to the project’s asset folder. I added park.jpg to asset folder.

Choose File > New > File to open the template selector again. In the User Interface section, click to select SwiftUI View and click Next. Name the CircleImage.swift
In CircleImage.swift
file, replace text with image.
Add clipShape()
, overlay
& shadow
property to Image object.So, our final code and preview looks like below.

Let’s create another view in SwiftUI.
Create Map View in SwfitUI
Create another view MapView1.swift
and import MapKit
in this view. Implement makeUIView
and updateUIView
functions in this view.
Combining the Views
After creating all the necessary views, it’s time to combine all views altogether.

Reference
https://developer.apple.com/tutorials/swiftui/creating-and-combining-views