web-dev-qa-db-ja.com

macOのSwiftUIで単純な円形ボタンを作成するにはどうすればよいですか?

シンプルなようです。

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

これは私に与えます:

Preview

四角形部分のみクリックできます。円が切り取られた理由を指摘できる場合は、ボーナスポイント

編集:これはmacOの問題であることが判明しました。

MacOSのSwiftUIのボタンの問題

編集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)

    }
}
2
ShadyAmoeba

これを試してください:

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

出力は次のようになります:

enter image description here

0
Nandhini