Flutter ramka uchun qo'llanma 1-bob. Flutterga kirish Flutter nima. O'rnatish


Download 1.13 Mb.
bet10/27
Sana03.12.2023
Hajmi1.13 Mb.
#1798657
1   ...   6   7   8   9   10   11   12   13   ...   27
Bog'liq
Flutter ramka uchun qo\'llanma 1-bob. Flutterga kirish Flutter ni

Column

Ustun konteyneri elementlarni vertikal ravishda ustunga joylashtiradi.


Vidjet yaratish uchun quyidagi konstruktordan foydalaniladi:




1
2
3

Column({Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextDirection textDirection,
VerticalDirection verticalDirection: VerticalDirection.down, TextBaseline textBaseline, List children: const []})

Uning parametrlari:


kalit: vidjet kaliti


mainAxisAlignment: vertikal tekislashni o'rnatadi


mainAxisSize: Asosiy o'q bo'ylab vidjet egallagan joyni o'rnatadi


crossAxisAlignment: Gorizontal tekislashni belgilaydi


textDirection: ichki joylashtirilgan elementlarning gorizontal tartibini belgilaydi


verticalDirection: ichki joylashtirilgan elementlarning vertikal tartibini aniqlaydi


textBaseline: elementlarni tekislash uchun asosiy chiziqni o'rnatadi


bolalar: ichki o'rnatilgan elementlar to'plami


Eng oddiy Ustun vidjeti:




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import 'package:flutter/material.dart';
void main() {
runApp(Container(
padding: EdgeInsets.all(30),
color: Colors.teal,
child:Column(
children: [
Text('Вот мысль, которой весь я предан,',
textDirection: TextDirection.ltr),
Text('Итог всего, что ум скопил.',
textDirection: TextDirection.ltr),
Text('Лишь тот, кем бой за жизнь изведан,',
textDirection: TextDirection.ltr),
Text('Жизнь и свободу заслужил.',
textDirection: TextDirection.ltr)
],
)
)
);
}


Shuni yodda tutish kerakki, Ustun vidjeti aylantirishni qo'llab-quvvatlamaydi. Shuning uchun, agar siz ko'rinadigan bo'shliqdan tashqariga chiqadigan vidjetlarga kirishni ta'minlashingiz kerak bo'lsa, unda Ustun o'rniga boshqa konteynerdan, masalan, ListView-dan foydalanish yaxshiroqdir.


Cross AxisAlignment


Ustun konstruktoridagi crossAxisAlignment parametri ichki o'rnatilgan vidjetlar kesishuvchi o'q bo'ylab qanday joylashishini belgilaydi - bu holda, gorizontal. Ushbu parametr quyidagi qiymatlarni olishi mumkin:

CrossAxisAlignment.center: Odatiy bo'lib ichki o'rnatilgan elementlarni gorizontal ravishda markazlashtiradi. CrossAxisAlignment (2) bilan bir xil.


CrossAxisAlignment.end: ichki o'rnatilgan elementlarni gorizontal o'qning oxiriga joylashtiradi. Ustunda textDirection konstruktorining boshqa parametri TextDirection.ltr bo'lsa (ya'ni matn chapdan o'ngga), u holda elementlar o'ngga tekislanadi. Va agar u TextDirection.rtl ga teng bo'lsa (ya'ni, matn o'ngdan chapga), u holda elementlar chapga tekislanadi. CrossAxisAlignment (1) bilan bir xil.

CrossAxisAlignment.start: Kesishuvchi o'q boshida joylashgan elementlarni joylashtiradi. Ustunda textDirection konstruktorining boshqa parametri TextDirection.ltr bo'lsa (ya'ni matn chapdan o'ngga), u holda elementlar chapga tekislanadi. CrossAxisAlignment (0) bilan bir xil.

CrossAxisAlignment.stretch: Ichki elementlarni Ustun konteynerining to'liq kengligigacha uzaytiradi. CrossAxisAlignment (3) bilan bir xil.

CrossAxisAlignment.baseline: Ichki elementlarni asosiy chiziqqa - kesishuvchi o'qga tekislaydi. CrossAxisAlignment (4) bilan bir xil. Ustunli konteyner uchun bu aslida CrossAxisAlignment.start bilan bir xil. textBaseline parametrini o'rnatishni talab qiladi

