🙄
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