はじめに
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)
}
}
見た目は同じですが、使用用途は全く違うものになりそうです。
おわり
今の所、何に使うのか全くわかりません笑