# CS193P - Lecture 2: Learing more about SwiftUI - 85 mins
* Demo code at cs193p.stanford.edu
* How-to and How-things-work course
* How SwiftUI is doing what it’s doing
* Prerequisites for student for this course is at least 3 and recommend 4 intro CS courses.
* They are relatively experienced programmers.
* Object-oriented programming
* Swift
#
## [00:00](https://youtu.be/3lahkdHEhW8&t=0m0s)
* Let us start by just making a single row card.
* [04:15](https://youtu.be/3lahkdHEhW8&t=4m15s)
* refactor the cardView as a new structure
* .preferredColorScheme(.dark) in previews
* [08:30](https://youtu.be/3lahkdHEhW8&t=8m30s)
* You can display both dark and light mode cases in preview
#
## [11:30](https://youtu.be/3lahkdHEhW8&t=11m30s)
* How to make the card flip
* [13:10](https://youtu.be/3lahkdHEhW8&t=13m10s) The initiation of CardView raise error. You cannot have vairables that have no value. (optional will be mentioned in lecture 3)
* [18:30](https://youtu.be/3lahkdHEhW8&t=18m30s) There are multiple code snippet duplicated, RoundedRectangle(cornerRadius: 20), and we can create a local variable

var shape = RoundedRectangle(cornerRadius:20)

to replace the redundant code snippet.
* To fix the warning about changing the declaration of shape from **var** to **let**.
* **var** is going to be a variable. and **let** for constant.
* [22:15](https://youtu.be/3lahkdHEhW8&t=22m15s) animation to make the card flip over.
* Using Tap gesture as a view modifier.
* Add @State to make the boolean a pointer instead of making it an mutable variable.
* Whenever **isFaceUp** changes, SwiftUI is smart enough to get to know the system need to rebuild this view, and then it will re-create the body.
* [31:30](https://youtu.be/3lahkdHEhW8&t=31m30s) Option+click to check out the documentation.
* Also, you can use command+Shift+O to open **Developer Documentation**
* Tips, you can use comman+option+Space to open **Emoji & symbols**
#
## [35:00](https://youtu.be/3lahkdHEhW8&t=35m00s) Using Array to handle String
* There are 3 ways to declare an array

var emoji: Array<String> = [xxx]
var emoji: [String] = [xxx]
var emoji = [xxx] // swift type inference

* you can use Option+click to find out the type of the vairable.
* Error: Referencing initializer `init(_:content:)` on `ForEach` requires that `String` conform to `identifiable`
* Which means the item need to have a uniquiely id that can identify it.
* 

#
## [45:50](https://youtu.be/3lahkdHEhW8&t=45m50s) To add or remove cars
* A range of an Array

emojis[0..<6] // first 6 items

* add a add button and a remove button.
* To download [SF-Symbols](https://developer.apple.com/sf-symbols/), all you need to know is the name.
#
## [01:10:00](https://youtu.be/3lahkdHEhW8&t=1h10m00s) Turn this into a grid
* Why does the LazyVGrid make the cardView a small one?
* The card view in HStack or VStack is much taller and much more like a card.
* HStack/VStack strategy is to uses all the space in both height and width it can
* LazyVGrid strategy is to use all the width horizontally for its column, but as small as possible vertically. So it can fit as many as possible in to the grid.
* Using HStack
* Using LazyVGrid
* Difference when Spacer() along with HStack and LazyVGrid

|HStack | | |
| --------| -------- | -------- |
|LazyVGrid | ||
| --------| -------- | -------- |

* LazyVGrid, lets you specify a number of columns.
* The word **Lazy** is lazy about accesing the body vars of all of its Views, e.g. CarView in this case.
* Make GridItem() in an array as the input, GidItems make you controls the columns more, e.g. give the column with 200 fixed width.
* GridItem make you control the columns more.
* e.g.
* GridItem(.fixed(200))
* GridItem(.flexible()), flex to whatever space is available. -> the default setup
#
## [01:19:10](https://youtu.be/3lahkdHEhW8&t=1h19m10s) Our card is actually getting slightly cut off.
* The goal of the line is to shows up inside the card area, though it is on teh card boundary.

Card.stroke(linewidth: 4)

| | |
| -------- | -------- |
* To fix this problem, we use **StokeBorder** to make the border stroking on the inside.

Card.strokeBorder(linewidth: 4)

|  |  |
| -------- | -------- |

#
## [01:21:00](https://youtu.be/3lahkdHEhW8&t=1h21m00s) To show more card when the device is in landscape mode.
* LazyVGrid, Griditem(.adpative(minimim: 65))
* This setup tells LazyVGrid to put as many cards in each row if possible.