Flutter Column va Row widgetlarini ishlatish
Column
Flutter da bu widgetning vazifasi boshqa widgetlarni ustun shaklida joylashtirishdir. Lekin buning bitta yomon tarafi bor u scroll bo`lmaydi ya`ni aylanmaydi , agar sizga aylanishi kerak bo`lsa siz ListView widgetini ishlatsangiz yaxshi.
Kelinglar , Column kodda qanday ishlatilishini ko`ramiz.
Column(
children: [
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Container(
width: 200,
height: 200,
color: Colors.red,
),
Container(
width: 200,
height: 200,
color: Colors.green,
)
],
),
Ko`rib turganizday 3 ta containerni vertikal qilib joylashtirib chiqdik.
Row
Row widgetlarni qator shaklida joylashtirib beradi. Bunda xam scroll ishlamaydi yani aylantirish agar sizga scroll kerak bo`lsa bunda xam ListView da foydalanganingiz yaxshiroq.
Row ni kodda ishlatib ko`ramiz.
Row(
children: [
Container(
width: 100,
height: 200,
color: Colors.blue,
),
Container(
width: 100,
height: 200,
color: Colors.red,
),
Container(
width: 100,
height: 200,
color: Colors.green,
)
],
),
Bunda ko`rib turibsizki 3 ta Containerlarni gorizontal korinishda taxlab bergan.
Endi esa ularni xussusiyatlari bilan tanishib chiqaylik, ikkalasini bir vaqtni o`zida ko`rib ketamiz solishtirish va tushinish oson bo`lishi uchun.
MainAxisAlignment
Bu Column da vertikal widgetlarni qanday joylashtirishni belgilab beradi , Row da esa gorizontal ya`ni mainAxisAlignment Column va Row da widgetlar qaysi yo`nalishda joylashtirilgan bo`sa o`sha yo`nalish bo`ylab qanday joylashishni xal qiladi xozir uni kod va rasmda ko`ramiz.
Row(
mainAxisAlignment: MainAxisAlignment.
spaceBetween,
children: [
Container(
width: 100,
height: 200,
color: Colors.blue,
),
Container(
width: 100,
height: 200,
color: Colors.red,
),
Container(
width: 100,
height: 200,
color: Colors.green,
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.
spaceBetween,
children: [
Container(
width: 100,
height: 200,
color: Colors.blue,
),
Container(
width: 100,
height: 200,
color: Colors.red,
),
Container(
width: 100,
height: 200,
color: Colors.green,
)
],
),
Mana ko`rib turganingizday xozir biz Column va Row ichidagi widgetlarni bo`sh joylarga teng taqsimlab chiqdik buning uchun biz MainAxisAlignment ning spaceBetween paramentirini foydalanishimiz kifoya edi.
Endi esa qolgan prametrlarini ko`rib chiqalylik :
MainAxisAlignment.center
Bunda widgetlarni iloji borija o`rtaga joylashtirishga xarakat qiladi.
MainAxisAlignment.start
Bu holatda widgetlarni boshiga joylashtirayapdi.
MainAxisAlignment.end
Bu holatda widgetlarni oxiriga joylashtirayapdi.
MainAxisAlignment.spaceAround
Bunda esa widgetlarni bo`sh joylarga taqsimlab chiqayapdi shuningdek, boshidan va oxiridan wigetlar orasidagi bo`sh joyni yarimcha joy tashayapdi.
MainAxisAlignment.spaceEvenly
Bu holatda har bir widget o`rasini bir xil bo`sh joy shuningdek, boshi va oxiridan xam hudi shunday bo`sh joy tashalgan.
CrossAxisAlignment
CrossAxisAlignment ning vazifasi va ishlatilinishi MainAxisAlignment bilan bir xil faqatgina joylashtirish yo`nalishlari teskari bo`ldi. Kelinglar bitta ikkita misol ko`ramiz.
Kelinglar men sizlarga men juda ko`p duch keladigan va ishlatadigan usulimni ko`rsataman.
Bu yerda ikkita Container boshida qolishi kerak lekin uchinchi Container eng oxirida bo`lishi kerak. Men bu yerda juda oson yo`lni tanlaganman ya`ni bo`shidagi ikkita Containerni bitta widget dek foydalanish uchun unlarni xam Row ga o`raganman. Qarabsizki katta Row da endi ikkita widget bor endi esa shunchaki uning MainAxisAlignment parametriga spaceBetween berib qo`ysak boldi.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
width: 100,
height: 200,
color: Colors.blue,
),
Container(
width: 100,
height: 200,
color: Colors.red,
),
],
),
Container(
width: 100,
height: 200,
color: Colors.green,
)
],
),
Umid qilamanki, sizga maqola yoqadi! Quyida izoh qoldiring yoki savollar / takliflar bo’lsa manga linkedin dan yozing!