[TIL] 2022 / 12 / 19 - SwiftUI

스유 맛보기

 

기존과 달리 구조체 기반

 

최소 13.0 이상부터 가능

 

 

처음만들면 ContentView라는 파일안에 두 개의 구조체가 있음.

ContentView에 코드를 작성하면 아래의 ContentView_Previews를 통해 화면에 프리뷰를 보여주는 느낌인 것 같음.

import SwiftUI

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

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

 

기본으로 만들어진 파일에서는 여러 객체를 작성해도 버티컬하게 잘 보이지만 새로 추가한 파일에서는 프리뷰에 하나의 객체만 보이고, 프리뷰의 윗부분을 확인해보면 프리뷰가 늘어나기만함.

=> body는 오직 하나의 객체만 리턴해야함. 처음에 잘 됐던 이유는 VSStack을 리턴하고 이 스택안에 여러개의 객체를 쌓아서 그랬던거임

 

 

VSStack은 Vertical, HSStack은 Horizontal이라고 생각

 

 

이렇게 닷신텍스를 이용해 작성하는데 이를 modifier라고 함.

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "star.fill")
                .imageScale(.large)
                .foregroundColor(.yellow)
            Text("하이")
            Text("바보")
        }
        .padding()
        .border(.brown)
        .padding()
        .border(.green)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.gray)
    }
}

 

kerning으로 글씨 간격을 띄울 수 있음.

 

strikethrough로 취소선 그릴 수 있음.

 

underline으로 밑줄을 그릴 수 있음.

 

기존의 numberOfLines로 설정했던 것을 .lineLimit으로 바로 설정 가능

 

Circle, Ellipse, Rectangle로 모양을 바로 그릴 수 있음.

 

가운데부터 채워질텐데 Spacer를 이용해 공간을 띄울 수 있음.

struct ExampleView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .font(.largeTitle)
                .fontWeight(.ultraLight)
                .foregroundColor(.brown)
            Spacer()
            Circle()
                .fill(.yellow)
            Ellipse()
                .fill(.cyan)
            Rectangle()
                .fill(.gray)
            Spacer()
            Image(systemName: "star.fill")
                .imageScale(.large)
                .foregroundColor(.primary)
            Text("Hello, World!")
                .font(.caption)
                .italic()
                .bold()
                .kerning(10)
            Spacer()
            Text("hello\ndd\ndd")
                .underline(pattern: .solid)
                .strikethrough(color: .cyan)
                .lineLimit(2)
                .kerning(3)
        }
    }
}

 

 

프리뷰 코드에 .previewDevice를 통해 디바이스 설정 가능. 이때 디바이스 이름은 틀리면안됨.

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleView()
            .previewDevice("iPhone 11")
    }
}

 

 

프리뷰에서 왼쪽 아래의 커서모양 누르고 화면을 누르면 해당하는 코드를 알려줌

 

 

작성한 코드에서 커맨드를 누르고 객체를 누르면 바로 embed할 수 있는 옵션이 나옴.

 

 

 

List를 이용하면 테이블뷰처럼 나타낼 수 있음.

struct ListView: View {
    var body: some View {
        List {
            Text("1위")
                .font(.callout)
                .kerning(10)
                .underline()
            Text("5위")
            VStack {
                Text("6위")
                Text("6위")
                Text("6위")
            }
            .border(.brown)
            Text("2위")
                .font(.footnote)
                .fontWeight(.ultraLight)
                .foregroundColor(Color.pink)
                
            Text("8위")
            Text("9위")
            ForEach(0..<50) {
                Text("리스트셀 \($0)")
            }
        }
        .listStyle(.plain)
        .font(.largeTitle)
    }
}

List에 모디파이어를 사용한 것과 내부의 객체에 모디파이어를 사용한다면 각 뷰의 모디파이어가 우선이라고 생각하면됨.

=> List에 font를 이용해 전체의 font를 바꿨어도 내부에서 따로 설정해주면 그게 우선이 되는 것임.

 

내부에 계속 추가하다보면 10개 이상으로는 추가가 안됨.

-> ForEach를 이용하면 추가할 수 있음.