LoginSignup
3

posted at

【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
simulator_screenshot_1B7EA2C6-E104-4A65-B18A-65C714C52293.png スクリーンショット 2022-11-29 21.39.42.png

navigation

ControlGroup {
    ForEach(0..<animals.count, id: \.self) { index in
        Button {
            print()
        } label: {
            Text(animals[index])
        }
    }
}
.controlGroupStyle(.navigation)
iOS macOS
simulator_screenshot_CBAF8B60-709C-42C8-8C90-20233141A707.png スクリーンショット 2022-11-29 21.41.13.png

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)
    }
}

画面収録_2022-11-29_21_47_12_AdobeExpress.gif

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

おわり

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3