在HStack中使两个按钮的高度和宽度相等

Question

我有一个 VStack 和另一个 HStack，里面有按钮。即使我尝试设置按钮的固定宽度和高度，我也遇到了根据按钮内容缩小按钮的问题。

这是主屏幕：

import Foundation
import SwiftUI
import SwiftUINavigator

struct SurveyScreenView: View, IItemView {
    
    var listener: INavigationContainer?
    @State var survey: Survey
    @State var isUp = false
    @State var isDown = false
    
    @State var widthButton: CGFloat = 100
    @State var heightButton: CGFloat = 50
    
    var body: some View {
        NavigationView {
            VStack(alignment: .leading, spacing: 32) {
                Text(survey.title)
                    .font(.title)
                Text(survey.description)
                
                VoteView( survey: $survey, isUp: $isUp, isDown: $isDown)
                
                Spacer()
            }
            .navigationBarItems(leading:
                Button(action: {
                    listener?.pop()
                }, label: {
                    Text("Feed")
                })
            )
            .navigationBarTitle(Text("Survey"))
            .navigationBarTitleDisplayMode(.inline)
            .padding()
        }
    }
}

在 HStack 中使用按钮查看

struct VoteView: View {
    
    @Binding var survey: Survey
    @Binding var isUp: Bool
    @Binding var isDown: Bool
    
    var body: some View {
        HStack(alignment: .center, spacing: 64) {
            
            VoteButton (
                isVoted: $isUp,
                counter: survey.upVotes,
                text: "YES"
            ) {
                self.isUp.toggle()
                if isUp == isDown {
                    self.isDown.toggle()
                }
            }
            
            VoteButton (
                isVoted: $isDown,
                counter: survey.downVotes,
                text: "NO"
            ) {
                self.isDown.toggle()
                if isUp == isDown {
                    self.isUp.toggle()
                }
            }
            
        }
    }
}

自定义按钮视图

struct VoteButton: View {
    
    @Binding var isVoted: Bool
    var counter: Int = 0
    var text: String = ""
    var clicked: (() -> Void)

    var body: some View {
        if isVoted {
            Button(action: clicked) {
                VStack(alignment: .center, spacing: 5) {
                    Text(text)
                        .font(.headline)
                    Text("\(counter)")
                        .font(.subheadline)
                }
                .foregroundColor(.white)
                .background(.blue)
                .cornerRadius(8)
                .frame(maxWidth: .infinity, minHeight: 40)
            }
            
        } else {
            Button(action: clicked)  {
                VStack(alignment: .center, spacing: 5) {
                    Text(text)
                        .font(.headline)
                    Text("\(counter)")
                        .font(.subheadline)
                }
                .foregroundColor(.blue)
                .background(.white)
                .overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.blue, lineWidth: 2))
                .frame(maxWidth: .infinity, minHeight: 40)
            }
        }
    }
}

我尝试了几个教程，例如。也尝试过这个解决方案。

我到处都得到了相同的结果，就像这样：

但我其实很期待这个结果：

Answer 1

您可以尝试下面的代码技术并根据要求进行修改

HStack {
            Button("Yes") { }
                .foregroundColor(.white)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.red)
                .clipShape(Capsule())

            Button("No") { }
                .foregroundColor(.white)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.red)
                .clipShape(Capsule())
        }
        .fixedSize(horizontal: false, vertical: true)
        .padding()