即使在 HStack SwiftUI 中只按下一个按钮，也会按下所有按钮

Question

我想构建一个由 3 个图标按钮组成的顶部栏，但是当我按下一个按钮时，其他按钮也被按下。也许是因为

systemName

SF 符号？我不知道我是否错过了什么。在这里帮助新手

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
                .ignoresSafeArea()
            VStack {
                HStack(alignment: .top, spacing: 0) {
                    
                        Button(action: {
                        }){
                            Image(systemName: "house.fill").tint(.white)
                        Spacer()
                            
                        Button(action: {}){
                            Image(systemName: "cart.fill").tint(.white)
                        }
                            
                        Button(action: {}){
                            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()
        }
    }
}

预览

这是 SwiftUI 错误还是我在这里遗漏了什么？

我尝试添加

.buttonStyle(BorderlessButtonStyle())

但没有成功。

Answer 1

请检查您的第一个按钮代码，您错误地将其他 2 个按钮包裹在其中，这就是它们相互影响的方式。这是正确的代码

    struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
                .ignoresSafeArea()
            VStack {
                HStack(alignment: .top, spacing: 0) {
                    
                        Button(action: {
                            print("Button1")
                        }){
                            Image(systemName: "house.fill").tint(.white)
                        } // this was placed wrongly  
                        Spacer()
                            
                        Button(action: {
                            print("Button2")
                        }){
                            Image(systemName: "cart.fill").tint(.white)
                        }
                            
                        Button(action: {
                            print("Button3")
                        }){
                            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()
        }
    }
}