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

Download 1.13 Mb.

bet	11/27
Sana	03.12.2023
Hajmi	1.13 Mb.
	#1798657

1 ... 7 8 9 10 11 12 13 14 ... 27

Bog'liq
Flutter ramka uchun qo\'llanma 1-bob. Flutterga kirish Flutter ni

Expanded

Kengaytirilgan konteyner o'zining ichki ichki vidjetiga boshqa konteynerlarning mavjud bo'sh joyini (yoki uning bir qismini) to'ldirishga imkon beradi - Qator va Ustun.

Kengaytirilgan vidjet yaratish uchun quyidagi konstruktordan foydalaniladi:

1	Expanded({Key key, int flex: 1, @required Widget child})

Bola parametri ichki o'rnatilgan vidjetni, moslashuvchan parametr esa moslashuvchan omilni, kengaytirilgan vidjetga ma'lum bir konteyner maydoni ajratiladigan miqdorni bildiradi.

Birinchidan, biz duch kelishi mumkin bo'lgan muammoni ko'rib chiqaylik. Aytaylik, biz Row konteynerida nisbatan uzun matnni ko'rsatmoqchimiz:

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

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,
children: [
Text('Чрез несколько дней после отъезда Анатоля, Пьер получил записку от князя Андрея, извещавшего '
'его о своем приезде и просившего Пьера заехать к нему.',
textDirection: TextDirection.ltr)
],
)
)
);
}

Agar biz dasturni ishga tushirsak, biz quyidagi kabi narsalarni ko'ramiz:

Row konteyneri matn qatorini joylashtirish uchun etarlicha keng bo'lmaganligi sababli, biz sariq-qora chiziqni va uning o'lchami shunchalik ko'p piksellar bilan kattalashtirilganligi haqidagi xabarni ko'ramiz. Biroq, matn tomoni ostidagi qator maydonining qolgan qismi bo'sh. Va agar bu chiziq o'rniga biz butun qator bo'shlig'ini to'ldirish uchun quyida o'ralgan matnni ko'rsak yaxshi bo'lardi. Buning uchun biz kengaytirilgan vidjetdan foydalanamiz:

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:Row(
textDirection: TextDirection.ltr,
crossAxisAlignment: CrossAxisAlignment.start,
verticalDirection: VerticalDirection.down,
children: [
Expanded(
child: Text('Чрез несколько дней после отъезда Анатоля, Пьер получил записку от князя Андрея, извещавшего '
'его о своем приезде и просившего Пьера заехать к нему.',
textDirection: TextDirection.ltr)
)
]
)
)
);
}

Egiluvchan omil

Flex Factor kengaytirilgan vidjetga beriladigan konteyner maydoni miqdorini bildiradi. Bo'shliqning ushbu qismini hisoblashda ushbu Kengaytirilgan vidjetning moslashuvchan koeffitsienti barcha elementlarning moslashuvchan omillari yig'indisiga bo'linadi. Olingan qiymat konteynerning umumiy mavjud maydoniga ko'paytiriladi.

Masalan, bizda quyidagi Row konteyneri bor deylik:

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
26
27
28

import 'package:flutter/material.dart';
void main() {
runApp(Container(
padding: EdgeInsets.only(top:25),
color: Colors.white,
child:Row(
textDirection: TextDirection.ltr,
crossAxisAlignment: CrossAxisAlignment.start,
verticalDirection: VerticalDirection.down,
children: [
Expanded(
child: Container(color: Colors.teal),
flex: 3,
),
Expanded(
child: Container(color: Colors.red),
flex:1
),
Expanded(
child: Container(color: Colors.indigoAccent),
flex: 2,
)
]
)
)
);
}

Shunday qilib, bizda uchta kengaytirilgan vidjet mavjud bo'lib, ularning har biri o'ziga xos rangga ega konteyner vidjetini o'z ichiga oladi. Birinchi kengaytirilgan vidjetda moslashuvchanlik koeffitsienti 3, ikkinchisida - 1, uchinchisida - 2. Barcha moslashuvchan omillarning yig'indisi 3 + 1 + 2 = 6. Shuning uchun birinchi kengaytirilgan vidjet 3/6 yoki 1/2 ni oladi. Qator maydoni, ikkinchi Kengaytirilgan vidjet - Qator maydonining 1/6 qismi va uchinchi Kengaytirilgan vidjet qator maydonining 2/6 yoki 1/3 qismini tashkil qiladi.

Agar egiluvchan faktor aniq ko'rsatilmagan bo'lsa, u sukut bo'yicha 1 ga teng.

Xuddi shu narsa Ustunli konteynerga joylashtirilganda ham amal qiladi, faqat bo'sh joy vertikal ravishda proportsional ravishda bo'linadi:

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.only(top:25),
color: Colors.white,
child:Column(
children: [
Expanded(
child: Container(color: Colors.teal),
flex:3
),
Expanded(
child: Container(color: Colors.red),
flex:1
),
Expanded(
child: Container(color: Colors.indigoAccent),
flex: 2,
)
]
)
)
);
}

Download 1.13 Mb.

Do'stlaringiz bilan baham:

1 ... 7 8 9 10 11 12 13 14 ... 27