Birinchi misolda, skrinshotdan ko'rinib turibdiki, CrossAxisAlignment.center sukut bo'yicha ishlatiladi, ya'ni barcha ichki o'rnatilgan vidjetlar markazlashtirilgan. Biz boshqa qiymatdan foydalanamiz:




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import 'package:flutter/material.dart';
void main() {
runApp(Container(
padding: EdgeInsets.all(30),
color: Colors.teal,
child:Column(
textDirection: TextDirection.ltr,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Вот мысль, которой весь я предан,',
textDirection: TextDirection.ltr),
Text('Итог всего, что ум скопил.',
textDirection: TextDirection.ltr),
Text('Лишь тот, кем бой за жизнь изведан,',
textDirection: TextDirection.ltr),
Text('Жизнь и свободу заслужил.',
textDirection: TextDirection.ltr)
],
)
)
);
}

CrossAxisAlignment: CrossAxisAlignment.start qiymati konteynerning chap tekislanishini o'rnatadi. Biroq, matnning yo'nalishlari har xil bo'lishi mumkinligi sababli - o'ng va chap qo'l, matnning yo'nalishini ham ko'rsatish kerak textDirection: TextDirection.ltr. Matnning yo'nalishiga qarab, boshlang'ich chap tomonda (chapdan o'ngga) yoki o'ng chetidan (o'ngdan chapga) bo'lishi mumkin.



Vertikal yo'nalish


Ustun konstruktoridagi verticalDirection parametri elementlarning vertikal yo‘nalishini belgilaydi: yuqoridan pastgacha yoki pastdan tepaga. Bu parametr VerticalDirection sinfini ifodalaydi, u quyidagi konstantalarni belgilaydi:

VerticalDirection.down: yuqoridan pastga joylashish


VerticalDirection.up: joylashuv pastdan yuqoriga


Masalan, pastdan yuqoriga joylashtirish:




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import 'package:flutter/material.dart';
void main() {
runApp(Container(
padding: EdgeInsets.all(30),
color: Colors.teal,
child:Column(
textDirection: TextDirection.ltr,
crossAxisAlignment: CrossAxisAlignment.start,
verticalDirection: VerticalDirection.up,
children: [
Text('Вот мысль, которой весь я предан,',
textDirection: TextDirection.ltr),
Text('Итог всего, что ум скопил.',
textDirection: TextDirection.ltr),
Text('Лишь тот, кем бой за жизнь изведан,',
textDirection: TextDirection.ltr),
Text('Жизнь и свободу заслужил.',
textDirection: TextDirection.ltr)
],
)
)
);
}


Main AxisAlignment


Ustun konstruktorining yana bir parametri mainAxisAlignment MainAxisAlignment sinfini ifodalaydi va vertikal tekislashni boshqaradi. U quyidagi qiymatlarni qabul qilishi mumkin:

MainAxisAlignment.center: vertikal markazni tekislash


MainAxisAlignment.end: vertikal o'qning oxirida tekislash. Vertikal o'qning oxiri qayerda bo'lishi boshqa konstruktor parametriga, verticalDirectionga bog'liq. Agar u VerticalDirection.down ga teng bo'lsa (vidjetlarning yuqoridan pastgacha joylashishi), vertikal o'qning oxiri pastki qism bilan bir xil bo'ladi va VerticalDirection.up qiymati vertikal o'qning yuqori qismida bo'lsa.

MainAxisAlignment.start: vertikal o'qning boshida tekislash. MainAxisAlignment.endga o'xshab, vertikal o'qning "boshlash" joyi verticalDirection parametrining qiymatiga bog'liq.

MainAxisAlignment.spaceBetween: Ustun bo'sh joy o'rnatilgan vidjetlar orasida teng taqsimlangan


MainAxisAlignment.spaceEvenly: Ustun bo'sh joy ichki o'rnatilgan vidjetlar o'rtasida, shuningdek, birinchi va oxirgi vidjetdan keyin teng taqsimlanadi.

