Flattere zwei Elemente an den Extremen aus - eines links und eines rechts

95

Ich versuche, zwei Elemente an den Extremen auszurichten, eines links und eines rechts. Ich habe eine Zeile, die nach links ausgerichtet ist, und dann wird ein untergeordnetes Element dieser Zeile nach rechts ausgerichtet. Es scheint jedoch, dass die untergeordnete Zeile die Ausrichtungseigenschaft von ihrer übergeordneten Zeile übernimmt. Das ist mein 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,
            ],
        );

Als Ergebnis bekomme ich so etwas

Left Right

Was ich möchte ist

Left      Right

Es gibt auch genug Platz in der Reihe. Meine Frage ist, warum die Kinderreihe ihr MainAxisAlignment.endEigentum nicht ausstellt .

flutter flutter-layout

— MistyD
quelle

195

Verwenden Sie Rowstattdessen eine einzelne mit mainAxisAlignment: MainAxisAlignment.spaceBetween.

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

Oder Sie können verwenden Expanded

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

— Rémi Rousselet
quelle

2

Auf dem 2. Beispiel verwende ich sein settingsRow, das enthältText("right")

— Rémi Rousselet

Aha. Verpasste diesen Teil

— Günter Zöchbauer

Vielen Dank. Aber aus Neugier, warum funktioniert mein Code nicht? Das mainAxisAlignmentdes Kindes tritt nicht auf. Überholen die Eigenschaften der Eltern die der Kinder?

— MistyD

1

2. ist sehr viel besser.

— Raghu Mudem

1

@KPradeepKumarReddy Wenn Sie nicht befürchten, dass sich diese beiden Widgets bei zu großen Größen überlappen, empfehle ich die Verwendung von Stack und dann zwei in Align-Widgets eingeschlossenen untergeordneten Widgets (eines mit Alignment.center, eines mit Alignment.centerRight). Oder haben Sie drei erweiterte Widgets mit Flex in Ihrer Zeile: 1. Das erste enthält ein leeres (SizedBox), das zweite - Ihr zentriertes Widget (in der Mitte eingeschlossen) und das dritte Ihr rechtsbündiges Widget.

— Alex Semeniuk

71

Eine einfache Lösung wäre die Verwendung Spacer()zwischen den beiden Widgets

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

— Pritish
quelle

Was macht Spacer ()? In einer Reihe möchte ich ein Widget in der Mitte und ein anderes ganz rechts halten. Ist das mit spacer () möglich?

— K Pradeep Kumar Reddy

51

Sie können es auf viele Arten tun.

Verwenden von mainAxisAlignment: MainAxisAlignment.spaceBetween

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

Verwenden von Spacer

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

Verwenden von Expanded

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

Verwenden von Flexible

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

Ausgabe :

— CopsOnRoad
quelle

Ich möchte ein Widget in der Mitte und ein anderes ganz rechts. Wie können wir das erreichen?

— K Pradeep Kumar Reddy

@KPradeepKumarReddy In Stackdiesem Fall ist ein guter Ansatz zu verwenden .

— CopsOnRoad

@KPradeepKumarReddy Ich bin sicher, dass es auf SO bereits eine solche Frage geben muss. Alles, was Sie tun müssen, ist mit dem richtigen Schlüsselwort zu suchen. Ich kann Ihnen den Code hier im Kommentar nicht wirklich zeigen, aber die Idee ist, ihn zu verwenden Stack, wobei das erste Kind Align(rechts) ist und das zweite ein Centeroder einfach sein kann Align.

— CopsOnRoad

1

Ja CopsOnRoadist richtig, durch den Stapel können Sie eine rechts und eine andere in der Mitte ausrichten.

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

— Poonam Kalra
quelle