【SwiftUI】ControlGroup触ってみた

はじめに

iOS15からControlGroupというUIコンポーネントが使えるようになってました。
見た目はPickerのsegmentedスタイルと同じだったので何が違うのか調査してみました。

実装

import SwiftUI

struct ContentView: View {
    private let animals: [String] = ["ライオン", "ネコ", "キリン"]
    var body: some View {
        ControlGroup {
            ForEach(0..<animals.count, id: \.self) { index in
                Button {
                    print()
                } label: {
                    Text(animals[index])
                }
            }
        }
    }
}

スタイル

automatic(指定なし)

ControlGroup {
    ForEach(0..<animals.count, id: \.self) { index in
        Button {
            print()
        } label: {
            Text(animals[index])
        }
    }
}
.controlGroupStyle(.automatic)

iOS	macOS

navigation

ControlGroup {
    ForEach(0..<animals.count, id: \.self) { index in
        Button {
            print()
        } label: {
            Text(animals[index])
        }
    }
}
.controlGroupStyle(.navigation)

iOS	macOS

Pickerのsegmentedとの違い

import SwiftUI

struct ContentView: View {
    @State var selection: Int = 0
    private let animals: [String] = ["ライオン", "ネコ", "キリン"]
    var body: some View {
        VStack(spacing: 50) {
            GroupBox("ControlGroup") {
                ControlGroup {
                    ForEach(0..<animals.count, id: \.self) { index in
                        Button {
                            print()
                        } label: {
                            Text(animals[index])
                        }
                    }
                }
                .controlGroupStyle(.automatic)
            }

            GroupBox("Picker") {
                Picker(selection: $selection) {
                    ForEach(0..<animals.count, id: \.self) { index in
                        Button {
                            print()
                        } label: {
                            Text(animals[index])
                        }
                    }
                } label: {
                    Text("")
                }
                .pickerStyle(.segmented)
            }
        }
        .padding(.horizontal, 20)
    }
}

見た目は同じですが、使用用途は全く違うものになりそうです。

おわり

今の所、何に使うのか全くわかりません笑