Flexible: bu nədir, işləmə prinsipi və mobil inkişafda qurulması

Flexible nədir

Flexible — uşaq elementinə Flex-konteynerdə çevik yer təmin edən qapaq vidjetidir. Flexible, Expanded kimi, boş yerin bölüşdürülməsində iştirak edir, lakin əsas fərqlə: Flexible uşağı ayrılmış yerdən daha az yer tuta bilər, əgər onun öz ölçüsü mövcud yerdən kiçikdirsə.

Flexible mövcud yeri hesablamaq üçün Flutter Flex-alqoritmini istifadə edir. Əvvəlcə framework bütün çevik olmayan uşaqları (Flexible/Expanded olmayan vidjetləri) sorğulayır və onların intrinsic size-ni hesablayır. Qalan yer çevik uşaqlar arasında onların flex-faktorlarına mütənasib olaraq bölünür. Yer ayrıldıqdan sonra Flexible fit-i yoxlayır — əgər loose-dirsə, uşaq elementinə "ayrılmışdan çox deyil" məhdudiyyəti tətbiq edilir, onun kiçik qalmasına icazə verir.

Flexible-in xüsusiyyəti: əgər uşaq vidjetin öz minimum ölçüləri varsa (məsələn, uzun sətirli Text), Flexible istənilən yeri ayırır, məcburi uzatmır. Bu, Flexible-i ölçüsü konteyner deyil, məzmunla müəyyən edilməli olan elementlər üçün əvəzolunmaz edir.

Nəticə: elementi uzatmağa məcbur etmədən yer ayırmaq lazım olduqda Flexible-dən istifadə edin. Bu, çevik layout bölgüsündə məzmunun təbii ölçülərini qoruyur.

FlexFit.tight vs FlexFit.loose

FlexFit — iki dəyərdən ibarət sadalama: tight və loose. Fit seçimindən asılıdır ki, uşaq vidjet ayrılmış yerin ölçülərinə qədər məcburi uzadılacaq.

FlexFit.tight: uşaq elementi tight constraints alır — minimum və maksimum ölçülər ayrılmış yerə bərabərdir. Uşaq Flex-alqoritmin ayırdığı qədər yer tutmalıdır. Uşaq kiçikdirsə — uzadılır. Böyükdürsə — sıxılır. Davranış Expanded ilə eynidir.

FlexFit.loose: uşaq elementi loose constraints alır — minimum ölçü 0-dır, maksimum ayrılmış yerə bərabərdir. Uşaq 0-dan maximum-a qədər istənilən ölçüdə ola bilər. Uşaq kiçikdirsə (məsələn, qısa sətirli Text), təbii enini tutur, qalan yer boş qalır.

Nəticə: FlexFit.loose — mətn blokları və təbii ölçülü elementlər üçün seçim. FlexFit.tight — bütün elementlərin eyni en və ya hündürlükdə olması tələb olunan sərt sütun layoutları üçün.

Nə vaxt Flexible əvəzinə Expanded istifadə etməli

Flexible və Expanded oxşar görünür, lakin fərqli vəzifələri həll edir. Expanded həmişə uşağı tam mövcud yerə uzadır. Flexible məzmun ölçüsü ayrılmış paydan kiçikdirsə, uşağın ətrafında boş yer buraxa bilər.

Flexible üçün ssenari: Row daxilində iki düymə var. Birinci — "Al" (qısa mətn), ikinci — "Səbətə əlavə et" (uzun mətn). Expanded ilə hər iki düymə bərabər enə uzadılacaq və qısa mətndə böyük boşluqlar olacaq. Flexible ilə hər düymə öz mətninin enini tutacaq, boş yer isə aralarında və ya kənarlarda qalacaq.

Expanded üçün ssenari: Column daxilində məzmundan asılı olmayaraq bərabər hündürlükdə olmalı üç kart var. Expanded mövcud hündürlüyü bərabər bölür və hər kart eyni ölçüyə uzadılır. Loose ilə Flexible burada uyğun deyil — kiçik kart kiçik qalacaq, vahid dizaynı pozacaq.

Nəticə: məzmun elementin ölçüsünü təyin edəndə və ətrafında boş yer icazə veriləndə Flexible seçin. Bütün elementlər məzmundan asılı olmayaraq eyni ölçüdə olmalıdırsa Expanded seçin.

Flexible ilə kod nümunələri

Nümunə 1 Row-da FlexFit.loose ilə Flexible-in əsas istifadəsini göstərir.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('qısa'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('demo üçün uzun mətn'),
      ),
    ),
  ],
)

Nümunədə hər iki Flexible loose fit ilə. Qısa mətnli birinci konteyner təbii enini tutur. Uzun mətnli ikinci — öz enini. Row hər birinə mövcud enin yarısını ayırır, lakin loose fit konteynerlərin kiçik olmasına icazə verir və boş yer aralarında qalır.

Nümunə 2 — Column-da Tight və Loose fit ilə Flexible müqayisəsi.

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — tam hündürlüyə uzadılmış'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — təbii hündürlük'),
        ),
      ),
    ),
  ],
)

Column-da birinci Flexible (tight) Card-ı mövcud hündürlüyün yarısına uzadır. İkinci Flexible (loose) — Card məzmuna görə hündürlük tutur, qalan yer boş qalır. Vizual olaraq tight-in sahəni məcburi doldurduğu, loose-un isə kompakt ölçü saxladığı görünür.

Nəticə: istehsal kodunda Flexible loose forma sahələri, düymələr və mətn blokları üçün tətbiq olunur. Flexible tight — Expanded-in ekvivalenti, bərabər bölgü üçün istifadə olunur.

Flexible istifadəsində tipik səhvlər

Səhv 1: Flexible-in Flex-konteynerdən kənarda istifadəsi. Expanded kimi, Flexible də Row, Column və ya Flex daxilində deyilsə, LayoutException atır. Həll: həmişə vidjetlərin valideyn zəncirini yoxlayın.

Səhv 2: Flexible və Expanded arasında qarışıqlıq. Tərtibatçılar tez-tez loose fit ilə Flexible lazım olanda Expanded, əksinə isə istifadə edirlər. Nəticə: Expanded qısa mətnli elementi uzadır, böyük boş sahələr yaradır. Həll: elementin ölçüsü ayrılmış yerdən kiçik ola bilərsə Flexible(fit: FlexFit.loose) istifadə edin.

Səhv 3: sıfır flex-faktor. Flex=0 olan Flexible çevik olmayan vidjet kimi davranır, bu aşkar olmaya bilər. Tərtibatçı çevik davranış gözləyir, lakin element minimum ölçü tutur. Həll: aktiv yer bölgüsü üçün flex ≥1 olmalıdır.

Səhv 4: Ölçü məhdudiyyəti olmadan ScrollView daxilində Flexible. Flexible SingleChildScrollView daxilində Column-dadırsa, scroll-konteyner sonsuz yer verir və flex-bölgüsü işləmir. Həll: scroll-konteynerin ölçüsünü SizedBox və ya ConstrainedBox ilə məhdudlaşdırın.

Nəticə: Flexible valideyn kontekstinə Expanded qədər diqqət tələb edir. Fərq yalnız fit-dədir — vəzifədən asılı olaraq şüurlu seçin.