SwiftUI 中的按钮大小和颜色

Posted 2023-02-24

【中文标题】SwiftUI 中的按钮大小和颜色

【英文标题】：Button size and color in SwiftUI

【发布时间】：2021-03-04 23:29:07

【问题描述】：

我是 SwiftUI 和 ios 开发的新手。

我尝试创建 2 个按钮，但无法更改背景颜色或大小。

看起来像这样：

下面是代码：

        HStack 
            Button( action: 
                print("click")
            )
                Text("Login")
                    .foregroundColor(.purple)
                    .padding()
                    .overlay(
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(Color.purple, lineWidth: 1)
                    )
            
            Button( action: 
                print("click")
            )
                Text("Register")
                    .foregroundColor(.white)
                    .padding()
                    .overlay(
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(Color.black, lineWidth: 1)
                            
                    )
                
            
        

我希望得到一个按钮，它几乎使用了屏幕的一半，每边的边距为 10 像素。目标是让 2 个按钮几乎覆盖显示屏的宽度。我也试着让它更薄。上下边框的距离过大，左右边框要宽一些的时候，我希望它靠近文字。

我也不知道如何将按钮背景颜色更改为黑色

有什么想法吗？

谢谢

【参考方案1】：

您可以创建自己的ButtonStyle，您可以完全自定义和重复使用：

struct CustomButtonStyle: ButtonStyle 
    func makeBody(configuration: Configuration) -> some View 
        configuration.label
            .padding(10) // *make it thinner*
            .frame(maxWidth: .infinity) // expand horizontally 
            .foregroundColor(.purple)
            .background(
                Rectangle()
                    .stroke(Color.purple, lineWidth: 1)
                    .background(Color.black) // *change the button background color to black*
                    .cornerRadius(20)
            )
            .padding(.horizontal, 10) // *margin of 10px on each side*
            .opacity(configuration.isPressed ? 0.7 : 1)
    

struct ContentView: View 
    var body: some View 
        HStack 
            Button("Login") 
                print("click")
            
            .buttonStyle(CustomButtonStyle())
            Button("Register") 
                print("click")
            
            .buttonStyle(CustomButtonStyle())
        
    

【参考方案2】：

=> 长话短说

愿有人发现它很方便。

struct test: View 
let roundRect = RoundedRectangle(cornerRadius: 25.0)
var body: some View 
    HStack 
        Button( action: 
            print("click")
        )
            Text("Login")
                .frame(width: UIScreen.main.bounds.width*0.4, height: 50, alignment: .center)
                .background(roundRect.fill(Color.orange))
                .overlay(roundRect.stroke())
        
    .foregroundColor(.purple)
  

【参考方案3】：

我们能记住的最重要的事情是，当我们面临不确定大小的情况时，然后使用形状填充所有可用空间，然后根据需要限制它们，就像我在代码中所做的那样，您可以将数字更改为您的设计。

import SwiftUI

struct ContentView: View 
    var body: some View 

        HStack 
            
            Button( action: 
                
                print("Login Button")
                
            )
                
                CustomButtonView(stringOfButton: "Login")
                
                
            
            
            Button( action: 
                
                print("Register Button")
                
            )
                
                CustomButtonView(stringOfButton: "Register")

            
            
        
        .padding()

        
    

---

struct CustomButtonView: View 
    
    var stringOfButton: String
    

    var body: some View 
        
        ZStack 
            
            Rectangle()
                .fill(Color.black)
                .cornerRadius(20)
                .overlay(
                    RoundedRectangle(cornerRadius: 20)
                        .stroke(Color.purple, lineWidth: 1)
                )
                .frame(height: 50, alignment: .center)
            
            Text(stringOfButton)
                .foregroundColor(.purple)