[swiftUI] - Stack과 Frame

SwiftUI 동적 HStack과 VStack 변환

• SwiftUI는 레이아웃에 사용되는 스택 타입을 앱 코드 내에서 동적으로 변경할 수 있게한다.
• AnyLayout 인스턴스를 생성하고 HStackLayout, VStackLayout 컨테이너에 할당하여 동적으로 변환 할 수 있다.

@State var myLayout: AnyLayout = AnyLayout(VStackLayout())

    var body: some View {
        VStack {
            myLayout {
                Image(systemName: "goforward.10")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "goforward.15")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
            }
            
            HStack {
                Button(action: {
                    myLayout = AnyLayout(HStackLayout()) }) {
                        Text("HStack")
                    }
                Button(action: {
                    myLayout = AnyLayout(VStackLayout()) }) {
                        Text("VStack")
                    }
            }
        }
    }

SwiftUI 텍스트 줄 제한, 레이아웃 우선순위

• 스택의 크기자 제한되어 있거나, 다른 뷰들과 공간을 나눠서 사용해야 하는 상황처럼, 스택이 충분한 공간을 가지고 있지 않다면 텍스트는 자동으로 여러 줄로 표시된다.
• 만약 해당 스택 내부에 텍스트가 한줄로만 표시 되어야 하거나 줄의 제한을 걸어둬야 할 경우 numberofLines를 해야 할 경우 lineLimit() 수정자를 사용하면 된다.
• KeyPoint : 많은 수의 자식 뷰로 인한 성는 문제가 발생할 때는 지연(lazy) 스택 뷰를 전환 하는 것이 좋고 그것이 아니면 일반 스택뷰로 선언하여 구현하는 것이 좋다.

SwiftUI Frame

• 기본적으로 뷰는 자신의 콘텐츠와 지신이 속한 레이아웃에 따라 자동으로 크기가 조절된다.
• 대부분은 뷰의 크기와 위치는 스택 레이아웃을 사용하여 조절할 수 있지만 Frame 수정자를 통해 뷰 자체 특정 크기나 영역에 맞게 지정할 수 있다.
• Frame 수정자를 사용할 경우 뷰의 크기나, 영역은 동적으로 변하지 않는다.
• frame 수정자는 safe-area 를 준수한다. 안전 영역 밖으로 확장 되도록 frame을 구성하려면 edgesIgnoringSafeArea() 수정자를 사용하면 된다.

SwiftUI GeometryReader

• Frame은 뷰들을 담고 있는 컨테이너의 크기에 따라 조절 되도록 할 수 있다 즉 (self.view.frame.size.width) 처럼
• 이 작업은 GeometryReader 로 뷰를 감싸고 컨테이너의 크기를 식별하기 위한 reader를 이용하여 할 수 있다.

        GeometryReader { geometry in
            VStack {
                Text("Hello World, how are you!")
                    .font(.largeTitle)
                    .frame(width: geometry.size.width / 2, height: (geometry.size.height / 4) * 3)
                Text("Goodbye World")
                    .font(.largeTitle)
                    .frame(width: geometry.size.width / 3, height: geometry.size.height / 4)
            }
        }