SwiftUI按钮可在自身框架外被点击的问题修复咨询

问题根源在于LoginButton里的HStack默认会占据父视图的可用空间，而SwiftUI中Button的点击响应区域完全由其label视图的布局范围决定，导致按钮外部的空白区域也会触发点击。

直接给你两种修复方案：

方案一：限制容器视图大小 #

给LoginButton中的HStack添加fixedSize()修饰符，让它仅包裹内部内容的实际大小，不再扩展多余空间：

struct LoginButton: View {
    let textLabel: String
    var body: some View {
        HStack {
            Text(textLabel)
                .font(.navTitle)
                .foregroundColor(.white)
                .padding()
                .padding(.vertical, 5)
                .padding(.horizontal, 100)
                .background(Color(.blue))
                .cornerRadius(10)
        }
        .fixedSize() // 关键：限制容器仅包裹内容大小
    }
}

方案二：调整样式层级（更规范） #

把按钮的样式（padding、background、cornerRadius）从Text移到HStack上，同时确保容器不扩展，这样点击区域会精准匹配蓝色按钮的范围：

struct LoginButton: View {
    let textLabel: String
    var body: some View {
        HStack {
            Text(textLabel)
                .font(.navTitle)
                .foregroundColor(.white)
        }
        .padding()
        .padding(.vertical, 5)
        .padding(.horizontal, 100)
        .background(Color(.blue))
        .cornerRadius(10)
        .fixedSize()
    }
}

两种方案都能解决问题，方案二更符合SwiftUI的视图层级设计逻辑，推荐使用。

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