SwiftUI中Button搭配NavigationLink无法跳转页面问题求助

问题描述 #

编写SwiftUI代码实现点击“Logout”文本或图标跳转至SigninView，使用@State变量tempSignout绑定NavigationLink的isActive属性，点击Button时将tempSignout设为true，但实际点击文本或图标均无响应，无法完成页面跳转。

原代码片段：

// $tempSignout是布尔类型变量 -> @State var tempSignout = false

NavigationLink(destination: SigninView(), isActive: $tempSignout) {EmptyView()}

Button(action: {
    tempSignout = true
}, label: {
    HStack{
        Text("Logout")
            .underline()
            .foregroundColor(Color("logoutColor"))
            .frame(width: 100, height: 50)
            .padding(.trailing, -100)


        Image("logout").resizable()
            .frame(width: 30, height: 30)
            .padding(.leading, 100)
    }
})

对应的UI界面：

问题原因 #

代码中给Text设置了padding(.trailing, -100)，给Image设置了padding(.leading, 100)，这种不合理的内边距设置导致HStack布局被严重挤压偏移，Button的实际可点击区域和视觉上的文本、图标区域完全不重合，点击时根本没触发Button的action事件。

修复方案 #

移除这些异常的padding设置，让HStack正常排列文本和图标，保证Button的可点击区域完全覆盖视觉元素。

修复后的代码：

@State private var tempSignout = false

NavigationLink(destination: SigninView(), isActive: $tempSignout) {
    EmptyView()
}

Button(action: {
    tempSignout = true
}, label: {
    HStack(spacing: 16) { // 用spacing控制元素间距，替代不合理的padding
        Text("Logout")
            .underline()
            .foregroundColor(Color("logoutColor"))
            .frame(height: 50) // 保留高度，去掉固定宽度避免限制布局

        Image("logout")
            .resizable()
            .frame(width: 30, height: 30)
    }
    .padding(.horizontal) // 可选：给整个HStack添加水平内边距，扩大点击区域
})

额外说明 #

如果需要调整文本和图标的位置，建议使用HStack的spacing参数、alignment参数，或者给整个Button添加合理的padding，避免使用负padding或过大的单边padding破坏布局结构，确保Button的可点击区域与视觉元素一致。

内容的提问来源于stack exchange，提问作者Reem