MainAxisAlignment.spaceAround: Ustun bo'sh joy ichki o'rnatilgan vidjetlar o'rtasida teng taqsimlanadi, bundan tashqari, birinchi va oxirgi vidjetdan oldin yarim to'ldirish qo'shiladi (vidjetlar orasidagi to'ldirishning yarmi)

Masalan, o'rnatilgan vidjetlarni vertikal ravishda markazga joylashtiramiz:




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import 'package:flutter/material.dart';
void main() {
runApp(Container(
padding: EdgeInsets.only(top:30, left:10),
color: Colors.teal,
child:Column(
textDirection: TextDirection.ltr,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Вот мысль, которой весь я предан,',
textDirection: TextDirection.ltr),
Text('Итог всего, что ум скопил.',
textDirection: TextDirection.ltr),
Text('Лишь тот, кем бой за жизнь изведан,',
textDirection: TextDirection.ltr),
Text('Жизнь и свободу заслужил.',
textDirection: TextDirection.ltr)
],
)
)
);
}


SpaceBetween, spaceEvenly va spaceAround qiymatlaridan foydalanishga misol:



TextBaseline


Tegishlash uchun Ustun konstruktoridagi textBaseline parametridan foydalaniladi. Bu parametr quyidagi TextBaseline sanab qiymatlarini qabul qilishi mumkin:

TextBaseline.alphabetic: Alfavit belgilariga tekislash qo'llaniladi.


TextBaseline.ideographic: Hizalama ideografik belgilarga qo'llaniladi.



Row


Row vidjeti elementlarni gorizontal ravishda qatorga joylashtiradi.

Qator vidjetini yaratish uchun quyidagi konstruktordan foydalaniladi:





1
2
3

Row({Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextDirection textDirection,
VerticalDirection verticalDirection: VerticalDirection.down, TextBaseline textBaseline, List children: const []})

Uning parametrlari:


kalit: vidjet kaliti


mainAxisAlignment: gorizontal tekislashni o'rnatadi


mainAxisSize: vidjet egallagan gorizontal joyni oʻrnatadi


crossAxisAlignment: Vertikal tekislashni belgilaydi


textDirection: ichki joylashtirilgan elementlarning gorizontal tartibini belgilaydi


verticalDirection: ichki joylashtirilgan elementlarning vertikal tartibini aniqlaydi


textBaseline: elementlarni tekislash uchun asosiy chiziqni o'rnatadi


bolalar: ichki o'rnatilgan elementlar to'plami


Keling, Matn vidjetlari to‘plamini o‘z ichiga oladigan Qator vidjetini aniqlaymiz:




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import 'package:flutter/material.dart';
void main() {
runApp(Container(
padding: EdgeInsets.all(30),
color: Colors.teal,
child:Row(
textDirection: TextDirection.ltr,
children: [
Text('Tom',
textDirection: TextDirection.ltr),
Text('Bob',
textDirection: TextDirection.ltr),
Text('Sam',
textDirection: TextDirection.ltr),
Text('Alice',
textDirection: TextDirection.ltr)
],
)
)
);
}


Ko'rishimiz mumkinki, sukut bo'yicha Qator elementi barcha ichki o'rnatilgan vidjetlarni vertikal markazga va gorizontal chapga joylashtiradi. Bundan tashqari, barcha o'rnatilgan vidjetlar bir-biriga yaqin.


Main AxisAlignment


Konstruktorning mainAxisAlignment parametri ichki joylashtirilgan elementlarning gorizontal joylashuvini sozlash imkonini beradi. U MainAxisAlignment turini ifodalaydi va quyidagi qiymatlarni qabul qilishi mumkin:

MainAxisAlignment.center: markazga gorizontal tekislash


MainAxisAlignment.end: gorizontal o'q oxirida tekislash. Gorizontal o'qning oxiri joylashgan joy boshqa konstruktor parametriga, textDirectionga bog'liq. Agar u TextDirection.ltr ga (matn chapdan o'ngga) teng bo'lsa, gorizontal o'qning oxiri o'ng qirra bilan bir xil bo'ladi va qiymat TextDirection.rtl bo'lsa, oxiri chap qirra bilan bir xil bo'ladi.


MainAxisAlignment.start: vertikal o'qning boshida tekislash. MainAxisAlignment.endga o'xshab, gorizontal o'qning "boshlanishi" ning joylashuvi textDirection parametrining qiymatiga bog'liq.


