web-dev-qa-db-fra.com

Bouton frontière avec rayon de coin dans Swift UI

J'essaie de définir une bordure arrondie sur un bouton, mais la bordure du bouton n'est pas correcte.

Code:

Button(action: {
        print("sign up bin tapped")          
}) {
    Text("SIGN UP")
     .frame(minWidth: 0, maxWidth: .infinity)
      .font(.system(size: 18))
      .padding()
      .foregroundColor(.white)
 }
  .border(Color.white, width: 2)
  .cornerRadius(25)

Production:

enter image description here

Comme vous pouvez le voir, la frontière au coin est coupée.

Toute suggestion que je fais mal?

iosswiftswiftui
20
Mahendra

Essayez-la comme ceci: au lieu de régler le cointradius sur le bouton, utilisez une superposition pour la vue intérieure:

    Button(action: {
        print("sign up bin tapped")
    }) {
        Text("SIGN UP")
            .frame(minWidth: 0, maxWidth: .infinity)
            .font(.system(size: 18))
            .padding()
            .foregroundColor(.white)
            .overlay(
                RoundedRectangle(cornerRadius: 25)
                    .stroke(Color.white, lineWidth: 2)
        )
    }

Travaille pour moi. Faites-moi savoir si cela aide!

8
Teetz

Xcode 11.4.1

                            Button(action: self.action) {
                                Text("Button Name")
                                    .font(.system(size: 15))
                                    .fontWeight(.bold)
                                    .foregroundColor(.white)
                                    .padding(10)
                                    .background(Color.darkGray)
                                    .cornerRadius(10)
                            }
                            .buttonStyle(PlainButtonStyle())

Il n'est pas nécessaire d'ajouter une superposition. Vous pouvez remplacer le modificateur de rembourrage avec modificateur de cadre. L'action est une méthode sans retour en dehors de la variable du corps.

1
Alexander

Vous pouvez essayer ceci:

var body: some View {
        ZStack {
            Color.green
            .edgesIgnoringSafeArea(.all)

            HStack {
            Button(action: {
                    print("sign up bin tapped")
            }){
                HStack {
                    Text("SIGN UP")
                        .font(.system(size: 18))
                    }
                .frame(minWidth: 0, maxWidth: 300)
                .padding()
                .foregroundColor(.white)
                .overlay(
                    RoundedRectangle(cornerRadius: 40)
                        .stroke(Color.white, lineWidth: 2)
                )

                }
            }
        }
    }

Je n'ai pas non plus réglé le maxwidth à .infinity car cela signifie que le bouton remplira la largeur de votre vue de conteneur.

Le résultat sera:

enter image description here

J'espère que ça aide :)

1
Aira Samson