Flexible: ano ito, prinsipyo ng paggana at pagsasaayos sa mobile development

Ano ang Flexible

Flexible — isang wrapper widget na nagbibigay sa child element ng flexible na espasyo sa Flex-container. Ang Flexible, tulad ng Expanded, ay nakikilahok sa distribusyon ng libreng espasyo, ngunit may pangunahing pagkakaiba: ang anak ng Flexible ay maaaring sumakop ng mas kaunting espasyo kaysa sa inilaan, kung ang sarili nitong laki ay mas maliit kaysa sa available na espasyo.

Gumagamit ang Flexible ng Flex-algorithm ng Flutter upang kalkulahin ang available na espasyo. Una, tinatanong ng framework ang lahat ng hindi flexible na bata (mga widget na walang Flexible/Expanded) at kinakalkula ang kanilang intrinsic size. Ang natitirang espasyo ay hinati sa pagitan ng mga flexible na bata ayon sa proporsyon ng kanilang flex-factor. Pagkatapos ng alokasyon ng espasyo, sinusuri ng Flexible ang fit — kung loose, ang paghihigpit na “hindi hihigit sa inilaan” ay inilalapat sa child element, na pinapayagan itong manatiling maliit.

Katangian ng Flexible: kung ang child widget ay may sariling pinakamababang laki (halimbawa, Text na may mahabang string), inilalaan ng Flexible ang hinihiling na espasyo, hindi ito sapilitang iniuunat. Ginagawa nitong hindi mapapalitan ang Flexible para sa mga elemento na ang laki ay dapat matukoy ng nilalaman, hindi ng container.

Konklusyon: gamitin ang Flexible kapag kailangan maglaan ng espasyo para sa isang elemento, ngunit hindi ito pilitin na umunat. Ito ay nagpapanatili ng natural na laki ng nilalaman sa flexible na distribusyon ng layout.

FlexFit.tight vs FlexFit.loose

FlexFit — isang enumeration ng dalawang halaga: tight at loose. Sa pagpili ng fit nakasalalay kung ang child widget ay sapilitang iuunat sa laki ng inilaang espasyo.

FlexFit.tight: ang child element ay tumatanggap ng tight constraints — ang pinakamababa at pinakamataas na laki ay katumbas ng inilaang espasyo. Ang bata ay dapat sumakop ng eksaktong dami ng espasyo na inilaan ng Flex-algorithm. Kung ang bata ay mas maliit — ito ay iniuunat. Kung mas malaki — ito ay pinipiga. Pag-uugali na kapareho ng Expanded.

FlexFit.loose: ang child element ay tumatanggap ng loose constraints — ang pinakamababang laki ay 0, ang pinakamataas ay katumbas ng inilaang espasyo. Ang bata ay maaaring maging anumang laki mula 0 hanggang maximum. Kung ang bata ay maliit (halimbawa, Text na may maikling string), kinukuha nito ang natural na lapad nito, at ang natitirang espasyo ay nananatiling walang laman.

Konklusyon: FlexFit.loose — pagpili para sa mga text block at elemento na may natural na laki. FlexFit.tight — para sa mahigpit na column layout kung saan ang lahat ng elemento ay dapat magkapareho ng lapad o taas.

Kailan gagamitin ang Flexible sa halip na Expanded

Flexible at Expanded ay magkamukha, ngunit nilulutas ang magkaibang mga gawain. Ang Expanded ay laging iniuunat ang bata sa buong available na espasyo. Ang Flexible ay maaaring mag-iwan ng walang laman na espasyo sa paligid ng bata kung ang laki ng nilalaman ay mas maliit kaysa sa inilaang bahagi.

Scenario para sa Flexible: sa loob ng Row ay may dalawang button. Una — “Bumili” (maikling text), pangalawa — “Idagdag sa Cart” (mahabang text). Sa Expanded, ang parehong button ay iuunat sa parehong lapad, at ang maikling text ay magkakaroon ng malalaking margin. Sa Flexible, bawat button ay kukuha ng lapad ng text nito, at ang libreng espasyo ay mananatili sa pagitan nila o sa mga gilid.

