SwiftUI中HStack内按钮异常：点击一个所有按钮均响应

你的问题不是SF Symbols的问题，也不是SwiftUI的bug，纯粹是代码结构写错了：第一个Button的内容视图没有正确闭合，你把Spacer()和另外两个Button都写到第一个Button的闭包里面了，导致整个这一片区域都属于第一个按钮的点击范围，点任何地方都会触发第一个按钮，看起来就像所有按钮都被触发了。

修正后的代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
                .ignoresSafeArea()
            VStack {
                HStack(alignment: .top, spacing: 0) {
                    // 第一个Button正确闭合，Spacer放在Button外面
                    Button(action: {
                        print("点击了首页按钮")
                    }){
                        Image(systemName: "house.fill").tint(.white)
                    }
                    Spacer()
                    
                    Button(action: {
                        print("点击了购物车按钮")
                    }){
                        Image(systemName: "cart.fill").tint(.white)
                    }
                    Spacer()
                    
                    Button(action: {
                        print("点击了搜索按钮")
                    }){
                        Image(systemName: "magnifyingglass").tint(.white)
                    }
                }.font(.system(size: 23))
                
                HStack{
                    Text("New Released")
                        .foregroundColor(.white)
                        .font(.title2)
                        .bold()
                        .padding(EdgeInsets(top: 16, leading: 0, bottom: 0, trailing: 0))
                    Spacer()
                }
                Spacer()
            }
            .padding()
        }
    }
}

关键修改点 #

• 把第一个Button的闭合括号}移到Image(systemName: "house.fill").tint(.white)之后，让Spacer()和另外两个Button成为HStack的平级子视图，而不是第一个按钮的内容。
• 如果你想让三个按钮均匀分布在顶部栏，需要在第二个按钮后面也加一个Spacer()，这样三个按钮会分别靠左、居中、靠右排列（可根据需求调整）。

之前加.buttonStyle(BorderlessButtonStyle())没用，是因为根本问题是按钮的点击范围被错误扩大了，和按钮样式无关。

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