SwiftUI #20: 우선순위

Source: Dev.to

소개

SwiftUI에서 Stack은 뷰들 사이에 공간을 균등하게 나눕니다. 뷰가 들어가지 않을 경우 Image에 고정 크기를 할당하고 Text의 크기를 줄입니다.

초기 예제

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
            Image(systemName: "circle")
                .font(.system(size: 100))
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
        }
    }
}

이 예제에서는 .lineLimit(1)을 사용했기 때문에 Text 내용이 잘려 보입니다. 그렇지 않으면 한 줄 이상을 차지하게 됩니다.

Text의 우선순위 변경하기

Text가 전체를 표시하도록 하려면 layoutPriority(_:)를 사용해 우선순위를 변경해야 합니다. 뷰가 그려지는 기본 우선순위는 0입니다. 우선순위가 높을수록 뷰는 가능한 많은 공간을 차지합니다.

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
                .layoutPriority(100)   // 높은 우선순위
            Image(systemName: "circle")
                .font(.system(size: 100))
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
        }
    }
}

fixedSize 사용하기

fixedSize(horizontal:vertical:)는 뷰를 이상적인 크기로 고정합니다. 인자를 지정하지 않으면 두 차원 모두 고정됩니다. 이 메서드는 layoutPriority(_:)보다 더 높은 우선순위를 가집니다; 활성화되면 다른 요소들의 우선순위와 상관없이 뷰는 필요한 크기를 그대로 사용합니다.

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
                .fixedSize()           // 텍스트 크기 고정
            Image(systemName: "circle")
                .font(.system(size: 100))
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
                .layoutPriority(100)   // 이 텍스트에 높은 우선순위
        }
    }
}

마지막 예제에서는 첫 번째 Text가 fixedSize() 덕분에 전체가 표시되고, 두 번째 Text는 높은 layoutPriority를 통해 더 많은 공간을 확보합니다.