Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make a simple circular button in SwiftUI in macOs?

Seems like it should be simple.

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

This gives me:

Preview

I can only click on the rectangle part. Also bonus points if you can point out why the circle is cut off

EDIT: Turns out this is an issue with macOs.

Issue with Buttons in SwiftUI on MacOS

EDIT 2: As Asmari mention below, you can use 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)

    }
}

or use a custom style:

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)

    }
}
like image 572
ShadyAmoeba Avatar asked Jan 08 '20 03:01

ShadyAmoeba


People also ask

How do I make a button round in SwiftUI?

Any SwiftUI view can have its corners rounded using the cornerRadius() modifier. This takes a simple value in points that controls how pronounced the rounding should be.

How do I create a button in SwiftUI?

SwiftUI's button is similar to UIButton , except it's more flexible in terms of what content it shows and it uses a closure for its action rather than the old target/action system. To create a button with a string title you would start with code like this: Button("Button title") { print("Button tapped!") }

What is a button SwiftUI?

A Button is a type of control that performs an action when it is triggered. In SwiftUI, a Button typically requires a title text which is the text description of your button, and an action function that will handle an event action when triggered by the user.


1 Answers

Try this one:

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

Output wil be:

enter image description here

like image 140
Nandhini Avatar answered Oct 01 '22 15:10

Nandhini