SwiftUI : Group / GroupBox

Group / GroupBox에 대해 알아보도록 합시다.

Group

Group에서 꼭 외워야 할 것은 VStack 과의 차이점입니다. 간단하게 말하자면

 

- VStack은 최대 10개의 자식을 가질 수 있습니다. (HStack, LazyVStack, LasyHStack 모두 동일)

- Group은 이 문제를 해결해줍니다.

 

코드로 한번 같이 보도록 합시다.

 

아래와 같이 VStack만으로 11개의 자식을 만들게 되면 컴파일 오류가 생깁니다.

        NavigationView {
            VStack {
                Text("1")
                Text("2")
                Text("3")
                Text("4")
                Text("5")
                Text("6")
                Text("7")
                Text("8")
                Text("9")
                Text("10")
                Text("11")  //11번째부터는 컴파일 오류가 생긴다.
            }
        }

그럴 때에는 Group을 사용해서 해결해 줄 수 있습니다.

        NavigationView {
            VStack {
                Group {
                    Text("1")
                    Text("2")
                    Text("3")
                    Text("4")
                    Text("5")
                    Text("6")
                    Text("7")
                    Text("8")
                    Text("9")
                    Text("10")
                }
                Group {
                    Text("11")
                }
            }
        }

왼: VStack으로 최대 개수를 구성한 뷰 / 오: Group을 이용한 뷰

GroupBox

GroupBox는 content의 logical그룹과 연관된 optional label이 있는 stylized view입니다.

아래 코드는 일반적인 사용 방법인데, 정의에 'optional label이 있는' 이라고 나와있죠?

 

여기서 label 부분이 optional 이기 때문에  아래 코드와 같이 작성할 수 있습니다.

        GroupBox(label: Text("Label"), content: { 
        Text("content")
        
        })

  GroupBox(content: { Text("content") 
})

struct ContentView: View {
    @State private var name = ""
    
    var body: some View {
        VStack {
            // 1.
            GroupBox(label: Label("심장 박동수", systemImage: "heart.fill").font(.largeTitle)) {
                
                Text("69 BPM").font(.title)
            }
            // 2.
            GroupBox {
                Text("이름을 입력하세요").font(.title)
                TextField("name", text: $name)
            }
            Spacer()
        }.padding(.horizontal)
    }
}

struct SourceLinkView: View {
    var body: some View {
        GroupBox() {
            HStack(spacing: 5) {
             Text("참고 사이트")
                Spacer()
                Link("위키백과", destination: URL(string: "https://ko.wikipedia.org/")!)
                Image(systemName: "arrow.up.right.square")
            }
            .font(.footnote)
        }
    }
}

 

읽어주셔서 감사합니다🤟