Flutter wyrównaj dwa elementy na skrajach - jeden po lewej i jeden po prawej

104

Próbuję wyrównać dwa elementy na skraju, jeden po lewej, a drugi po prawej. Mam jeden wiersz wyrównany do lewej, a następnie element podrzędny tego wiersza jest wyrównany do prawej. Jednak wydaje się, że wiersz podrzędny pobiera właściwość wyrównania od swojego rodzica. To jest mój kod

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

w rezultacie otrzymuję coś takiego

Left Right

Chciałbym

Left      Right

Jest też wystarczająco dużo miejsca na rzędzie. Moje pytanie brzmi: dlaczego podrzędny Row nie wykazuje swojej MainAxisAlignment.endwłasności?

MistyD
źródło

Odpowiedzi:

212

RowZamiast tego użyj pojedynczego z mainAxisAlignment: MainAxisAlignment.spaceBetween.

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

Lub możesz użyć Expanded

new Row(
  children: [
    new Text("left"),
    new Expanded(
      child: settingsRow,
    ),
  ],
);
Rémi Rousselet
źródło
2
W drugim przykładzie używam jego settingsRow, który zawieraText("right")
Rémi Rousselet
Widzę. Przegapiłem tę część
Günter Zöchbauer
Dzięki. Ale z ciekawości, dlaczego mój kod nie działa? mainAxisAlignmentDziecka nie występuje. Czy właściwości rodziców przewyższają właściwości dzieci?
MistyD
1
Drugi jest znacznie lepszy.
Raghu Mudem
1
@KPradeepKumarReddy Jeśli nie boisz się, że te dwa widżety mogą nakładać się na siebie, jeśli ich rozmiary są zbyt duże, sugeruję użycie Stack, a następnie dwoje dzieci owiniętych w widżety Align (jedno z Alignment.center, drugie z Alignment.centerRight). Lub miej trzy Expanded widżety w swoim wierszu z flexem: 1. Pierwszy będzie zawierał pusty (SizedBox), drugi - twój wyśrodkowany widżet (zawinięty w środku), a trzeci - twój widżet wyrównany do prawej.
Alex Semeniuk
76

Prostym rozwiązaniem byłoby użycie Spacer()między dwoma widżetami

Row(
  children: [
    Text("left"),
    Spacer(),
    Text("right")
  ]
);
Pritish
źródło
Co robi Spacer ()? Z rzędu chcę, aby jeden widżet znajdował się pośrodku, a drugi skrajnie w prawo. Czy jest to możliwe przy użyciu elementu spacer ()?
K Pradeep Kumar Reddy,
53

Możesz to zrobić na wiele sposobów.

Za pomocą mainAxisAlignment: MainAxisAlignment.spaceBetween

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

Za pomocą Spacer

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

Za pomocą Expanded

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

Za pomocą Flexible

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

Wyjście :

wprowadź opis obrazu tutaj

CopsOnRoad
źródło
Chcę, aby jeden widżet znajdował się pośrodku, a drugi po prawej stronie. Jak możemy to osiągnąć?
K Pradeep Kumar Reddy
@KPradeepKumarReddy Dobrym podejściem jest użycie Stackw takim przypadku.
CopsOnRoad
@KPradeepKumarReddy Jestem pewien, że w SO musi już być takie pytanie, wszystko, co musisz zrobić, to wyszukać za pomocą odpowiedniego słowa kluczowego. Naprawdę nie mogę pokazać kodu tutaj w komentarzu, ale chodzi o to, aby użyć Stack, z pierwszym dzieckiem Align(po prawej), a drugim może być Centerlub proste Align.
CopsOnRoad
1

Tak CopsOnRoad, masz rację, dzięki stosowi możesz wyrównać jeden po prawej, a drugi do środka.

Stack(
    children: [
      Align(
        alignment: Alignment.centerRight,
        child: Text("right"),
      ),
      Align(
        alignment: Alignment.center,
        child: Text("center"),
      )
    ],
  )
poonam kalra
źródło