Flutter aligne deux éléments aux extrêmes - un à gauche et un à droite

Question

J'essaie d'aligner deux éléments aux extrémités, l'un à gauche et l'autre à droite. J'ai une ligne qui est alignée à gauche et un enfant de cette ligne est aligné à droite. Cependant, il semble que la ligne enfant reprenne la propriété d'alignement de son parent. Voici mon code

var SettingsRow = new Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                Text("Right",softWrap: true,),
            ],
        );

        var nameRow = new Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                Text("Left"),
                SettingsRow,
            ],
        );

En conséquence, j'obtiens quelque chose comme ceci

Left Right

Ce que je voudrais, c'est

Left      Right

Il y a également suffisamment d'espace sur la rangée. Ma question est la suivante : pourquoi la rangée enfant n'affiche-t-elle pas son nom ? MainAxisAlignment.end propriété ?

Answer 1

Utilisez un seul Row à la place, avec mainAxisAlignment: MainAxisAlignment.spaceBetween .

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Text("left"),
    new Text("right")
  ]
);

Ou vous pouvez utiliser Expanded

new Row(
  children: [
    new Text("left"),
    new Expanded(
      child: settingsRow,
    ),
  ],
);

Answer 2

Une solution simple serait d'utiliser Spacer() entre les deux widgets

Row(
  children: [
    Text("left"),
    Spacer(),
    Text("right")
  ]
);

Answer 3

Vous pouvez le faire de plusieurs façons.

Utilisation de mainAxisAlignment: MainAxisAlignment.spaceBetween

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
  ],
);

---

Utilisation de Spacer

Row(
  children: <Widget>[
    FlutterLogo(),
    Spacer(),
    FlutterLogo(),
  ],
);

---

Utilisation de Expanded

Row(
  children: <Widget>[
    FlutterLogo(),
    Expanded(child: SizedBox()),
    FlutterLogo(),
  ],
);

---

Utilisation de Flexible

Row(
  children: <Widget>[
    FlutterLogo(),
    Flexible(fit: FlexFit.tight, child: SizedBox()),
    FlutterLogo(),
  ],
);

---

Sortie :

Answer 4

Oui CopsOnRoad est juste, par le biais de la pile vous pouvez aligner l'un à droite et l'autre au centre.

Stack(
    children: [
      Align(
        alignment: Alignment.centerRight,
        child: Text("right"),
      ),
      Align(
        alignment: Alignment.center,
        child: Text("center"),
      )
    ],
  )

Answer 5

Utiliser la ligne de code mainAxisAlignment: MainAxisAlignment.spaceBetween, dans une rangée. Cela permettra aux widgets d'être sur deux extrémités. Cependant, si vous travaillez sur TextField, utilisez plutôt la classe de décoration et les attributs prefix*** et suffix***.