Expanded: bu nima, Flutter'da ishlash prinsipi

Expanded nima

Expanded — child qabul qiluvchi va uni Flex konteynerida (Row, Column, Flex) mavjud joyni to‘ldirish uchun kengayishga majbur qiluvchi o‘rovchi vidjet. Expanded ning o‘z vizual ko‘rinishi yo‘q — u faqat bola elementga uzatiladigan constraints'larni boshqaradi.

Expanded asosida Flutter freymvorki tomonidan taqdim etilgan Flex mexanizmi yotadi. Row yoki Column bolalarining o‘lchamlarini hisoblaganda, avval egiluvchan bo‘lmagan elementlarga (qat’iy o‘lchamli oddiy vidjetlarga) joy ajratadi, qolgan joyni esa Expanded va Flexible bolalar o‘rtasida ularning flex-faktorlariga mutanosib ravishda taqsimlaydi.

Expanded Flexible.fit = FlexFit.tight dan foydalanadi. Bu Expanded bolasi o‘zining o‘lchami kichikroq bo‘lsa ham, ajratilgan barcha joyni egallashi kerak degan ma’noni anglatadi. Bola ajratilgan sohadan kichikroq bo‘lishi mumkin bo‘lgan Fit.loose bilan Flexible'dan farqli o‘laroq, Expanded tarkibni majburiy cho‘zadi.

Xulosa: Expanded Flutter'da proporsional maketlar yaratish uchun asosiy vositadir. Element barcha mavjud kenglik yoki balandlikni kafolatli egallashi kerak bo‘lganda foydalaning.

Expanded vs Flexible: asosiy farqlar

Expanded va Flexible — ikkalasi ham Flex konteynerlarida joyni taqsimlaydi, lekin tubdan farqli harakat qiladi. Farq fit xususiyatida bo‘lib, u bolaning mavjud joydan kichikroq bo‘lishi mumkinligini aniqlaydi.

Expanded qattiq xatti-harakat modeliga ega: uning fit FlexFit.tight ga teng. Bu shuni anglatadiki, bola vidjet mavjud joyga teng constraints oladi — na ko‘p, na kam. Bola kichikroq bo‘lsa, cho‘ziladi. Kattaroq bo‘lsa, siqiladi. Flexible FlexFit.loose dan foydalanadi, bola elementga ajratilgan joy doirasida istalgan o‘lchamda bo‘lishga imkon beradi.

Amalda: Row ichida flex=1 bo‘lgan ikkita Expanded bo‘lsa, har biri kenglikning to‘liq yarmini egallaydi. Ularni fit.loose bilan Flexible bilan almashtirsangiz, har bir bola o‘z o‘lchami kichikroq bo‘lsa, yarmidan kichikroq bo‘lishi mumkin — qolgan joy bo‘sh qoladi.

Xulosa: qat’iy proporsional maketlar uchun Expanded, bola mavjud joydan kichikroq bo‘lishi mumkin bo‘lgan hollarda Flexible dan foydalaning. Ishonchingiz komil bo‘lmasa, Expanded dan boshlang — u oldindan bashorat qilish mumkin bo‘lgan xatti-harakatni beradi.

Flex-faktor: joy taqsimlanishi

Flex-faktor (flex parametri) — Expanded oladigan mavjud joy ulushini belgilaydigan raqamli qiymat. Odatiy bo‘lib flex=1, ya’ni barcha Expanded bolalar o‘rtasida teng taqsimlash.

Taqsimlash algoritmi uch bosqichda ishlaydi. Birinchi: Flutter barcha egiluvchan bo‘lmagan bolalarning intrinsic size sini hisoblaydi. Ikkinchi: qolgan joy barcha flex-faktorlar yig‘indisiga bo‘linadi. Uchinchi: har bir Expanded o‘z flex-faktorining bir flex birligi o‘lchamiga ko‘paytmasiga teng ulush oladi.

Masalan, kengligi 300px bo‘lgan Row ikkita Expanded ni o‘z ichiga oladi: birinchisi flex=2, ikkinchisi flex=1. Bo‘sh joy (300px minus egiluvchan bo‘lmagan bolalar) 3 qismga bo‘linadi. Birinchisi 2/3, ikkinchisi — 1/3 oladi. Egiluvchan bo‘lmagan bolalar bo‘lmasa, birinchisi 200px, ikkinchisi — 100px oladi.