Scenario para sa Expanded: sa loob ng Column ay may tatlong card na dapat magkapareho ng taas anuman ang nilalaman. Ang Expanded ay pantay na hinahati ang available na taas at bawat card ay iniuunat sa parehong laki. Ang Flexible na may loose ay hindi angkop dito — ang maliit na card ay mananatiling maliit, na lumalabag sa pare-parehong disenyo.

Konklusyon: piliin ang Flexible kapag ang nilalaman ay tumutukoy sa laki ng elemento at ang walang laman na espasyo sa paligid nito ay katanggap-tanggap. Piliin ang Expanded kapag ang lahat ng elemento ay dapat magkapareho ng laki anuman ang nilalaman.

Mga halimbawa ng code na may Flexible

Halimbawa 1 ay nagpapakita ng pangunahing paggamit ng Flexible na may FlexFit.loose sa Row.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('maikli'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('mahabang text para sa demo'),
      ),
    ),
  ],
)

Sa halimbawa, parehong Flexible na may loose fit. Ang unang container na may maikling text ay kumukuha ng natural na lapad nito. Ang pangalawa na may mahabang text — sa sarili nitong lapad. Ang Row ay naglalaan sa bawat isa ng kalahati ng available na lapad, ngunit ang loose fit ay nagpapahintulot sa mga container na maging mas maliit, at ang libreng espasyo ay nananatiling walang laman sa pagitan nila.

Halimbawa 2 — paghahambing ng Flexible na may Tight at Loose fit sa Column.

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — nakaunat sa buong taas'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — natural na taas'),
        ),
      ),
    ),
  ],
)

Sa Column, ang unang Flexible (tight) ay iniuunat ang Card sa kalahati ng available na taas. Ang pangalawang Flexible (loose) — ang Card ay kumukuha ng taas ayon sa nilalaman, at ang natitirang espasyo ay nananatiling walang laman. Biswal na makikita kung paano pinipilit ng tight na punan ang lugar, habang ang loose ay nagpapanatili ng compact na laki.

Konklusyon: sa production code, ang Flexible na may loose ay inilalapat para sa mga field ng form, button, at text block. Ang Flexible na may tight — katumbas ng Expanded, ginagamit para sa pantay na distribusyon.

Mga karaniwang pagkakamali sa paggamit ng Flexible

Pagkakamali 1: paggamit ng Flexible sa labas ng Flex-container. Tulad ng Expanded, ang Flexible ay nagtatapon ng LayoutException kung wala ito sa loob ng Row, Column o Flex. Solusyon: laging suriin ang parent chain ng mga widget.

Pagkakamali 2: pagkalito sa pagitan ng Flexible at Expanded. Madalas gamitin ng mga developer ang Expanded kapag kailangan ang Flexible na may loose fit, at kabaliktaran. Resulta: iniuunat ng Expanded ang elemento na may maikling text, na lumilikha ng malalaking walang laman na field. Solusyon: kung ang laki ng elemento ay maaaring mas maliit kaysa sa inilaang espasyo — gamitin ang Flexible(fit: FlexFit.loose).

Pagkakamali 3: zero flex-factor. Ang Flexible na may flex=0 ay kumikilos bilang isang hindi flexible na widget, na maaaring hindi halata. Inaasahan ng developer ang flexible na pag-uugali, ngunit ang elemento ay kumukuha ng pinakamababang laki. Solusyon: ang flex ay dapat ≥1 para sa aktibong distribusyon ng espasyo.

Pagkakamali 4: Flexible sa loob ng ScrollView nang walang limitasyon sa laki. Kung ang Flexible ay nasa Column sa loob ng SingleChildScrollView, ang scroll-container ay nagbibigay ng walang katapusang espasyo, at ang flex-distribusyon ay hindi gumagana. Solusyon: limitahan ang laki ng scroll-container sa pamamagitan ng SizedBox o ConstrainedBox.

Konklusyon: ang Flexible ay nangangailangan ng parehong atensyon sa parent context tulad ng Expanded. Ang pagkakaiba ay nasa fit lamang — piliin ito nang may kamalayan depende sa gawain.