728x90

Stack

"A view that arranges its children in a line, either horizontally or vertically."

Stack은 모든 자식 뷰를 로드하고 정렬합니다. 따라서 자식 뷰가 화면에 나타나는 즉시 생성됩니다.

HStack
VStack
ZStack

VStack {
    Text("View 1")
    Text("View 2")
    Text("View 3")
}

Lazy Stack

"A view that arranges its children in a line, either horizontally or vertically, but defers creating its children until the layout pass."

LazyStack은 뷰의 생성을 지연하고, 필요한 뷰만 생성하여 효율적인 성능을 제공합니다. 필요한 뷰가 화면에 나타날 때까지 뷰를 생성하지 않습니다.

많은 수의 뷰를 가진 경우에 유용

LazyVStack {
    Text("View 1")
    Text("View 2")
    Text("View 3")
}

Grid

"A container that presents rows and columns of views arranged in a grid."

Grid는 격자 형태로 뷰를 배열하며, 행(row)과 열(column)의 개수를 지정하여 뷰를 배치할 수 있습니다.

Grid {
    GridRow {
        Text("Row 1")
        ForEach(0..<2) { _ in Color.red }
    }
    GridRow {
        Text("Row 2")
        ForEach(0..<5) { _ in Color.green }
    }
    GridRow {
        Text("Row 3")
        ForEach(0..<4) { _ in Color.blue }
    }
}

List

"A container that presents rows of data arranged in a single column."

List는 스크롤 가능한 목록을 생성하는 컨테이너로, 단일 열로 데이터를 배열합니다.

* 앞선 Stack, LazyStack, Grid는 스크롤 가능하지 않아서 ScrollView로 감싸서 표현해줘야한다.

var body: some View {
    List {
        Text("A List Item")
        Text("A Second List Item")
        Text("A Third List Item")
    }
}

List는 일반적으로 데이터를 표시하고 상호작용 가능한 목록을 만들 때 사용됩니다. 개별 아이템은 수정 가능하며, 스와이프, 탭 등과 같은 동작에 응답할 수 있습니다.

Form

"A container for grouping controls used for data entry, such as in settings or inspectors."

Form은 데이터 입력을 위한 컨테이너로, 설정이나 인스펙터와 같이 데이터를 입력하는 데 사용되는 컨트롤들을 그룹화하는 역할을 합니다.

var body: some View {
    NavigationView {
        Form {
            Section(header: Text("Notifications")) {
                Picker("Notify Me About", selection: $notifyMeAbout) {
                    Text("Direct Messages").tag(NotifyMeAboutType.directMessages)
                    Text("Mentions").tag(NotifyMeAboutType.mentions)
                    Text("Anything").tag(NotifyMeAboutType.anything)
                }
                Toggle("Play notification sounds", isOn: $playNotificationSounds)
                Toggle("Send read receipts", isOn: $sendReadReceipts)
            }
            Section(header: Text("User Profiles")) {
                Picker("Profile Image Size", selection: $profileImageSize) {
                    Text("Large").tag(ProfileImageSize.large)
                    Text("Medium").tag(ProfileImageSize.medium)
                    Text("Small").tag(ProfileImageSize.small)
                }
                Button("Clear Image Cache") {}
            }
        }
    }
}

Form은 섹션으로 구성되며, 각 섹션은 헤더를 가질 수 있습니다. 섹션 내부에서는 다양한 입력 컨트롤을 사용하여 사용자로부터 데이터를 입력받을 수 있습니다.

Form은 사용자가 데이터를 입력하고 설정을 변경하는 데 사용되며, 앱 내에서 사용자 인터페이스를 구성하는 데 유용하게 활용됩니다.