Flex-faktor har qanday musbat butun son bo‘lishi mumkin. 0 qiymati alohida holat: flex=0 bo‘lgan Expanded bolaning o‘lchamiga ko‘ra minimal joyni egallagan oddiy egiluvchan bo‘lmagan vidjet kabi harakat qiladi. Bu xatti-harakat Expanded ning yo‘qligiga teng.

Xulosa: flex-faktor egiluvchan maketlar qurishning kalitidir. Teng ustunlar uchun 1:1, asosiy va yon sohali panellar uchun 2:1, tor navigatsiyali interfeyslar uchun 3:1 nisbatlaridan foydalaning.

Expanded bilan kod misollari

Misol 1 uchta teng ustun yaratish uchun Row'da Expanded dan asosiy foydalanishni namoyish etadi.

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

Ushbu misolda flex=1 (odatiy) bo‘lgan uchta Expanded Row kengligini teng taqsimlaydi. Konteynerlar Row tomonidan belgilangan barcha balandlikkacha cho‘ziladi va teng ulushlarni egallaydi. Bu yondashuv proporsional taqsimot bilan ustun maketlarini yaratish uchun qulay.

Misol 2 yon panel va asosiy tarkibli maket yaratish uchun turli flex-faktorlardan foydalanishni ko‘rsatadi.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Yon panel'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Kontent sohasi'),
        ),
      ),
    ),
  ],
)

Ikkinchi misol yon panel (25%) va asosiy soha (75%) bilan tipik layout yaratadi. flex=1 va flex=3 1:3 nisbatini beradi. Ekran kengligi o‘zgarganda nisbatlar avtomatik saqlanadi — bu adaptiv interfeyslarning asosidir.

Xulosa: turli flex-faktorlar bilan Expanded adaptiv maketlar qurish uchun standart vositadir. Expanded ni Column da birlashtirish ham gorizontal, ham vertikal proporsional joylashuvlarni yaratishga imkon beradi.

Expanded ishlatishda tipik xatolar

Xato 1: Expanded ni Row, Column yoki Flex dan tashqarida ishlatish. Expanded ni to‘g‘ridan-to‘g‘ri Stack, ListView yoki Flex bo‘lmagan boshqa konteynerga joylashtirsangiz, Flutter “Expanded widgets must be placed inside Flex widgets” xabari bilan LayoutException chiqaradi. Yechim: ota-vidjetni tekshiring — faqat Row, Column yoki Flex.

Xato 2: Expanded ni shrinkWrap ko‘rsatmasdan ListView ichida joylashtirish. ListView odatiy bo‘lib aylantirish yo‘nalishida cheksiz balandlikka ega va Expanded o‘z ulushini hisoblay olmaydi. Yechim: shrinkWrap: true dan foydalaning yoki ListView ni qat’iy balandlikdagi SizedBox bilan o‘rang.

Xato 3: umumiy flex i mavjud joydan oshib ketadigan bir nechta Expanded. Cheklangan kenglikdagi Row ichida Expanded va katta intrinsic size li vidjetlar bo‘lsa, overflow yuz berishi mumkin. Yechim: egiluvchan bo‘lmagan bolalarning minimal o‘lchamlarini tekshiring va kerak bo‘lganda FittedBox yoki Flex fit dan foydalaning.

Xato 4: Row ichidagi Column da ichma-ich Expanded. Column ichidagi Expanded Row ichidagi boshqa Expanded ni o‘z ichiga olsa, constraints ziddiyati yuz berishi mumkin. Yechim: ichma-ichlik chuqurligini cheklang yoki oraliq darajalarda o‘lchamlarni aniq belgilash uchun ConstrainedBox dan foydalaning.

Xulosa: Expanded to‘g‘ri ota-kontekstni talab qiladi. Har doim Expanded ning to‘g‘ridan-to‘g‘ri Row, Column yoki Flex da joylashganligini tekshiring va aniq o‘lchamlarsiz ichma-ichlikdan qoching.