如何使 SwiftUI 按钮固定大小？答案

【问题标题】：How to make SwiftUI Buttons a fixed size?如何使 SwiftUI 按钮固定大小？
【发布时间】：2022-01-13 19:27:10
【问题描述】：

我正在尝试创建 2 个大小相同的按钮，但大小由按钮内的文本决定。两个按钮分别是“登录”和“创建账号”，所以“创建账号”按钮比较大。我尝试使用 .frame() 来调整大小，但这只是让它周围有额外的填充。

这是我的代码：

 HStack {
                    Button(action: {
                        print("Login button pressed")
                    }) {
                    Text("Login")
                        .padding()
                        .foregroundColor(Color.white)
                        .background(Color(UIColor.buttonColor))
                        .cornerRadius(15)
                    
                        
                    }
                    
                    Button(action: {
                        print("Create Account button pressed")
                    }) {
                    Text("Create Account")
                        .padding()
                        .foregroundColor(Color.white)
                        .background(Color(UIColor.buttonColor))
                        .cornerRadius(15)
                    }
                }

这就是显示的内容

【问题讨论】：

这是否回答了您的问题stackoverflow.com/a/67454262/12299030？当然有最简单的方法 - 对较小的按钮使用相同的标签，透明颜色和所需标签的覆盖。
HStack { Button { } label: { Text("Login") } .frame(width: 146.0, height: 36.0) .background(Color(uiColor: UIColor.buttonColor)) .cornerRadius(15.0 ) .foregroundColor(Color.white) Button { } label: { Text("Create Account") } .frame(width: 146.0, height: 36.0) .background(Color(uiColor: UIColor.buttonColor)) .cornerRadius(15.0. 0) .foregroundColor(Color.white) }

标签： swift button swiftui

【解决方案1】：

最好制作一个可以在整个应用程序中使用的按钮样式，这也将确保任何未来的堆栈都按比例填充。否则你会发现你的 UI 会变得很乱，用这样的 Text()s 制作按钮。

在 HStack 中使用自定义样式布置按钮：

 HStack(spacing: 20) {
     Button("Login", action: { print("login")})
            .buttonStyle(PrimaryButtonStyle())
     Button("Create Account", action: { print("create account")})
            .buttonStyle(PrimaryButtonStyle())
    }.padding([.leading, .trailing], 10)

主按钮样式：

struct PrimaryButtonStyle: ButtonStyle {

var backgroundColor: Color = .black
var textColor: Color = Color.white
var height: CGFloat = 46
var cornerRadius: CGFloat = 15
var fontSize: CGFloat = 15
var disabled: Bool = false
var textSidePadding: CGFloat = 30
var weight: Font.Weight = .semibold

func makeBody(configuration: Configuration) -> some View {
    configuration.label
        .padding([.leading, .trailing], textSidePadding)
        .frame(maxWidth: .infinity, maxHeight: height)
        .background(disabled ? .gray : backgroundColor)
        .foregroundColor(textColor)
        .cornerRadius(cornerRadius)
        .font(.system(size: fontSize, weight: weight, design: .default))
        .scaleEffect(configuration.isPressed ? 1.2 : 1)
        .animation(.easeOut(duration: 0.2), value: configuration.isPressed)
    }
}

结果：

【讨论】：

【解决方案2】：

.frame 并将宽度设置为 UI 屏幕 - 空白应该可以工作

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。