0
votes

Aligner le conteneur en haut et en bas du texte

J'essaie d'aligner un rectangle coloré à gauche de deux widgets de texte. Spécifiquement, je veux que le fond du rectangle coloré s'aligne sur la base du texte inférieur et le haut du rectangle à aligner avec la hauteur du capuchon du texte supérieur. Voici une maquette de ce que j'essaie d'atteindre:  Capture d'écran de la mise en page souhaitée Mon code jusqu'à présent: xxx

Comment alloir-t-il aligner le fond du rectangle coloré avec la base du texte inférieur et aligner le haut du rectangle à la hauteur du capuchon du texte supérieur?

Edit: une solution serait de déterminer la distance entre la ligne de base et le bas du widget de texte ainsi que la distance entre la hauteur du capuchon et le haut du widget de texte. Le widget de texte ne semble pas offrir ces valeurs cependant.


1 commentaires

Dans votre colonne ADD - MAINAXISSIZE: MAINAXISSISIZE.MIN,


3 Réponses :


0
votes

enveloppe rangée dans un conteneur avec sa hauteur de la propriété définie: xxx


0 commentaires

1
votes

Vous n'avez pas besoin de mettre la colonne comme enfant de conteneur comme vous l'avez fait. De cette façon, il ne sera pas basé sur le texte.

Un moyen de le faire: xxx

sortie:

 Entrez la description de l'image ici

avec: xxx

sortie: Entrez la description de l'image ici

de sorte que le rembourrage est calculé automatiquement.


7 commentaires

Le rembourrage crée-t-il l'allusion de l'alignement avec les mots, non?


Oui, si nous retirons le rembourrage autour du conteneur rouge - il ne sera pas de base avec du texte.


Comment calculer les valeurs pour EdgeIntsets afin qu'elle s'ajuste si la taille du texte change?


Divisez le FontSize avec une valeur commune pour obtenir la valeur du remplissage. - Ici, cette valeur est 4.2 - Mise à jour de la réponse avec la même.


Astuce consiste à transmettre la valeur FontSize sur directement textStyle & in EdgeInsets / 4.2 & EdgeInsets / 4.5 . En tant que fontiper les augmentations de variable, le rembourrage diminue automatiquement. Donc, le rapport est pareil toujours.


D'où viennent les 4,2 et 4,5?


C'est un ratio qui vient en divisant 38 / 9,0 = 4.2 - comme nous avons utilisé le rembourrage de 9.0 pour fontsize - 38 pour obtenir cela de Fontsize Nous avons besoin de diviser FontSize par 4.2 , similaire pour l'autre taille de police également. Nous avons donc reçu un numéro commun qui alterle Valeur de remplissage en fonction de FontSize



0
votes

Il n'y a pas d'API de flutter pour obtenir les limites exactes du texte. Flutter: Trouver les limites exactes du texte couvre cela. Cela dit, j'ai une solution basée sur la même discussion.

L'approche consiste à peindre un caractère (une capitale 'I' dans mon cas) à une toile puis de numériser les pixels d'image à la recherche du bord du personnage. Je compte les lignes de pixels entre le caractère et le bord d'image et l'utiliser pour régler le rembourrage sur le bloc de couleur. Ma solution est un peu plus impliquée car j'ai deux widgets de texte dans une colonne et chaque texte est une taille différente.

Remarque: Je ne conseillerais pas cette solution à moins que vous soignez vraiment environ un alignement précis avec le bord du caractère.

Le code de la disposition: < / p> xxx

générant l'image implique un appel ASYNC et j'ai donc enrôlé le widget futurbuilder. xxx

Cette solution fonctionne pour n'importe quelle densité d'écran, la taille de la police ou le facteur d'échelle de texte.


0 commentaires