MainAxisAlignment.spaceBetween: Qator bo'sh joy ichki o'rnatilgan vidjetlar orasida teng taqsimlanadi


MainAxisAlignment.spaceEvenly: Qator bo'sh joy ichki o'rnatilgan vidjetlar o'rtasida, shuningdek, birinchi va oxirgi vidjetdan keyin teng taqsimlanadi.


MainAxisAlignment.spaceAround: Qator bo'sh joy ichki o'rnatilgan vidjetlar o'rtasida teng taqsimlanadi, bundan tashqari, birinchi va oxirgi vidjetdan oldin yarim to'ldirish qo'shiladi (vidjetlar orasidagi to'ldirishning yarmi)

Masalan, elementlar orasiga bir-biri bilan qo‘shilmasligi uchun to‘ldirishni o‘rnatamiz:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import 'package:flutter/material.dart';
void main() {
runApp(Container(
padding: EdgeInsets.all(30),
color: Colors.teal,
child:Row(
textDirection: TextDirection.ltr,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Tom',
textDirection: TextDirection.ltr),
Text('Bob',
textDirection: TextDirection.ltr),
Text('Sam',
textDirection: TextDirection.ltr),
Text('Alice',
textDirection: TextDirection.ltr)
],
)
)
);
}


Cross AxisAlignment


Row konstruktoridagi crossAxisAlignment parametri ichki o'rnatilgan vidjetlar vertikal ravishda qanday joylashishini belgilaydi. Bu parametr CrossAxisAlignment sinfini ifodalaydi va quyidagi qiymatlarni qabul qilishi mumkin:

CrossAxisAlignment.center: Birlamchi, ichki joylashtirilgan elementlarni vertikal ravishda markazlashtiradi. Bu standart.


CrossAxisAlignment.end: ichki o'rnatilgan elementlarni vertikal o'qning oxiriga joylashtiradi. Bu qiymat Row konstruktorining verticalDirection boshqa parametriga bog'liq. Agar u VerticalDirection.down (yuqoridan pastga) bo'lsa, u holda elementlar pastga tekislanadi. Va agar u VerticalDirection.up ga teng bo'lsa (pastdan yuqoriga), u holda elementlar yuqoriga tekislanadi.

CrossAxisAlignment.start: Ichki elementlarni vertikal o'qning boshida joylashtiradi. Uning qiymati, CrossAxisAlignment.end kabi, verticalDirection konstruktorining parametriga bog'liq. Agar u VerticalDirection.down (yuqoridan pastga) bo'lsa, unda elementlar yuqoriga tekislanadi. Va agar u VerticalDirection.up ga teng bo'lsa (pastdan yuqoriga), u holda elementlar pastga tekislanadi.

CrossAxisAlignment.stretch: O'rnatilgan elementlarni Row konteynerining to'liq kengligigacha uzaytiradi.


CrossAxisAlignment.baseline: Ichki elementlarni asosiy chiziqqa - kesishuvchi o'qga tekislaydi. CrossAxisAlignment (4) bilan bir xil. textBaseline parametrini o'rnatishni talab qiladi

Birinchi misolda, skrinshotdan ko'rinib turibdiki, CrossAxisAlignment.center sukut bo'yicha ishlatiladi, ya'ni barcha ichki o'rnatilgan vidjetlar markazlashtirilgan. Buning o'rniga biz vidjetlarni tepaga joylashtiramiz:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import 'package:flutter/material.dart';
void main() {
runApp(Container(
padding: EdgeInsets.all(30),
color: Colors.teal,
child:Row(
textDirection: TextDirection.ltr,
crossAxisAlignment: CrossAxisAlignment.start,
verticalDirection: VerticalDirection.down,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Tom',
textDirection: TextDirection.ltr),
Text('Bob',
textDirection: TextDirection.ltr),
Text('Sam',
textDirection: TextDirection.ltr),
Text('Alice',
textDirection: TextDirection.ltr)
],
)
)
);
}





Download 1.13 Mb.

Do'stlaringiz bilan baham:
1   ...   6   7   8   9   10   11   12   13   ...   27



Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling