Flutter: Diperluas vs Fleksibel

Saya telah menggunakan keduanya Expandeddan Flexiblewidget dan tampaknya berfungsi sama. Apakah ada perbedaan antara keduanya yang saya lewatkan?

Scaffold(
  appBar: AppBar(),
  body: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          buildExpanded(),
          buildFlexible(),
        ],
      ),
      Row(
        children: <Widget>[
          buildExpanded(),
          buildExpanded(),
        ],
      ),
      Row(
        children: <Widget>[
          buildFlexible(),
          buildFlexible(),
        ],
      ),
    ],
  ),
);

Expanded hanyalah singkatan dari Flexible

Menggunakan diperluas dengan cara ini:

Expanded(
  child: Foo(),
);

setara dengan:

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

Anda mungkin ingin menggunakan Flexibleover Expandedketika Anda menginginkan yang berbeda fit, berguna dalam beberapa tata letak responsif.

Perbedaan antara FlexFit.tightand FlexFit.looseis bahwa longgar akan memungkinkan anaknya memiliki ukuran maksimal sementara ketat memaksa anak tersebut untuk mengisi semua ruang yang tersedia.

Widget di bawah Fleksibel secara default WRAP_CONTENT meskipun Anda dapat mengubahnya menggunakan parameter Fit.

Widget di bawah Expanded adalah MATCH_PARENT Anda dapat mengubahnya menggunakan flex .

Expanded- itu Flexibledengan set fit

class Expanded extends Flexible {
    const Expanded({
        Key key,
        int flex = 1,
        @required Widget child,
    }) : super(
        key: key, 
        flex: flex, 
        fit: FlexFit.tight, 
        child: child
    );
}

Anda dapat menggunakan Fleksibel untuk mengubah ukuran widget dalam baris dan kolom . Ini terutama digunakan untuk menyesuaikan ruang widget anak yang berbeda sekaligus menjaga hubungan dengan widget induknya.

Sementara itu, Perluasan mengubah batasan yang dikirim ke turunan baris dan kolom ; itu membantu untuk mengisi ruang yang tersedia di sana. Oleh karena itu, saat Anda membungkus anak Anda dalam widget yang Diperluas, ruang kosong tersebut akan terisi.

Menyediakan video-video ini dari saluran YouTube Resmi Flutter hanya untuk membantu orang-orang, yang mungkin mencari ini di masa mendatang ...

1. Diperluas:

2. Fleksibel:

Expanded () tidak lebih dari Fleksibel () dengan

Flexible (fit: FlexFit.tight) = Expanded()

namun, penggunaan Fleksibel fit :FlexFit.loosesecara default.

FlexFit.tight = Ingin menyesuaikan diri dengan orang tua yang mengambil ruang sebanyak mungkin.

FlexFit.loose = Ingin menyesuaikan diri dengan orang tua yang mengambil ruang sesedikit mungkin untuk dirinya sendiri.

Satu-satunya perbedaan jika Anda menggunakan, Flexiblebukan Expanded, adalah Flexiblemembiarkan anaknya memiliki lebar yang sama atau lebih kecil dari Flexibleitu sendiri, sementara Expandedmemaksa anaknya memiliki lebar yang sama persis dengan Expanded. Tapi keduanya Expandeddan Flexiblemengabaikan lebar anak-anak mereka saat mengukur diri mereka sendiri.

Row(children:[
  Flexible(
    child: Container(color: Colors.red, child: Text('This is a very long text that won’t fit the line.'))),
  Flexible(
    child: Container(color: Colors.green, child: Text(‘Goodbye!’))),
  ]
)

Catatan : Ini berarti bahwa tidak mungkin untuk membesarkan Rowanak secara proporsional dengan ukurannya. The Row baik menggunakan lebar anak yang tepat, atau mengabaikannya sepenuhnya saat Anda menggunakan Expandedatau Flexible.