Expanded: bu nədir, Flutter-də iş prinsipi

Expanded nədir

Expanded — child qəbul edən və onu Flex konteynerində (Row, Column, Flex) mövcud yeri doldurmaq üçün genişlənməyə məcbur edən sarğıcı vidjetdir. Expanded-in öz vizual təqdimatı yoxdur — o, yalnız uşaq elementə ötürülən constraints-ləri idarə edir.

Expanded-in əsasında Flutter çərçivəsi tərəfindən təmin edilən Flex mexanizmi dayanır. Row və ya Column uşaqlarının ölçülərini hesablayarkən, əvvəlcə elastik olmayan elementlərə (sabit ölçülü adi vidjetlərə) yer ayırır, qalan yeri isə Expanded və Flexible uşaqlar arasında onların flex-faktorlarına proporsional olaraq bölüşdürür.

Expanded Flexible.fit = FlexFit.tight istifadə edir. Bu o deməkdir ki, Expanded-in uşağı öz ölçüsü kiçik olsa belə, ona ayrılan bütün yeri tutmalıdır. Uşağın ayrılan sahədən kiçik ola bildiyi Fit.loose ilə Flexible-dən fərqli olaraq, Expanded məzmunu məcburi şəkildə uzadır.

Nəticə: Expanded Flutter-də proporsional maketlər yaratmaq üçün əsas vasitədir. Elementin bütün mövcud eni və ya hündürlüyü tutmasını təmin etmək istədikdə istifadə edin.

Expanded vs Flexible: əsas fərqlər

Expanded və Flexible — hər ikisi Flex konteynerlərində yeri bölüşdürür, lakin prinsipial olaraq fərqli davranırlar. Fərq ondadır ki, fit xassəsi uşağın mövcud yerdən kiçik ola biləcəyini müəyyən edir.

Expanded sərt davranış modelinə malikdir: onun fit-i FlexFit.tight-ə bərabərdir. Bu o deməkdir ki, uşaq vidjet mövcud yerə bərabər constraints alır — nə çox, nə də az. Uşaq kiçikdirsə, uzadılır. Böyükdürsə, sıxılır. Flexible FlexFit.loose istifadə edir, uşaq elementə ayrılan sahə daxilində istənilən ölçüdə olmağa imkan verir.

Praktikada: Row daxilində flex=1 olan iki Expanded varsa, hər biri enin tam yarısını tutacaq. Onları fit.loose ilə Flexible ilə əvəz etsəniz, hər uşaq öz ölçüsü kiçikdirsə, yarısından kiçik ola bilər — qalan yer boş qalacaq.

Nəticə: sərt proporsional maketlər üçün Expanded, uşağın mövcud yerdən kiçik ola bildiyi hallar üçün Flexible istifadə edin. Əmin deyilsinizsə, Expanded-dən başlayın — daha proqnozlaşdırıla bilən davranış verir.

Flex-faktor: yerin bölüşdürülməsi

Flex-faktor (flex parametri) — Expanded-in alacağı mövcud yerin payını təyin edən ədədi dəyərdir. Varsayılan olaraq flex=1, yəni bütün Expanded uşaqlar arasında bərabər bölgü deməkdir.

Bölgü alqoritmi üç addımda işləyir. Birinci: Flutter bütün elastik olmayan uşaqların intrinsic size-ni hesablayır. İkinci: qalan yer bütün flex-faktorlarının cəminə bölünür. Üçüncü: hər Expanded öz flex-faktorunun bir flex vahidinin ölçüsünə vurulmasına bərabər pay alır.

Məsələn, eni 300px olan Row iki Expanded ehtiva edir: birinci flex=2, ikinci flex=1. Boş yer (300px minus elastik olmayan uşaqlar) 3 hissəyə bölünür. Birinci 2/3, ikinci — 1/3 alır. Elastik olmayan uşaqlar yoxdursa, birinci 200px, ikinci — 100px alacaq.

Flex-faktor istənilən müsbət tam ədəd ola bilər. 0 dəyəri xüsusi haldır: flex=0 olan Expanded uşağın ölçüsünə görə minimal yeri tutan adi elastik olmayan vidjet kimi davranır. Bu davranış Expanded-in olmamasına bərabərdir.

Nəticə: flex-faktor çevik maketlər qurmağın açarıdır. Bərabər sütunlar üçün 1:1, əsas və yan sahəsi olan panellər üçün 2:1, dar naviqasiyalı interfeyslər üçün 3:1 nisbətlərindən istifadə edin.

Expanded ilə kod nümunələri

Nümunə 1 üç bərabər sütun yaratmaq üçün Row-da Expanded-in əsas istifadəsini nümayiş etdirir.

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

Bu nümunədə flex=1 (varsayılan) olan üç Expanded Row-un enini bərabər bölür. Konteynerlər Row tərəfindən təyin olunmuş bütün hündürlüyə qədər uzanır və bərabər paylar tutur. Bu yanaşma proporsional bölgü ilə sütun maketləri yaratmaq üçün əlverişlidir.

Nümunə 2 yan panel və əsas məzmunu olan maket yaratmaq üçün müxtəlif flex-faktorlarının istifadəsini göstərir.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Yan panel'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Məzmun sahəsi'),
        ),
      ),
    ),
  ],
)

İkinci nümunə yan panel (25%) və əsas sahə (75%) ilə tipik layout yaradır. flex=1 və flex=3 1:3 nisbətini verir. Ekran eni dəyişdikdə nisbətlər avtomatik qorunur — bu adaptiv interfeyslərin əsasıdır.

Nəticə: müxtəlif flex-faktorları ilə Expanded adaptiv maketlər qurmaq üçün standart vasitədir. Expanded-in Column-da birləşməsi həm üfüqi, həm də şaquli proporsional yerləşdirmələr yaratmağa imkan verir.

Expanded istifadəsində tipik səhvlər

Səhv 1: Expanded-i Row, Column və ya Flex-dən kənarda istifadə etmək. Expanded-i birbaşa Stack, ListView və ya Flex olmayan digər konteynerə yerləşdirsəniz, Flutter “Expanded widgets must be placed inside Flex widgets” mesajı ilə LayoutException atır. Həll: valideyn vidjeti yoxlayın — yalnız Row, Column və ya Flex.

Səhv 2: Expanded-i shrinkWrap göstərmədən ListView daxilində yerləşdirmək. ListView varsayılan olaraq sürüşdürmə istiqamətində sonsuz hündürlüyə malikdir və Expanded öz payını hesablaya bilmir. Həll: shrinkWrap: true istifadə edin və ya ListView-i sabit hündürlüklü SizedBox ilə sarın.

Səhv 3: cəmi flex-i mövcud yeri aşan çoxsaylı Expanded. Məhdud enli Row daxilində Expanded və böyük intrinsic size-li vidjetlər varsa, overflow yarana bilər. Həll: elastik olmayan uşaqların minimal ölçülərini yoxlayın və lazım olduqda FittedBox və ya Flex fit istifadə edin.

Səhv 4: Row daxilində Column-da iç-içə Expanded. Column daxilində Expanded Row daxilində başqa Expanded ehtiva edərsə, constraints münaqişəsi yarana bilər. Həll: iç-içəlik dərinliyini məhdudlaşdırın və ya aralıq səviyyələrdə ölçüləri açıq şəkildə təyin etmək üçün ConstrainedBox istifadə edin.

Nəticə: Expanded düzgün valideyn konteksti tələb edir. Həmişə Expanded-in birbaşa Row, Column və ya Flex-də olduğunu yoxlayın və açıq ölçülər olmadan iç-içəlikdən qaçının.