まったく意味がわからなかったがそういう仕様らしい。悔しいのでメモだけしておく

経緯

インスタのタイムラインとか、Twitterのタイムラインのようなものを模写しようとしていた。

それで、投稿を１つのviewで作成して、Listの中に入れたところ、いいねボタンの領域がList全体がタップ領域になった。

話によると、　Listの中にButtonが入ってる場合、List全体がタップ領域になってしまうとのこと。

対応策として、Buttonを使わず、.onTapGestureに書き換えることにした

before

///いいねボタン。こんな感じで作ってた
            Button(action:{
                ///タップした際の挙動を記載
                
            }){
                HStack{
                    Image(systemName:"heart.fill")
                        .foregroundColor(iconColor)

                        Text(favoriteCount)
                            .foregroundColor(countColor)

                }
            }
            .frame(width: 120,alignment: .leading)

上記をListの中に含めると、Listの行全体がタップ領域になる。

ハートとか、そういうアイコンのみがタップ領域にはならない

after

//要は、Buttonさえ使わなければいい  

          HStack{
                Image(systemName:"heart.fill")
                    .foregroundColor(iconColor)

                    Text(favoriteCount)
                        .foregroundColor(countColor)
            }
            
            .frame(width: 120,alignment: .leading)
            .onTapGesture{print("タップした時の処理を書くところ")}

タップさせたいのであれば、別にButtonを使わくてもいいはずなので、.onTapGestureで回避する

コメント