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

【问题标题】：Make two buttons equal height and width in HStack在 HStack 中使两个按钮的高度和宽度相等
【发布时间】：2022-11-03 17:27:47
【问题描述】：

我有一个 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)
            }
        }
    }
}

我为example 尝试了几个教程。也试过这个solution。

我到处都得到了相同的结果，比如这个：

但我实际上期待这个结果：

【问题讨论】：

标签： swift swiftui vstack hstack

【解决方案1】：

您可以使用.frame(maxWidth: .infinity) 来拉伸任何视图。

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()
            }
        }
        .frame(maxWidth: .infinity) <<-- Here

        
        VoteButton (
            isVoted: $isDown,
            counter: survey.downVotes,
            text: "NO"
        ) {
            self.isDown.toggle()
            if isUp == isDown {
                self.isUp.toggle()
            }
        }
        .frame(maxWidth: .infinity). <<-- and here.
        
    }
  }
}

【讨论】：