🙄
Form内の横並びButtonが識別できないことについて
まずは、Formの中にButtonを三つ作ります
struct TestView: View {
var body: some View {
Form {
ForEach(0..<3) { index in
Button("tap me \(index)") {
print("tap")
}
}
}
}
}

デバイスにビルドして、ひとつのボタンを押すと相応のprint("tap")が`console panelに表示されることを確認します
## ボタンを横並びに
HStactを加えて`ボタンのレイアウトを横にします
struct TestView: View {
var body: some View {
Form {
+ HStack {
ForEach(0..<3) { index in
Button("tap me \(index)") {
print("tap")
}
+ }
}
}
}
}

同じくビルドしてみると、、、なんと、一つのタップにつき三つのprint("tap")がプリントされました
その現象の原因は、SwiftUIのFormの中の全てのButtonは、タップできる範囲は左端から右端までの一行です
- ボタン0のタップ可能区域:左端から右端まで
- ボタン1のタップ可能区域:左端から右端まで
- ボタン2のタップ可能区域:左端から右端まで
三つのボタンのタップ区域が全部被りました、どこをタップしても三つのボタンを作動させます
## 解決策
PlainButtonStyle()を利用してタップ区域を制限します
struct TestView: View {
var body: some View {
Form {
HStack {
ForEach(0..<3) { index in
Button("tap me \(index)") {
print("tap")
}
+ .buttonStyle(.plain)
}
}
}
}
}
Discussion