web-dev-qa-db-ja.com

極端に2つのアイテムをフラッター整列-1つは左側、もう1つは右側

2つのアイテムを左端と右端に極端に並べようとしています。左に揃えられた行が1つあり、その行の子が右に揃えられています。ただし、子行が親から位置合わせプロパティを取得しているようです。これは私のコードです

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,
            ],
        );

その結果、私はこのようなものを得ます

Left Right

欲しいのは

Left      Right

また、行に十分なスペースがあります。私の質問は、子RowがMainAxisAlignment.endプロパティを表示しないのはなぜですか？

flutterflutter-layout
29
MistyD

代わりに、単一のRowをmainAxisAlignment: MainAxisAlignment.spaceBetweenとともに使用します。

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

または、Expandedを使用できます

new Row(
  children: [
    new Text("left"),
    new Expanded(
      child: settingsRow,
    ),
  ],
);
64
Rémi Rousselet

簡単な解決策は、2つのウィジェット間でSpacer()を使用することです

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

多くの方法でそれを行うことができます。

mainAxisAlignment: MainAxisAlignment.spaceBetweenを使用する

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

Spacerを使用する

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

Expandedを使用する

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

Flexibleを使用する

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

出力：

enter image description here

5
CopsOnRoad