SwiftUI中负Padding移动按钮后点击区域未同步，如何让按钮与可点击区域一起移动？

嗨，我刚碰到过几乎一模一样的问题！你现在的麻烦根源其实很明确：你把负Padding加在了Button内部的Image上，这只会让图片的视觉位置偏移，但Button本身的可点击区域还是牢牢钉在原来的布局位置上——说白了就是“眼睛看到的地方点不动，能点的地方看不到”，是不是特别闹心？

要解决这个问题其实超简单，你只需要把偏移逻辑从Image内部，转移到整个Button组件上就行。不管是用负Padding还是.offset修饰符，只要作用在Button本身上，就能让按钮的视觉显示和可点击区域完全同步移动。

我给你改改代码，你一看就懂：

修正后的核心代码 #

原来你是给Button里的Image加负Padding，现在把这个负Padding直接加到Button外面：

Button(action: {
    Task {
        presentationMode.wrappedValue.dismiss()
    }
}) {
    Image("x-filled")
        .scaledToFit()
        .padding(.leading,15)
        .frame(height:30)
        .frame(maxWidth: .infinity,alignment: .topLeading)
        .listRowSeparator(.hidden)
}
// 把原来给Image的负Padding移到这里，整个Button（包括点击区域）一起偏移
.padding(.top,-50)
.frame(maxWidth: .infinity,alignment: .topLeading)

另一种更直观的方案：用.offset修饰符 #

如果你觉得负Padding的布局逻辑有点绕，也可以用.offset直接偏移整个Button，效果是一样的：

Button(action: {
    Task {
        presentationMode.wrappedValue.dismiss()
    }
}) {
    Image("x-filled")
        .scaledToFit()
        .padding(.leading,15)
        .frame(height:30)
        .frame(maxWidth: .infinity,alignment: .topLeading)
        .listRowSeparator(.hidden)
}
// 直接让整个Button向上偏移50点，视觉和点击区域完全同步
.offset(x: 0, y: -50)
.frame(maxWidth: .infinity,alignment: .topLeading)

完整的修正后代码 #

把整个ZStack的代码替换成下面这样，就能彻底解决问题啦：

ZStack{
    Group{
        Button(action: {
            Task {
                presentationMode.wrappedValue.dismiss()
            }
        }) {
            Image("x-filled")
                .scaledToFit()
                .padding(.leading,15)
                .frame(height:30)
                .frame(maxWidth: .infinity,alignment: .topLeading)
                .listRowSeparator(.hidden)
        }
        .padding(.top,-50)
        .frame(maxWidth: .infinity,alignment: .topLeading)

        Image("big-headshot")
            .resizable()
            .scaledToFit()
            .padding(.top,-20)
            .padding(.bottom,-40)
            .frame(height:130)//was 160
            .frame(maxWidth: .infinity,alignment: .center)
            .listRowSeparator(.hidden)
    }
}

本质上就是一句话：要移动整个可交互组件，就把偏移修饰符加在组件本身上，而不是它内部的子视图上——这样才能让视图的视觉位置和交互区域保持一致~

内容来源于stack exchange