🙄

Form内の横並びButtonが識別できないことについて

2022/02/14に公開

まずは、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