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

104

私は2つのアイテムを極端に1つは左側に、もう1つは右側に揃えようとしています。左に配置された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

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

flutter flutter-layout

— MistyD
ソース

211

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

— レミ・ルセレ
ソース

2

私は彼の使用第二の例にはsettingsRow含まれ、Text("right")

— レミRousselet

そうですか。その部分逃した

— ギュンターZöchbauer

ありがとう。しかし、好奇心から、なぜ私のコードが機能しないのですか？mainAxisAlignment子供のは発生しません。親の特性は子供の特性を追い越しますか？

— MistyD 2018年

1

2番目のものは非常に優れています。

— RaghuMudem20年

1

@KPradeepKumarReddyサイズが大きすぎると、これら2つのウィジェットが互いにオーバーラップする可能性があることを恐れない場合は、Stackを使用してから、Alignウィジェットでラップされた2つの子（1つはAlignment.center、もう1つはAlignment.centerRight）を使用することをお勧めします。または、flexを使用して行に3つの拡張ウィジェットを配置します。1。最初のウィジェットには空白（SizedBox）が含まれ、2番目のウィジェットは中央に配置されたウィジェット（中央に折り返されます）、3番目のウィジェットには右揃えのウィジェットが含まれます。

— AlexSemeniuk20年

75

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

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

— 英国人
ソース

Spacer（）は何をしますか？続けて、1つのウィジェットを中央に置き、別のウィジェットを右端に置きたいと思います。これはspacer（）を使用して可能ですか？

— K Pradeep KumarReddy20年

53

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

使用する 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(),
  ],
);

出力：

— CopsOnRoad
ソース

1つのウィジェットを中央に、もう1つを右端に配置します。どうすればそれを達成できますか？

— K Pradeep KumarReddy20年

@KPradeepKumarReddyStackその場合に使用するのが良いアプローチです。

— CopsOnRoad

@KPradeepKumarReddy SOには、このような質問がすでにあるはずです。必要なのは、適切なキーワードで検索することだけです。ここでコメントでコードを実際に示すことはできませんが、アイデアはを使用Stackすることです。最初の子はAlign（右）で、2番目の子はCenterまたは単純Alignです。

— CopsOnRoad

1

はいCopsOnRoad、その通りです。スタックを使用して、一方を右側に、もう一方を中央に揃えることができます。

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

— プーナムカラ
ソース