SwiftUI 3일차 • VStack, HStack, @State ⋯ 관하여

안녕하세요 제로데이 입니다!

 

2일차에서 말 다 못한 VStack, HStack, @State, SwiftUI 코딩 방식에 대해 설명해드리겠습니다.

 

2일차 링크

z3r0day.tistory.com/18

SwiftUI 2일차 • 버튼을 누르면 'Hello World!'가 튀어나오게 해보자!

 

 

---

 

• VStack이란 UI를 수직으로 정렬하는 것 입니다.

var body: some View {
    VStack {
        Text("item1")
        Text("item2")
        Text("item3")
        ⋯
        ⋯
    }
}

 

VStack

 

 

 

• HStack은 UI를 수평으로 정렬하는 것 입니다.

var body: some View {
    HStack {
        Text("item1")
        Text("item2")
        Text("item3")
        ⋯
        ⋯
    }
}

 

HStack

 

 

• @State란 struct 안에서 실시간 변화라고 보는게 적절한거 같습니다.

State의 변수 값이 바뀌게 되면 즉 

struct ContentView: View {
    @State var show_message = false
    var body: some View {
        VStack {
            Button(action: {
                self.show_message.toggle()
            }) {
                Text("버튼")
            }
            if show_message {
                Text("Hello World!").font(.system(size: 60))
            }
        }
    }
}

 

.toggle()로 인해 show_message의 값이 false에서 true가 되면서 @State덕에 View를 reload하게 됩니다.

그래서 저희들이 즉각적으로 변화(Hello World)를 눈으로 볼 수 있었던 거고요.

 

 

• SwiftUI 코딩 방식은 

Text("버튼")
    .bold()
    .fontWeight(.semibold)
    .font(.title)

 

 

.연산자를 사용하여 속성들을 설정할수있습니다.

아주 직관적이죠.

 

 

---

이렇게 오늘은 VStack, HStack 등을 알아보았는데요.

너무 어렵게 생각하지 마시고 어떻게 사용할 수 있는지만 알아가시면 좋을 것 같네요!

 

마지막으로 아인슈타인의 명언을 남기고 글을 마치겠습니다.

 

나약한 태도는 성격도 나약하게 만든다.  - 알버트 아인슈타인