SwiftUI macOS 中的大重音按钮 [重复]答案

【问题标题】：Large Accented Button in SwiftUI macOS [duplicate]SwiftUI macOS 中的大重音按钮 [重复]
【发布时间】：2021-12-22 15:28:40
【问题描述】：

如何在 macOS 的 SwiftUI 中创建如下按钮？

编辑：这是我用来创建按钮的代码：

Button(action: {}) {
  VStack {
    Text("Sign In")
  }
}
.buttonStyle(.bordered)

这会产生：

但是，尝试在按钮中添加填充会产生此问题：

在按钮上或按钮内的内容上使用frame(width:height:) 时会出现类似问题。

此外，我如何强调这个按钮，就像在页面入门中一样？

谢谢。

【问题讨论】：

您在其上放置一个带有圆角矩形的背景，填充您想要的任何颜色。除了背景颜色之外，我不确定您所说的口音是什么意思。如果要更改按钮上的文本颜色，请更改前景色。如果没有发布代码，就没有更多的答案了。
@Yrb 感谢您的快速回复：我正在寻找 Apple 系统按钮，而不是自定义按钮。我在原始问题中添加了一些代码以帮助澄清。
SwiftUI 不能这样工作。这不是 UIKit，您可以在其中拖动 UIButton 并设置属性。基本的 SwiftUI 只是不同颜色的文本。你看到的其他一切都是定制的。在这种情况下，您的按钮必须是自定义的，并且根本不使用 Button() 。这就是声明式接口的意义所在。
是的，只需制作自己的自定义按钮，包括渐变、边框、填充等。使用.buttonStyle(PlainButtonStyle()) 摆脱所有默认特征。
所有其他响应者都忽略了 Apple 的圆形按钮带有纹理的事实。事实上，Apple 并没有为我们提供更高的纹理。如果你想要一个看起来像 Apple 的按钮，纹理等等，你将不得不非常努力地自己复制它。

标签： swift swiftui macos-big-sur

【解决方案1】：

你可以试试这样的简单方法：

Button(action: {}) {
    Text("Sign In")
        .padding(22)
        .frame(width: 222, height: 44)
        .background(Color.blue)
        .foregroundColor(Color.white)
}.frame(width: 222, height: 44)
 .background(Color.blue).cornerRadius(10)

【讨论】：

【解决方案2】：

这里有一个适合你的方法：

struct ContentView: View {
    
    var body: some View {
        
        Color.gray
            .frame(width: 800.0, height: 500.0)
            .overlay(CustomButtonView().padding(), alignment: .bottom)
            
        
    }
    
}


struct CustomButtonView: View {
    
    @State private var scaleAnimation: Bool = Bool()
    
    var body: some View {
        
        Text("Button").frame(width: 300.0, height: 50.0).background(Color.blue.cornerRadius(10)).foregroundColor(.white).onTapGesture {
            print("Action!")
            scaleAnimation = true
            DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + DispatchTimeInterval.milliseconds(100)) { scaleAnimation = false }
            
        }
        .shadow(radius: 5)
        .scaleEffect(scaleAnimation ? 0.98 : 1.0)
        .animation(.interactiveSpring(), value: scaleAnimation)
        
    }
    
}

【讨论】：