Flexible: bu nima, ishlash prinsipi va mobil ishlab chiqishda sozlash

Flexible nima

Flexible — bu bola elementiga Flex-konteynerda moslashuvchan joy beradigan o'rovchi vidjetdir. Flexible, Expanded kabi, bo'sh joyni taqsimlashda ishtirok etadi, lekin asosiy farq bilan: Flexible bolasi ajratilgan joydan kamroq joy egallashi mumkin, agar uning o'z o'lchami mavjud joydan kichik bo'lsa.

Flexible mavjud joyni hisoblash uchun Flutter Flex-algoritmidan foydalanadi. Avval freymvork barcha egiluvchan bo'lmagan bolalarni (Flexible/Expanded bo'lmagan vidjetlarni) so'raydi va ularning intrinsic size sini hisoblaydi. Qolgan joy egiluvchan bolalar o'rtasida ularning flex-faktorlariga mutanosib ravishda taqsimlanadi. Joy ajratilgandan so'ng, Flexible fit ni tekshiradi — agar loose bo'lsa, bola elementiga “ajratilgandan ko'p emas” cheklovi qo'llaniladi va uning kichik qolishiga imkon beradi.

Flexible ning xususiyati: agar bola vidjetning o'z minimal o'lchamlari bo'lsa (masalan, uzun qatorli Text), Flexible so'ralgan joyni ajratadi, majburiy cho'zmaydi. Bu Flexible ni o'lchami konteyner emas, balki tarkib bilan aniqlanishi kerak bo'lgan elementlar uchun ajralmas qiladi.

Xulosa: elementni cho'zishga majburlamasdan joy ajratish kerak bo'lganda Flexible dan foydalaning. Bu moslashuvchan layout taqsimotida tarkibning tabiiy o'lchamlarini saqlaydi.

FlexFit.tight vs FlexFit.loose

FlexFit — ikki qiymatdan iborat sanash: tight va loose. Fit tanloviga bog'liqki, bola vidjet ajratilgan joy o'lchamlariga majburiy cho'ziladimi yoki yo'q.

FlexFit.tight: bola elementi tight constraints oladi — minimal va maksimal o'lchamlar ajratilgan joyga teng. Bola Flex-algoritm ajratgan joyni to'liq egallashi kerak. Agar bola kichik bo'lsa — cho'ziladi. Agar katta bo'lsa — siqiladi. Xatti-harakat Expanded bilan bir xil.

FlexFit.loose: bola elementi loose constraints oladi — minimal o'lcham 0, maksimal ajratilgan joyga teng. Bola 0 dan maximum gacha istalgan o'lchamda bo'lishi mumkin. Agar bola kichik bo'lsa (masalan, qisqa qatorli Text), tabiiy kengligini oladi, qolgan joy bo'sh qoladi.

Xulosa: FlexFit.loose — matn bloklari va tabiiy o'lchamli elementlar uchun tanlov. FlexFit.tight — barcha elementlar bir xil kenglik yoki balandlikda bo'lishi kerak bo'lgan qattiq ustun layoutlari uchun.

Qachon Flexible o'rniga Expanded ishlatish kerak

Flexible va Expanded o'xshash ko'rinadi, lekin turli vazifalarni hal qiladi. Expanded har doim bolani to'liq mavjud joyga cho'zadi. Flexible tarkib o'lchami ajratilgan ulushdan kichik bo'lsa, bola atrofida bo'sh joy qoldirishi mumkin.

Flexible uchun stsenariy: Row ichida ikkita tugma bor. Birinchisi — “Sotib olish” (qisqa matn), ikkinchisi — “Savatga qo'shish” (uzun matn). Expanded bilan ikkala tugma teng kenglikka cho'ziladi va qisqa matn katta bo'sh chekkalarga ega bo'ladi. Flexible bilan har bir tugma o'z matnining kengligini oladi va bo'sh joy ular orasida yoki chekkalarda qoladi.

