Как сделать простую круглую кнопку в SwiftUI в macOs?

Question

Похоже, все должно быть просто.

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

Это дает мне:

Я могу нажать только на часть прямоугольника. Также бонусные баллы, если вы можете указать, почему круг обрезан

РЕДАКТИРОВАТЬ: Оказывается, это проблема с MacO.

Проблема с кнопками в SwiftUI на 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)

    }
}

Answer 1

Почему круг обрезан ??

При применении наложения к виду исходный вид продолжает предоставлять характеристики макета для получающегося вида.

К сожалению, это верно даже для модификатора .background () !!

Вам необходимо изменить рамку кнопки, особенно на ма c, где по умолчанию в конфигурации виден фон кнопки.

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)

Answer 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()
    }
}

Выход будет: