Flutter uchun Yangi boshlanuvchilar

LayoutBuilder

The LayoutBuilder vidjet beradi a quruvchi mulk ning the LayoutWidgetBuilder turi. Garchi u Quruvchiga o'xshash bo'lsa ham vidjet, LayoutWidgetBuilder BoxConstraints ichidagi ota-ona vidjet o'lchami haqida qo'shimcha ma'lumot bilan birga keladi qiymat.
Ushbu ma'lumotlar bilan qurilish usul mavjud bo'sh joyga qarab o'zgartirilishi mumkin. Shunday qilib, ichida boshqacha qurilmalar U yerda bo'ladi bo'l a boshqacha miqdori ning bo'sh joy mavjud ichida the ildiz daraxtning vidjeti, bu uning bolalar o'lchamlarini ham cheklashi mumkin. Ushbu vidjetdan foydalanib, biz tartibning ba'zi qismlarini ko'rsatish yoki ko'rsatmaslikni tanlashimiz mumkin.
Bu vidjet ota-ona vidjetining oʻlchamiga bogʻliq, shuning uchun u har safar oʻlcham oʻzgarganda qayta tiklanadi. Bu mumkin yuzaga keladi ichida boshqacha yo'llari yoqilgan mobil qurilmalar. The eng oddiy misol hisoblanadi ilova yo'nalishi o'zgarganda, ya'ni foydalanuvchi telefonni aylantirganda.

Keling, ekrandagi o'lchamdagi o'zgarishlarga qanday javob berishni ko'rib chiqaylik. Ushbu misolda biz o'zgaramiz the yo'l ikki vidjetlar bor ko'rsatilgan asoslangan yoqilgan the mavjud bo'sh joy. Shunday qilib, the vidjetlar Agar ular uchun etarli joy bo'lmasa, ular bir-birining ustiga ko'rsatiladi (biz buni BoxContraints yordamida baholaymiz LayoutBuilder tomonidan berilgan misol vidjet) yoki ko'proq joy mavjud bo'lganda (masalan, landshaft holatida) yonma-yon:

sinf Mening ilovam uzaytiradi Davlatsiz vidjet { @override

Vidjet qurish (BuildContext kontekst) { qaytish MaterialApp(
uy: LayoutBuilder(
quruvchi: (BuildContext kontekst, Box cheklovlari cheklovlar) {
// qurmoq the tartib asoslangan yoqilgan cheklovlar qiymatlar
}
)
)
}
}

Sifatida siz mumkin qarang, biz bor qo'shildi a LayoutBuilder vidjet, va biz mumkin qurmoq the berilgan cheklovlarga asoslangan tartib:

agar (cheklovlar.maxWidth <= 500) {
qaytish Ustun(
mainAxisSize: MainAxisSize.max, bolalar: [
Kengaytirilgan(
bola: Idish(
rang: Ranglar.yashil,
bola: Markaz (bola: Matn("1")),
),
),
Kengaytirilgan(
bola: Idish( rang: Ranglar.ko'k,
bola: Markaz (bola: Matn("2")),
),
),
],
);
}

Shartli ravishda, biz ko'rsatish a Ustun vidjet qachon the mavjud kengligi hisoblanadi Kamroq dan 500 . Va bizda etarli joy bo'lganda, biz qaytarilgan vidjetni o'zgartiramiz:

qaytish Qator(

mainAxisSize: MainAxisSize.max,

bolalar: [ Kengaytirilgan(

bola: Idish(
rang: Ranglar.sariq,
bola: Markaz (bola: Matn("1")),
),
),
Kengaytirilgan(
bola: Idish(
rang: Ranglar.binafsha,
bola: Markaz (bola: Matn("2")),
),
),
],
);

In bu hol biz qaytish a Qator vidjet, kabi biz bor yetarli bo'sh joy (kattaroq dan 500 ). U turli yo'nalishlarda shunday ko'rinadi:

Sifatida siz mumkin qarang, biz qilish o'zgarishlar uchun the tartib asoslangan emas faqat yoqilgan orientatsiya, lekin yoqilgan mavjud kenglik. Mavjud o'lchamdagi o'zgarishlarga javob berishning yana bir usuli MediaQuery -dan foydalanishdir sinf. Endi MediaQuery qanday ishlashini ko'rib chiqamiz muqobil ishlar.