Expanded uchun stsenariy: Column ichida tarkibdan qat'iy nazar teng balandlikda bo'lishi kerak bo'lgan uchta kartochka bor. Expanded mavjud balandlikni teng taqsimlaydi va har bir kartochka bir xil o'lchamga cho'ziladi. Loose bilan Flexible bu yerda mos kelmaydi — kichik kartochka kichik qoladi, yagona dizaynni buzadi.

Xulosa: tarkib elementning o'lchamini aniqlaganda va uning atrofida bo'sh joy joiz bo'lganda Flexible ni tanlang. Barcha elementlar tarkibdan qat'iy nazar bir xil o'lchamda bo'lishi kerak bo'lganda Expanded ni tanlang.

Flexible bilan kod misollari

Misol 1 Row da FlexFit.loose bilan Flexible ning asosiy ishlatilishini ko'rsatadi.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('qisqa'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('demo uchun uzun matn'),
      ),
    ),
  ],
)

Misolda ikkala Flexible loose fit bilan. Qisqa matnli birinchi konteyner tabiiy kengligini oladi. Uzun matnli ikkinchisi — o'z kengligini. Row har biriga mavjud kenglikning yarmini ajratadi, lekin loose fit konteynerlarning kichikroq bo'lishiga imkon beradi va bo'sh joy ular orasida qoladi.

Misol 2 — Column da Tight va Loose fit bilan Flexible ni taqqoslash.

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — to'liq balandlikka cho'zilgan'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — tabiiy balandlik'),
        ),
      ),
    ),
  ],
)

Column da birinchi Flexible (tight) Card ni mavjud balandlikning yarmiga cho'zadi. Ikkinchi Flexible (loose) — Card tarkibga qarab balandlik oladi, qolgan joy bo'sh qoladi. Vizual ravishda tight maydonni majburiy to'ldirishi, loose esa ixcham o'lchamni saqlashi ko'rinadi.

Xulosa: ishlab chiqarish kodida Flexible loose forma maydonlari, tugmalar va matn bloklari uchun qo'llaniladi. Flexible tight — Expanded ning ekvivalenti, teng taqsimlash uchun ishlatiladi.

Flexible ishlatishdagi tipik xatolar

Xato 1: Flexible ni Flex-konteynerdan tashqarida ishlatish. Expanded kabi, Flexible ham Row, Column yoki Flex ichida bo'lmasa LayoutException tashlaydi. Yechim: har doim vidjetlarning ota-ona zanjirini tekshiring.

Xato 2: Flexible va Expanded ni chalkashtirish. Dasturchilar ko'pincha loose fit bilan Flexible kerak bo'lganda Expanded dan foydalanadilar va aksincha. Natija: Expanded qisqa matnli elementni cho'zadi, katta bo'sh maydonlar yaratadi. Yechim: elementning o'lchami ajratilgan joydan kichikroq bo'lishi mumkin bo'lsa Flexible(fit: FlexFit.loose) dan foydalaning.

Xato 3: nol flex-faktor. Flex=0 bilan Flexible egiluvchan bo'lmagan vidjet kabi harakat qiladi, bu aniq bo'lmasligi mumkin. Dasturchi egiluvchan xatti-harakat kutadi, lekin element minimal o'lchamni oladi. Yechim: faol joy taqsimoti uchun flex ≥1 bo'lishi kerak.

Xato 4: O'lcham cheklovisiz ScrollView ichida Flexible. Agar Flexible SingleChildScrollView ichidagi Column da bo'lsa, scroll-konteyner cheksiz joy beradi va flex-taqsimoti ishlamaydi. Yechim: scroll-konteyner o'lchamini SizedBox yoki ConstrainedBox orqali cheklang.

Xulosa: Flexible ota-ona kontekstiga Expanded kabi e'tibor talab qiladi. Farq faqat fit da — vazifaga qarab ongli ravishda tanlang.