1
votes

Comment utiliser l'espace entre et le texte en ligne?

J'essaye d'utiliser l'espace entre pour séparer deux widgets de texte mais aucune des options mainAxisAlignment ne fonctionne. Capture d'écran du code ci-dessous .

Dans l'image, vous pouvez voir que Text2 et Text3 sont collés ensemble, je veux qu'ils soient séparés. Le premier enfant de la ligne principale doit être développé 1. Le deuxième (celui qui pose problème) doit être comme développé 0.

Container(
  color: Colors.blue,
  child: Row(
    children: [
      Expanded(
        child: Container(
          color: Colors.orange,
          child: Text('Text1'),
        ),
        flex: 1,
      ),
      Column(
        children: [
          Row(
            children: [Text('Text2'), Text('Text3')],
          ),
          Text('Long text Long text Long text'),
        ],
      )
    ],
  ),
)

flutter flutter-layout

0 commentaires

3 Réponses :

0
votes

Utilisez mainAxisAlignment to spaceB Between

 Row(
      mainAxisAlignment:MainAxisAlignment.spaceBetween,
      children: [Text('Text2'), Text('Text3')],
     ),

1 commentaires

Ça ne marche pas. Aucune des options mainAxisAlignment ne fonctionne. Maby est la façon dont Flutter calcule les widgets de texte?

0
votes

Utilisez Spacer () entre deux Text .

Text("Text2"), 
Spacer(), 
Text("Text3")

3 commentaires

Cela génère une erreur de mise en page. J'ai fini par utiliser IntrinsicWidth sur le widget Column.

Essayez d'éviter le plus possible IntrinsicWidth .

Lisez ça dans doc :) mais je n'ai vraiment aucune idée de ce qu'il faut utiliser pour obtenir le design souhaité.

1
votes

J'ai donc réalisé que vous utilisiez le widget Expanded pour le premier enfant mais pas pour le second. De plus, vous devez ajouter mainAxisAlignment: MainAxisAlignment.spaceBetween au widget Row . Vous trouverez ci-dessous un code complet pour ce que vous souhaitez réaliser.

Container(
    color: Colors.blue,
    child: Row(
        children: [
            Expanded(
                child: Container(
                    color: Colors.orange,
                    child: Text('Text1'),
                ),
                flex: 1,
            ),
            Expanded(
                child: Column(
                    children: [
                        Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                                Text('Text2'),
                                Text('Text3')
                            ],
                        ),
                        Text('Long text Long text Long text'),
                    ],
                ),
            )
        ],
    ),
)

0 commentaires