Comment SpaceEvenly et Redimensionner des deux éléments dans une Rangée?

Question 1

Je suis en train de spaceevenly un Icon() et un AutoSizeText() dans un Row(). Lorsque le montant est long comme vous pouvez le voir dans les photos ci-jointes, il rend comme prévu, mais lorsque le montant est égal à zéro ou très court, le AutoSizeText() est d'être centré, mais cela entraîne que la même distance des bords n'est plus maintenu. Il y a une distance supplémentaire causée par le centrage. Je ne sais pas comment résoudre ce problème.

Edit. Si c'était pas clair, je fais référence à la rose sac shopping icône et le montant a montré dans le "Riepilogo Settimanale" section. Si vous regardez le Restaurant de l'Icône et de son montant, vous pouvez remarquer comment ils ne sont pas centrés, ils sont plus près du bord gauche.

Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      width: size.width * 0.3,
      height: size.height,
      // height: size.height * 0.055,
      child: Row(
        children: [
          Spacer(),
          Expanded(
            flex: 3,
            child: Container(
              child: LayoutBuilder(
                builder: (context, constraint) {
                  return Icon(
                    icona,
                    color: colore,
                    size: constraint.biggest.width * 1,
                  );
                },
              ),
            ),
          ),
          Spacer(),
          Expanded(
            flex: 6,
            child: Center(
              child: AutoSizeText(
                importo,
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: colore,
                ),
                maxLines: 1,
              ),
            ),
          ),
          Spacer(),
        ],
      ),
    )

Question 2

Si je vous ai bien compris, vous voulez vous aligner à droite le texte, pas les centrer.

Pour cela, pensez à utiliser un seul Spacer() entre l'icône et le texte. L'extérieur de l'espacement (margin et padding) peut être effectuée à l'aide Padding widget de la place.

user1032613 · Answer 1 · 2021-11-24T00:29:45

1

Si je vous ai bien compris, vous voulez vous aligner à droite le texte, pas les centrer.

Pour cela, pensez à utiliser un seul Spacer() entre l'icône et le texte. L'extérieur de l'espacement (margin et padding) peut être effectuée à l'aide Padding widget de la place.

user1032613

2021-11-24 00:29:45

Au début, je voulais avoir un comportement semblable à l'espace uniformément propery de la Ligne, je voulais le même espace entre le bord gauche-icône, icône, texte, texte à bord droit. Je ne sais pas comment faire pour réaliser que, bien que, parce que le texte de modifier la taille dès qu'il redimensionner, de sorte que l'entretoise doit être en mesure de redimensionner en conséquence. J'ai décidé que c'était mieux de juste à droite, aligner le texte sur la façon dont vous l'avez suggéré, même si ce n'est pas ce que je voulais, mais il semble décent

iocomxda

@iocomxda, oh, si vous voulez avoir le même espace de 3 trous, vous pouvez essayer de mettre 3 Spacer() widgets pour que. Mais les textes (ayant une largeur différente) ne seront pas alignées les unes avec les autres sur la page (comme d'avoir $2666 et $0), donc aligner à droite est l'approche la plus commune.

user1032613

Merci pour cette belle explication! Ne savais pas aligner à droite a été l'approche la plus commune.

iocomxda

Comment SpaceEvenly et Redimensionner des deux éléments dans une Rangée?

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie