Flexible: mi ez, működési elv és beállítás mobilfejlesztésben

Mi az a Flexible

Flexible — egy burkoló widget, amely rugalmas helyet biztosít a gyermek elemnek egy Flex-konténerben. A Flexible, akárcsak az Expanded, részt vesz a szabad hely elosztásában, de egy kulcsfontosságú különbséggel: a Flexible gyermeke kevesebb helyet foglalhat el, mint amennyit allokáltak neki, ha a saját mérete kisebb a rendelkezésre álló helynél.

A Flexible a Flutter Flex-algoritmusát használja a rendelkezésre álló hely kiszámításához. Először a keretrendszer lekérdezi az összes nem rugalmas gyermeket (Flexible/Expanded nélküli widgeteket) és kiszámítja azok intrinsic size-ját. A fennmaradó helyet a rugalmas gyermekek között osztja fel arányosan a flex-faktoruk alapján. A hely allokálása után a Flexible ellenőrzi a fit-et — ha loose, akkor a gyermek elemre a “ nem több, mint allokált” korlátozás vonatkozik, lehetővé téve, hogy kicsi maradjon.

A Flexible jellemzője: ha a gyermek widgetnek saját minimális méretei vannak (például Text hosszú karakterlánccal), a Flexible allokálja a kért helyet, nem nyújtja ki erőltetetten. Ez teszi a Flexible-t pótolhatatlanná azoknál az elemeknél, amelyek méretét a tartalomnak kell meghatároznia, nem a konténernek.

Következtetés: használja a Flexible-t, amikor helyet kell fenntartani egy elem számára, de nem akarja azt nyújtásra kényszeríteni. Ez megőrzi a tartalom természetes méretét a rugalmas layout elosztás során.

FlexFit.tight vs FlexFit.loose

FlexFit — egy felsorolás két értékkel: tight és loose. A fit kiválasztásától függ, hogy a gyermek widget erőltetetten ki lesz-e nyújtva az allokált hely méretére.

FlexFit.tight: a gyermek elem tight constraints-et kap — a minimális és maximális méret megegyezik az allokált hellyel. A gyermeknek pontosan annyi helyet kell elfoglalnia, amennyit a Flex-algoritmus allokált. Ha a gyermek kisebb — ki lesz nyújtva. Ha nagyobb — össze lesz nyomva. Viselkedése megegyezik az Expanded-del.

FlexFit.loose: a gyermek elem loose constraints-et kap — a minimális méret 0, a maximális megegyezik az allokált hellyel. A gyermek bármekkora lehet 0 és maximum között. Ha a gyermek kicsi (például Text rövid karakterlánccal), felveszi a természetes szélességét, a többi hely pedig üresen marad.

Következtetés: FlexFit.loose — választás szövegblokkokhoz és természetes méretű elemekhez. FlexFit.tight — szigorú oszlopos elrendezésekhez, ahol minden elemnek azonos szélességűnek vagy magasságúnak kell lennie.

Mikor használjuk a Flexible-t az Expanded helyett

Flexible és Expanded hasonlóan néznek ki, de különböző feladatokat oldanak meg. Az Expanded mindig a teljes rendelkezésre álló helyre nyújtja ki a gyermeket. A Flexible üres helyet hagyhat a gyermek körül, ha a tartalom mérete kisebb, mint az allokált rész.

Forgatókönyv a Flexible-hez: egy Row-ban két gomb található. Az első — „Vásárlás” (rövid szöveg), a második — „Kosárba helyezés” (hosszú szöveg). Az Expanded-del mindkét gomb azonos szélességűre nyúlik, és a rövid szövegnek hatalmas margói lesznek. A Flexible-lel minden gomb a saját szövegének szélességét veszi fel, a szabad hely pedig közöttük vagy a széleken marad.

Forgatókönyv az Expanded-hez: egy Column-ban három kártya található, amelyeknek a tartalomtól függetlenül azonos magasságúnak kell lenniük. Az Expanded egyenlően osztja el a rendelkezésre álló magasságot, és minden kártya azonos méretűre nyúlik. A Flexible loose-szal itt nem alkalmas — a kis kártya kicsi marad, megsértve az egységes dizájnt.

Következtetés: válassza a Flexible-t, amikor a tartalom határozza meg az elem méretét, és a körülötte lévő üres hely elfogadható. Válassza az Expanded-et, amikor minden elemnek a tartalomtól függetlenül azonos méretűnek kell lennie.

Kódpéldák Flexible-lel

1. példa bemutatja a Flexible alapvető használatát FlexFit.loose-szal egy Row-ban.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('rövid'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('hosszú szöveg a demóhoz'),
      ),
    ),
  ],
)

A példában mindkét Flexible loose fit-tel. Az első konténer rövid szöveggel felveszi a természetes szélességét. A második hosszú szöveggel — a sajátját. A Row mindegyiknek allokálja a rendelkezésre álló szélesség felét, de a loose fit lehetővé teszi, hogy a konténerek kisebbek legyenek, és a szabad hely üresen marad közöttük.

2. példa — a Flexible összehasonlítása Tight és Loose fit-tel egy Column-ban.

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — teljes magasságra nyújtva'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — természetes magasság'),
        ),
      ),
    ),
  ],
)

A Column-ban az első Flexible (tight) a Card-ot a rendelkezésre álló magasság felére nyújtja. A második Flexible (loose) — a Card a tartalom szerinti magasságot veszi fel, a többi hely pedig üresen marad. Vizuálisan látható, hogy a tight erőltetetten kitölti a területet, míg a loose megtartja a kompakt méretet.

Következtetés: éles kódban a Flexible loose-t űrlapmezőkhöz, gombokhoz és szövegblokkokhoz alkalmazzák. A Flexible tight — az Expanded megfelelője, egyenletes elosztáshoz használják.

Gyakori hibák a Flexible használatakor

1. hiba: a Flexible használata Flex-konténeren kívül. Az Expanded-hez hasonlóan a Flexible is LayoutException-t dob, ha nem Row, Column vagy Flex belsejében van. Megoldás: mindig ellenőrizze a widgetek szülőláncát.

2. hiba: a Flexible és az Expanded összekeverése. A fejlesztők gyakran használják az Expanded-et, amikor Flexible kellene loose fit-tel, és fordítva. Eredmény: az Expanded kinyújtja a rövid szövegű elemet, nagy üres mezőket létrehozva. Megoldás: ha az elem mérete kisebb lehet az allokált helynél — használja a Flexible(fit: FlexFit.loose)-t.

3. hiba: nulla flex-faktor. A flex=0-val rendelkező Flexible nem rugalmas widgetként viselkedik, ami nem nyilvánvaló. A fejlesztő rugalmas viselkedést vár, de az elem a minimális méretet veszi fel. Megoldás: a flex-nek ≥1-nek kell lennie az aktív helyelosztáshoz.

4. hiba: Flexible ScrollView-ban méretkorlátozás nélkül. Ha a Flexible egy SingleChildScrollView-n belüli Column-ban van, a scroll-konténer végtelen helyet ad, és a flex-elosztás nem működik. Megoldás: korlátozza a scroll-konténer méretét SizedBox vagy ConstrainedBox segítségével.

Következtetés: a Flexible ugyanolyan figyelmet igényel a szülői kontextusra, mint az Expanded. A különbség csak a fit-ben van — válassza tudatosan a feladattól függően.