SwiftUI Essentials

[ueunli]

_{Chapter 1.}
SwiftUI Essentials

Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.

• Creating and Combining Views
• Building Lists and Navigation

• Handling User Input

  　

[ueunli]

SwiftUI Inspector

캔버스에서	...	소스코드에서	...
해당 뷰에 cmd+우클릭		해당 뷰의 선언부에 cmd+우클릭

• cmd+우클릭으로 나타나는 목록은 structured editing popover
• 위 popover는 해당 객체(뷰)에 대해 커스텀할 수 있는 항목들을 알아서 리스트업 해준다!

  The popover shows different attributes that you can customize, depending on the type of view you inspect.

　

Source of Truth

💡point! canvas에서 inspector로 수정하든, 코드에서 inspector로 수정하든, 코드에서 modifier를 직접 바꾸든 ― 어디서 수정하든, 뷰의 source of truth인 소스코드는 물론 뷰에도(미리보기에도) 엑코에 의해 automatically 반영된다!

Your code is always the source of truth for the view. 
When you use the inspector to change or remove a modifier, Xcode updates your code immediately to match.

　

[ueunli]

swiftui의 view와 stack

• View의 body property로 content, layout, behavior를 정의하고,
• 여러 View를 묶고 싶다면 Stack에 해당 뷰들을 넣어서 묶는다!
• Stack의 종류로는 HStack(horizontally), VStack(vertically), ZStack(back-to-front)가 있다.

  When creating a SwiftUI view, you describe its content, layout, and behavior in the view’s body property; however, the 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.

　

Stack

VStack의 이니셜라이저 매개변수는 alignment, spacing, content 3가지인데, alignment와 spacing은 각각 아래와 같이 기본설정 되어 있다.

By default, stacks center their contents along their axis and provide context-appropriate spacing.

　

뷰 사이에 간격 주기

• Padding
• Spacer

  A spacer expands to make its containing view use all of the space of its parent view, instead of having its size defined only by its contents.

　

[ueunli]

Circle

The Circle type is a shape that you can use as a mask, or as a view

Image("turtlerock")
.clipShape(Circle())    //Circle shape as a mask
.overlay {
Circle().stroke(.gray, lineWidth: 4)    //Circle shape as a view
}

　

[ueunli]

프레임워크 추가하기

소스파일에 SwiftUI와 더불어 다른 프레임워크를 import한다면, 그 프레임워크에 대해 사용 가능한 SwiftUI의 기능도 같이 주어진다.

When you import SwiftUI and certain other frameworks in the same file, you gain access to SwiftUI-specific functionality provided by that framework.

　

Binding

아래 코드에서 $region의 타입은 Binding<MKCoordinateRegion>다.

struct MapView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )

    var body: some View {
        Map(coordinateRegion: $region)  //Binding<MKCoordinateRegion>
    }
}

접두$ == Binding<underlying value> == reference to the value == source of truth (for auto-updating view)

By prefixing a state variable with $, you pass a binding, which is like a reference to the underlying value.

　

live mode

상단바의 Editor > Canvas > Automatically refresh canvas 체크 여부 확인

When previews are in static mode, they only fully render native SwiftUI views. For the Map view, you’ll need to switch to a live preview to see it render.