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: 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? P> 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. p> p>
Mon code jusqu'à présent:
3 Réponses :
enveloppe rangée code> dans un conteneur code> avec sa hauteur code> de la propriété définie:
Vous n'avez pas besoin de mettre la colonne Un moyen de le faire: p> sortie: p> avec: p> de sorte que le rembourrage est calculé automatiquement. p> p> code> comme enfant de conteneur code> comme vous l'avez fait. De cette façon, il ne sera pas basé sur le texte.
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 code> avec une valeur commune pour obtenir la valeur du remplissage. - Ici, cette valeur est 4.2 code> - Mise à jour de la réponse avec la même.
Astuce consiste à transmettre la valeur FontSize code> sur directement textStyle code> & in EdgeInsets / 4.2 code> & EdgeInsets / 4.5 code>. 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 code> - comme nous avons utilisé le rembourrage de 9.0 code> pour fontsize - 38 code> pour obtenir cela de Fontsize Nous avons besoin de diviser FontSize par 4.2 code>, similaire pour l'autre taille de police également. Nous avons donc reçu un numéro commun qui alterle Valeur de remplissage code> en fonction de FontSize code>
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. P>
Remarque: Je ne conseillerais pas cette solution à moins que vous soignez vraiment em> environ un alignement précis avec le bord du caractère. P> Le code de la disposition: < / p> générant l'image implique un appel ASYNC et j'ai donc enrôlé le widget futurbuilder. p> Cette solution fonctionne pour n'importe quelle densité d'écran, la taille de la police ou le facteur d'échelle de texte. p> p>
Dans votre colonne ADD -
MAINAXISSIZE: MAINAXISSISIZE.MIN, CODE>