web-dev-qa-db-fra.com

Faire s'étendre le bouton sur VStack

J'ai actuellement la vue SwiftUI suivante:

HStack {
  ...
  VStack {
    TextField { ... }
    SecureField { ... }
    Button { ... }
  }
  ...
}

enter image description here

J'ai ajouté une .background(Color.green) à la Button, et comme vous pouvez le voir, la vue est très ajustée au texte.

Je me demande s'il existe un moyen d'ajuster la largeur du bouton afin qu'il remplisse VStack - quelque chose comme un mode .fill Pour UIStackView.

swiftswiftui
6
Kelvin Lau

Quelque chose comme ça?

              Button(action: {
                    // Do your login thing here
                }) {
                    Capsule()
                        .frame(height: 44)
                        .overlay(Text("Login").foregroundColor(Color.white)).padding()
                }
1
SMP

Je ne sais pas s'il existe une méthode .fill Similaire à UIStackView mais, si ce que vous voulez faire est de fournir un certain espacement sur le Button (ou toute autre vue d'ailleurs) ) ce qui a fonctionné pour moi est de définir le frame ou padding

.frame(width: 300, alignment: .center) (nous pouvons également définir une hauteur ici mais, sinon, elle devrait pouvoir déduire la hauteur en fonction du texte du bouton.

Si vous ne souhaitez pas définir une largeur arbitraire, vous pouvez également import UIKit Et utiliser UIScreen et obtenir la largeur totale des périphériques. (Il peut y avoir un moyen SwiftUI d'obtenir cela, mais je ne l'ai pas encore trouvé pour le moment)

.frame(width: UIScreen.main.bounds.width, alignment: .center)

puis vous pouvez ajouter un peu de rembourrage pour une certaine respiration

.padding(.all, 20)

Le problème avec le rembourrage est qu'il augmentera la largeur supplémentaire de l'écran, nous devrons donc en tenir compte lors du réglage de la largeur.

(20 * 2 côtés du début et de la fin)

.frame(width: UIScreen.main.bounds.width - 40, alignment: .center)

(la marge de manœuvre est pour quand le texte couvre jusqu'à la fin de l'écran ou si votre alignement est .leading ou .trailing)

0
Simon

Définissez le cadre du texte du bouton à la taille de UIScreen, puis définissez la couleur d'arrière-plan après cela (assurez-vous que tous les changements de style sont effectués après changez la taille du cadre, sinon les changements de style ne se feront que être visible sur le cadre par défaut d'origine). La taille du cadre se propagera vers le haut pour augmenter également la largeur du bouton à la largeur de l'écran .:

Button(action: {
                // Sign in stuff
            }) {
                Text("Sign In")
                .frame(width: UIScreen.main.bounds.width, height: nil, alignment: .center)
                .background(Color.green)
            }

Vous pouvez également ajouter un rembourrage horizontal négatif entre la définition du cadre et de l'arrière-plan afin de compenser le bord de l'écran:

Button(action: {
                    // Sign in stuff
                }) {
                    Text("Sign In")
                    .frame(width: UIScreen.main.bounds.width, height: nil, alignment: .center)
                    .padding(.horizontal, -10.0)
                    .background(Color.green)
                }
0
RPatel99