SwiftUIはおせっかいにもToolBarItemのButtonのタップ範囲を広げる

検証

検証してみる。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            button
                .toolbar {
                    button
                    button
                }
        }
    }

    var button: some View {
        Button(action: {}){
            Image(systemName: "heart.fill")
                .padding(4)
        }
        .border(.red)
    }
}

#Preview {
    ContentView()
}

やめて？
ただ単にViewとそのタップ範囲を広げるだけでなく、画面端のボタンは気を遣って画面中央に向かってタップ範囲を広げてくれている。やめて。

Buttonのlabelに対してサイズ指定してclipしてみる

...

            Image(systemName: "heart.fill")
+                .resizable()
+                .frame(width: 20, height: 20)
+                .clipped()
                 .padding(4)

...

タップ範囲は大きいまま。

Buttonそのものに対してサイズ指定してclipしてみる

...

        Button(action: {}){
            Image(systemName: "heart.fill")
                .resizable()
                .frame(width: 20, height: 20)
-               .clipped()
-               .padding(4)
        }
+        .frame(width: 20, height: 20)
+        .padding(4)
+        .clipped()
+        .border(.red)

...

なんで？

.buttonStyle(.plain)をつけてみる

        Button(action: {}){
            Image(systemName: "heart.fill")
                .resizable()
                .frame(width: 20, height: 20)
                .padding(4)
        }
+       .buttonStyle(.plain)
+       .foregroundStyle(Color.accentColor)
        .border(.red)

ようやく意図した通りに設定された。