Scribd
Upload
13 views10 pages

Week2 - Layout & Views

The document discusses the basics of building an app with SwiftUI including models, views and previews. It describes creating a Product model with properties like name and price. It also covers building reusable views like ProductRow to display product data and a ContentView to display a list of products.

Uploaded by

Firas Al-Doghman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views10 pages

Week2 - Layout & Views

The document discusses the basics of building an app with SwiftUI including models, views and previews. It describes creating a Product model with properties like name and price. It also covers building reusable views like ProductRow to display product data and a ContentView to display a list of products.

Uploaded by

Firas Al-Doghman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Week 2

Fruit Mart - Basics of SwiftUI


Project: Basic of
SwiftUI
🛠️ Tech

- SwiftUI
- Vstack
- Hstack
- ZStack
Images

Drag all the images from ”Fruit


Images” Folder into Assets in
Xcode.
Model :

Product
Model: Product

Create the Model “Product”

The Product struct has the


following properties:

1. id: A unique identifier (UUID),


used to differentiate each
product. This is automatically
generated using the UUID()
function.
2. name: The name of the product.
3. imageName: The name of the
product's image.
4. price: The price of the
product.
5. description: A description of
the product.
6. isFavorite: A boolean value
indicating whether the product
is marked as a "favorite". Its
default value is false.
Views:

ProductRow

ContentView
Views:
ProductRow
• HStack: This is a horizontal stack that arranges its
child views in a horizontal line.

• Image(product.imageName): This displays an image for the


product. The image is resizable, scaled to fill its
assigned frame, and the frame's width is set to 140
points.

• VStack(alignment: .leading): This is a vertical stack


that arranges its child views in a vertical line. Inside
this stack:

• Text(product.name): This displays the product's name with


the headline font and medium font weight. There is also
padding at the bottom.

• Text(product.description): This displays the product's


description with the footnote font. The text color is set
to secondary.

• Spacer(): This is used to push the above views to the top


of the VStack.

The ProductRow struct provides a reusable component for


displaying product information in a consistent way
throughout the app.
Views:
ProductRow
This is a continuation of the previous ProductRow struct.
It continues to layout additional elements in the VStack
and applies various modifiers to the HStack to adjust its
appearance and layout.

• The added elements in the VStack are:

• A new HStack is added, which includes:

• A Text view that displays a dollar sign ($), using the


footnote font.

• Another Text view that displays the product's price,


using the callout font.

• A Spacer to push the following views to the right side of


the HStack.

Two Image views that display system images (heart and cart
icons). They are tinted with a custom color named "peach"
and their frames are set to 32x32 points.

ProductRow_Previews struct is a preview provider, which is


a SwiftUI feature that enables live previews of your views
in Xcode. This struct provides a preview of the ProductRow
view with the first product sample as its product.
Views:
ContentView
In this file, the ContentView struct
conforms to the View protocol.

The body property of ContentView defines


the content and layout of the view.

Here, the body uses a VStack (vertical


stack) to lay out three ProductRow views,
each of which displays one of the first
three product samples.
Views:
ContentView
The List view takes an array of data
(productSamples) and a closure, which is
used to generate views for each element
in the array.

In this case, for each product in


productSamples, a ProductRow view is
created with the current product as its
argument.

You might also like