如何在 macOS 的 SwiftUI 中制作一个简单的圆形按钮？答案

【问题标题】：How can I make a simple circular button in SwiftUI in macOs?如何在 macOS 的 SwiftUI 中制作一个简单的圆形按钮？
【发布时间】：2020-04-25 14:05:53
【问题描述】：

看起来应该很简单。

        Button(action: {
        }){
            ZStack{
                Circle()
                .frame(width: 100, height: 100)
                .foregroundColor(.blue)
                Text("Press me")
            }
        }

这给了我：

我只能点击矩形部分。如果你能指出圆圈被切断的原因，还可以加分

编辑：原来这是 macOS 的问题。

Issue with Buttons in SwiftUI on MacOS

编辑 2：正如 Asmari 下面提到的，您可以使用 PlainButtonStyle：

    var body: some View {
        VStack{
            Button(action: {
                print("Pressed!")
            }){
               Text("Press me")
               .frame(width: 100, height: 100)
               .foregroundColor(Color.black)
               .background(Color.red)
               .clipShape(Circle())
            }.buttonStyle(PlainButtonStyle())
        }.frame(width: 300, height: 500)

    }
}

或使用自定义样式：

struct BlueButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .frame(width: 100, height: 100)
            .foregroundColor(Color.black)
            .background(Color.red)
            .clipShape(Circle())
    }
}

struct ContentView: View {
    var body: some View {
        VStack{
            Button(action: {
                print("Pressed!")
            }){
               Text("Press me")

            }.buttonStyle(BlueButtonStyle())
        }.frame(width: 300, height: 500)

    }
}

【问题讨论】：

您只需要像this post 一样使用PlainButtonStyle 并根据需要自定义按钮。
@Asperi，这只是部分正确，尝试检查结果大小......垂直尺寸仍然存在问题。

标签： swift macos swiftui

【解决方案1】：

为什么圆圈被切断了？？

当您将叠加层应用于视图时，原始视图会继续为结果视图提供布局特征。

不幸的是，即使是 .background() 修饰符也是如此！

您需要更改按钮的框架，尤其是在 mac 上，默认配置下按钮的背景是可见的。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button(action: {
            print("tap")
        }) {
            Text("Button").font(.largeTitle)
        }.buttonStyle(BlueCircleButtonStyle())
        // to see resulting layout bounds
        .border(Color.red)
    }
}

struct BlueCircleButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label.padding().modifier(MakeSquareBounds()).background(Circle().fill(Color.blue))

    }
}

struct MakeSquareBounds: ViewModifier {

    @State var size: CGFloat = 1000
    func body(content: Content) -> some View {
        let c = ZStack {
            content.alignmentGuide(HorizontalAlignment.center) { (vd) -> CGFloat in
                DispatchQueue.main.async {
                    self.size = max(vd.height, vd.width)
                }
                return vd[HorizontalAlignment.center]
            }
        }
        return c.frame(width: size, height: size)
    }
}

在 mac 上运行的结果

点击蓝色进行操作...

有一种方法可以在按下时设置不同的样式（检查 ButtonStyle 属性）

【讨论】：

@ShadyAmoeba 我改变了答案。

【解决方案2】：

试试这个：

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button(action: {
            print("Round Action")
            }) {
            Text("Press")
                .frame(width: 100, height: 100)
                .foregroundColor(Color.black)
                .background(Color.red)
                .clipShape(Circle())
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

输出将是：

【讨论】：

^ 这就是答案