【SwiftUI】 Spacer()で位置調整を行ったButtonのタップ可能域がずれた

初めて遭遇した問題があったので、記録します。

環境

XCode: Version 13.4.1
iOS: 15.5

問題のコード

ざっくりイメージです。

ZStack {
    Image("back_1")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(maxWidth: screenWidth, maxHeight: screenHeight)
        .ignoresSafeArea()
    HStack{
        VStack {
            Image("Buttonだよ")
                .onTapGesture {
                    self.isOpenSideMenu.toggle()
                }
            Spacer()
        }
        Spacer()
    }
}

発生していたのは、以下の現象。

• Spacerの指定が入った途端タップ可能領域がずれる。（Spacer未指定の状態、画面中央に描画された状態だと、画像全体がタップ可能域になる）
• 本来指定したい画像ではなく、その直下数ミリ？くらいの部分がヒットエリアになっていた。

結論から言うと、背景に入っている画像がスクリーンサイズを超過していたことが問題だったらしい感じがしている。

対処法

対処法は2つ。
Buttonをstructで包むか、
背景画像として挿入しているImageをbackground()の中にいれるか。
いずれかの動作を行えば正常に動作するようになるかと思う。
少なくとも私の場合はこれで解決した。

HStack{
    VStack {
        Button("Buttonだよ") {
                self.isOpenSideMenu.toggle()
            }
        Spacer()
    }
    Spacer()
}
.background(
            Image("back_1")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(maxWidth: screenWidth, maxHeight: screenHeight)
                .ignoresSafeArea()
)