Flutter meratakan dua item secara ekstrem - satu di kiri dan satu di kanan

95

Saya mencoba menyelaraskan dua item pada posisi ekstrem, satu di kiri dan satu lagi di kanan. Saya memiliki satu baris yang sejajar ke kiri dan kemudian anak dari baris itu diratakan ke kanan. Namun tampaknya baris anak mengambil properti alignment dari induknya. Ini kode saya

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

alhasil saya mendapatkan sesuatu seperti ini

Left Right

Yang saya inginkan adalah

Left      Right

Juga ada cukup ruang di Row. Pertanyaan saya adalah mengapa Rowan tidak memamerkan MainAxisAlignment.endpropertinya?

flutter flutter-layout

— MistyD
sumber

196

Gunakan satu Rowsaja, dengan mainAxisAlignment: MainAxisAlignment.spaceBetween.

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

Atau Anda bisa menggunakan Expanded

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

— Rémi Rousselet
sumber

2

Pada contoh ke-2 saya menggunakan miliknya settingsRow, yang berisiText("right")

— Rémi Rousselet

Saya melihat. Melewatkan bagian itu

— Günter Zöchbauer

Terima kasih. Tetapi karena penasaran mengapa kode saya tidak berfungsi? The mainAxisAlignmentanak tidak terjadi. Apakah properti orang tua melebihi properti anak-anak?

— MistyD

1

Yang kedua jauh lebih baik.

— Raghu Mudem

1

@KPradeepKumarReddy Jika Anda tidak takut kedua widget ini dapat saling tumpang tindih jika ukurannya terlalu besar, saya sarankan untuk menggunakan Stack dan kemudian dua anak dibungkus dengan widget Align (satu dengan Alignment.center, satu lagi dengan Alignment.centerRight). Atau, buat tiga widget yang Diperluas di baris Anda dengan flex: 1. Pertama akan berisi kosong (SizedBox), kedua - widget tengah Anda (dibungkus di Tengah) dan ketiga berisi widget rata kanan Anda.

— Alex Semeniuk

71

Solusi sederhana adalah menggunakan di Spacer()antara kedua widget

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

— Pritish
sumber

Apa yang dilakukan Spacer ()? Secara berurutan, saya ingin menyimpan satu widget di tengah dan satu lagi di paling kanan. Apakah ini mungkin menggunakan spacer ()?

— K Pradeep Kumar Reddy

51

Anda bisa melakukannya dengan banyak cara.

Menggunakan mainAxisAlignment: MainAxisAlignment.spaceBetween

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

Menggunakan Spacer

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

Menggunakan Expanded

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

Menggunakan Flexible

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

Keluaran :

— CopsOnRoad
sumber

Saya ingin satu widget di tengah dan lainnya di paling kanan. Bagaimana kita bisa mencapai itu?

— K Pradeep Kumar Reddy

@KPradeKumarReddy Pendekatan yang baik digunakan Stackdalam kasus itu.

— CopsOnRoad

@KPradeepKumarReddy Saya yakin pasti sudah ada pertanyaan seperti ini di SO, yang perlu Anda lakukan hanyalah mencari dengan kata kunci yang tepat. Saya tidak dapat benar-benar menunjukkan kode di sini dalam komentar, tetapi idenya adalah untuk menggunakan Stack, dengan anak pertama Align(kanan) dan anak kedua bisa a Centeratau sederhana Align.

— CopsOnRoad

1

Ya CopsOnRoadbenar, melalui tumpukan Anda dapat menyelaraskan satu di kanan dan lainnya di tengah.

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

— poonam kalra
sumber