Button (Bouton)
Lorsque vous appuyez sur l'icône de lecture pour écouter votre musique préférée, vous utilisez un composant Button.
Un bouton est juste quelque chose sur lequel vous pouvez cliquer pour effectuer une action. Cette action peut aller de la navigation vers un autre écran, à l'enregistrement d'informations dans une base de données, ou à la diffusion d'un son.
Les blocs ci-dessus indiquent que lorsque l'on clique sur le bouton 1, on passe à l'écran 2.
Vue d'ensemble
Vidéo Tutorielle
Style du Bouton
Vous disposez de nombreuses options pour donner du style à votre bouton, comme par exemple changer la couleur de fond ou la couleur du texte. Voici les différentes options de personnalisation :
Text: Texte qui apparaît sur le bouton
Text Color: Couleur du texte qui apparaît sur le bouton
Background Color: Définit la couleur de fond du bouton
Font Size: Taille du texte qui apparaît sur le bouton
Background Picture: Téléchargez une image qui apparaît sur le bouton.
Background Picture Resize Mode
Cover: Remplit l'ensemble du bouton sans modifier le ratio hauteur et largeur de l'image
Contain: L'image entière sera réduite pour tenir à l'intérieur du bouton, sans modifier le rapport entre la hauteur et la largeur de l'image
Stretch: La hauteur de l'image change pour remplir le bouton dans le sens de la longueur
Repeat: Répétez l'image pour couvrir le bouton. Le rapport entre la hauteur et la largeur de l'image ne changera pas
Center: Positionne l'image au milieu du bouton
Visible: Pour voir le bouton dans votre application, réglez le commutateur sur "True"
Border
Width: Indiquez la largeur que vous souhaitez donner à la bordure du bouton
Color: Choisissez une couleur pour la bordure du bouton
Style: Choisissez si vous souhaitez que la bordure soit en pointillés, en tirets ou en traits pleins
Radius: Indiquez le contour que vous souhaitez pour les bords de la bordure du bouton
Font Bold: Pour que le texte du bouton soit en gras, mettez le commutateur sur "True".
Font Italic: Pour que le texte du bouton soit en italique, réglez le commutateur sur "True"
Raised: Pour jeter une ombre sur le bouton, réglez l'interrupteur sur "True"
Disabled: Pour éviter que le bouton n'exécute une option lorsqu'on clique dessus, réglez l'interrupteur sur "True"
Modifier la taille du bouton
Vous pouvez définir la hauteur du bouton en utilisant la propriété "Height" et la largeur du bouton en utilisant la propriété "Width".
Height
Fill container - Le bouton remplit tout l'écran verticalement
Fit contents - La hauteur du bouton change en fonction de la taille du contenu qu'il contient
Relative size - Le bouton remplit le pourcentage spécifié de l'écran
Absolute size - Dimensionne le bouton à un nombre de pixels déterminé
Width
Fill container - Le bouton remplit tout l'écran horizontalement
Fit contents - La largeur du bouton change en fonction de la taille du contenu qu'il contient
Relative size - Le bouton remplit le pourcentage spécifié de l'écran
Absolute - Dimensionne le bouton à un nombre de pixels déterminé
Ajouter un espacement
Vous modifiez l'espacement et le positionnement du bouton avec les propriétés Margin (Marge) et Padding (Remplissage)
Margin
Vous pouvez spécifier l'espace que vous souhaitez entre les bords du bouton et l'écran en utilisant des valeurs en pixels ou en pourcentage.
Padding
Vous pouvez spécifier l'espace que vous souhaitez entre la bordure et le contenu du bouton en utilisant des valeurs en pixels ou en pourcentage.
Programmation du bouton
Vous pouvez utiliser les propriétés suivantes pour choisir le moment où un événement se produira :
Click: Effectue une action lorsque l'utilisateur appuie sur le bouton
Long Click: Effectue une action lorsque l'utilisateur maintient le bouton enfoncé
Touch Up: Effectue une action après que l'utilisateur ait relâché le bouton
Touch Down: Effectue une action après que l'utilisateur ait touché doucement le bouton
Last updated
