SwiftUI - 튜토리얼

SwiftUI

- 사용자 인터페이스(UI)를 구축하기 위한 프레임워크

- UIKit, AppKit과 같은 UI 프레임워크보다 더 간결하고 직관적인 코드 작성을 지원하며, 코드의 재사용성을 증가시킴

 

 

---

기본 화면

 

 

화면을 그리는 코드

struct Tutorial: View {
    var body: some View {
        Text("Hello, World!")
    }
}

- 'Tutorial' 이라는 구조체를 선언

- 이 구조체는 'View' 프로토콜을 따르는 SwiftUI 뷰 

 

- 'body' 리는 컴퓨티드 프로퍼티를 선언

- 이 프로퍼티는 실제로 뷰의 내용을 반환하는 역할

- 'some View' : 반환 타입으로 모든 유형의 SwiftUI 뷰를 의미 

 

* 컴퓨티드 프로퍼티 : 값을 저장하는 것이 아니라 계산에 의해 값을 제공하는 프로퍼티 

 

 

 

 

Preview를 그리는 코드 

// 뷰를 미리보기 하기 위한 제공자 구조체 선언
struct Tutorial_Previews: PreviewProvider {
    static var previews: some View {
        
        // 미리보기 표시
        Tutorial()
    }
}

 

 

---

View 

 

HStack 추가

struct Tutorial: View {
    var body: some View {
        
        HStack{
            Text("1!")
                .foregroundColor(.blue)     // 글자색 지정
                .bold()                     // 글자 두껍게
                .font(.system(size: 40))    // 글자 사이즈 지정
            
            Text("2!")
                .foregroundColor(.blue)
                .bold()
                .font(.system(size: 40))
            
            Text("3!")
                .foregroundColor(.blue)
                .bold()
                .font(.system(size: 40))
        }
    }
}

 

 

 

 

 

VStack 내부에 HStack 추가

HStack 스타일 지정

struct Tutorial: View {
    var body: some View {
        
        VStack{
            HStack{
                Text("1!")
                    .foregroundColor(.blue)     // 글자색 지정
                    .bold()                     // 글자 두껍게
                    .font(.system(size: 40))    // 글자 사이즈 지정
                
                Text("2!")
                    .foregroundColor(.blue)
                    .bold()
                    .font(.system(size: 40))
                
                Text("3!")
                    .foregroundColor(.blue)
                    .bold()
                    .font(.system(size: 40))
            } // HStack
            .background(.red)   // HStack의 background color 추가
            .padding(10)        // HStack의 패딩 추가
            
            
            HStack{
                Text("1!")
                    .foregroundColor(.blue)     // 글자색 지정
                    .bold()                     // 글자 두껍게
                    .font(.system(size: 40))    // 글자 사이즈 지정
                
                Text("2!")
                    .foregroundColor(.blue)
                    .bold()
                    .font(.system(size: 40))
                
                Text("3!")
                    .foregroundColor(.blue)
                    .bold()
                    .font(.system(size: 40))
            } // HStack
        } // VStack
    }
}

 

 

 

 

구조체로 뷰 구현

- 구조체 형태로 새로운 View를 만들고 다른 구조체에서 여러 번 호출하여 사용하는 방식 

struct Tutorial: View {
    var body: some View {
        
        VStack{
            
            newView()
            newView()
            newView()
            
        } // VStack
    }
}

struct newView : View {
    var body: some View{
        HStack{
            Text("1!")
                .foregroundColor(.blue)     // 글자색 지정
                .bold()                     // 글자 두껍게
                .font(.system(size: 40))    // 글자 사이즈 지정
            
            Text("2!")
                .foregroundColor(.blue)
                .bold()
                .font(.system(size: 40))
            
            Text("3!")
                .foregroundColor(.blue)
                .bold()
                .font(.system(size: 40))
        } // HStack
        .background(.red)   // HStack의 background color 추가
        .padding(10)        // HStack의 패딩 추가
    }
}

 

 

 

 

 

 

 

참고)

https://babbab2.tistory.com/157 

https://www.youtube.com/watch?v=LiWtjXLlhYw&list=PLgOlaPUIbynqyJHiTEv7CFaXd8g5jtogT&index=1