Expanded: mi ez, működési elve a Flutterben

Mi az Expanded

Expanded egy burkoló widget, amely elfogad egy child-ot, és arra kényszeríti, hogy táguljon ki a rendelkezésre álló hely kitöltéséhez egy Flex tárolóban (Row, Column, Flex). Az Expanded-nek nincs saját vizuális megjelenítése — csak a gyermek elemnek továbbított korlátozásokat kezeli.

Az Expanded alapjául a Flutter keretrendszer által biztosított Flex mechanizmus szolgál. Amikor a Row vagy Column kiszámítja a gyermekek méreteit, először helyet allokál a rugalmatlan elemeknek (rögzített méretű szokásos widgetek), a fennmaradó helyet pedig az Expanded és Flexible gyermekek között osztja el arányosan a flex faktoraik alapján.

Az Expanded Flexible.fit = FlexFit.tight értéket használ. Ez azt jelenti, hogy az Expanded gyermekének el kell foglalnia az összes allokált helyet, még akkor is, ha a saját mérete kisebb. Ellentétben a Fit.loose értékkel rendelkező Flexible-lel, ahol a gyermek kisebb lehet az allokált területnél, az Expanded kényszerítően kinyújtja a tartalmat.

Következtetés: az Expanded a fő eszköz arányos elrendezések létrehozásához a Flutterben. Akkor használja, ha azt szeretné, hogy egy elem garantáltan elfoglalja az összes rendelkezésre álló szélességet vagy magasságot.

Expanded vs Flexible: fő különbségek

Expanded és Flexible — mindkettő helyet oszt el Flex tárolókban, de alapvetően eltérően viselkednek. A különbség a fit tulajdonságban van, amely meghatározza, hogy a gyermek lehet-e kisebb a rendelkezésre álló helynél.

Az Expanded merev viselkedési modellel rendelkezik: a fit értéke FlexFit.tight. Ez azt jelenti, hogy a gyermek widget a rendelkezésre álló hellyel egyenlő korlátozásokat kap — se többet, se kevesebbet. Ha a gyermek kisebb, kinyújtásra kerül. Ha nagyobb — összenyomásra kerül. A Flexible FlexFit.loose értéket használ, lehetővé téve a gyermek elem számára, hogy bármilyen méretű legyen az allokált hely határain belül.

A gyakorlatban: ha egy Row-ban két Expanded van flex=1 értékkel, mindegyik pontosan a szélesség felét foglalja el. Ha kicseréli őket Flexible-re fit.loose értékkel, minden gyermek lehet kisebb a felénél, ha a saját mérete kisebb — a fennmaradó hely üresen marad.

Következtetés: használja az Expanded-et szigorú arányos elrendezésekhez, a Flexible-t — amikor a gyermek lehet kisebb a rendelkezésre álló helynél. Ha nem biztos — kezdje az Expanded-del, kiszámíthatóbb viselkedést nyújt.

Flex faktor: hogyan oszlik el a hely

Flex faktor (flex paraméter) — egy numerikus érték, amely meghatározza a rendelkezésre álló hely azon részét, amelyet az Expanded kap. Alapértelmezés szerint flex=1, ami egyenlő elosztást jelent az összes Expanded gyermek között.

Az elosztási algoritmus három lépésben működik. Első: a Flutter kiszámítja az összes rugalmatlan gyermek intrinsic size értékét. Második: a fennmaradó hely elosztásra kerül az összes flex faktor összegével. Harmadik: minden Expanded a flex faktorának és egy flex egység méretének szorzatával egyenlő részt kap.

Például egy 300px széles Row két Expanded-et tartalmaz: az első flex=2, a második flex=1 értékkel. A szabad hely (300px mínusz a rugalmatlan gyermekek) 3 részre oszlik. Az első 2/3-ot kap, a második — 1/3-ot. Ha nincsenek rugalmatlan gyermekek, az első 200px-t, a második — 100px-t kap.

A flex faktor bármilyen pozitív egész szám lehet. A 0 érték egy speciális eset: a flex=0 értékű Expanded úgy viselkedik, mint egy szokásos rugalmatlan widget, minimális helyet foglalva el a gyermek mérete szerint. Ez a viselkedés egyenértékű az Expanded hiányával.

Következtetés: a flex faktor a kulcs a rugalmas elrendezések építéséhez. Használjon 1:1 arányt egyenlő oszlopokhoz, 2:1 arányt fő- és oldalterülettel rendelkező panelekhez, 3:1 arányt keskeny navigációjú interfészekhez.

Kódpéldák Expanded-del

1. példa bemutatja az Expanded alapvető használatát Row-ban három egyenlő oszlop létrehozásához.

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

Ebben a példában három Expanded flex=1 értékkel (alapértelmezett) egyenlően osztja fel a Row szélességét. A tárolók a Row által beállított teljes magasságra nyúlnak és egyenlő részeket foglalnak el. Ez a megközelítés kényelmes oszlopos elrendezések létrehozásához arányos elosztással.

2. példa megmutatja a különböző flex faktorok használatát egy oldalsó panellel és fő tartalommal rendelkező elrendezés létrehozásához.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Oldalsó panel'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Tartalmi terület'),
        ),
      ),
    ),
  ],
)

A második példa egy tipikus layout-ot hoz létre oldalsó panellel (25%) és fő területtel (75%). A flex=1 és flex=3 1:3 arányt ad. A képernyő szélességének változásakor az arányok automatikusan megmaradnak — ez az adaptív interfészek alapja.

Következtetés: az Expanded különböző flex faktorokkal a szabványos eszköz adaptív elrendezések építéséhez. Az Expanded Column-ban történő kombinálása lehetővé teszi mind vízszintes, mind függőleges arányos elrendezések létrehozását.

Tipikus hibák az Expanded használatakor

1. hiba: az Expanded használata Row, Column vagy Flexen kívül. Ha az Expanded-et közvetlenül Stack-be, ListView-ba vagy más olyan tárolóba helyezi, amely nem Flex, a Flutter LayoutException kivételt dob az „Expanded widgets must be placed inside Flex widgets” üzenettel. Megoldás: ellenőrizze a szülő widgetet — csak Row, Column vagy Flex.

2. hiba: az Expanded elhelyezése ListView-ben a shrinkWrap megadása nélkül. A ListView alapértelmezés szerint végtelen magassággal rendelkezik a görgetés irányában, és az Expanded nem tudja kiszámítani a részét. Megoldás: használjon shrinkWrap: true értéket, vagy csomagolja a ListView-t egy rögzített magasságú SizedBox-ba.

3. hiba: több Expanded, amelyek összesített flex-je meghaladja a rendelkezésre álló helyet. Ha egy korlátozott szélességű Row-ban Expanded-ek, valamint nagy intrinsic size-tel rendelkező widgetek találhatók, overflow léphet fel. Megoldás: ellenőrizze a rugalmatlan gyermekek minimális méreteit, és szükség esetén használjon FittedBox-ot vagy Flex fit-et.

4. hiba: beágyazott Expanded Column-ban Row-on belül. Ha az Expanded a Column-ban egy másik Expanded-et tartalmaz a Row-ban, korlátozási konfliktus léphet fel. Megoldás: korlátozza a beágyazás mélységét, vagy használjon ConstrainedBox-ot a méretek explicit megadásához a közbenső szinteken.

Következtetés: az Expanded megfelelő szülő kontextust igényel. Mindig ellenőrizze, hogy az Expanded közvetlenül Row-ban, Column-ban vagy Flex-ben van-e, és kerülje a beágyazást explicit méretek nélkül.