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

Download 1.13 Mb.

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

1 2 3 4 5 6 7 8 9 10 ... 27

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

Padding

Padding vidjeti ichki oʻrnatilgan element uchun toʻldirishni oʻrnatish imkonini beradi.

U quyidagi konstruktordan foydalanadi:

1	Padding({Key key, @required EdgeInsetsGeometry padding, Widget child})

Konstruktorda to'ldirishni o'rnatish uchun kerakli parametr bo'lgan to'ldirish parametri ishlatiladi. U EdgeInsetsGeometry sinfini ifodalaydi. Chekishni o'rnatish uchun biz ushbu sinf konstruktorlaridan birini ishlatishimiz mumkin:

EdgeInsets.all (ikki marta qiymat): to'rtta to'ldirish uchun bitta qo'sh qiymatni o'rnatadi (chap, yuqori, o'ng va pastki)

EdgeInsets.fromLTRB (ikkita chap, ikki qavatli yuqori, ikki o'ng, ikkita pastki): to'rt tomonning har biri uchun chekinish qiymatini o'rnatadi

EdgeInsets.fromWindowPadding (WindowPadding padding, double devicePixelRatio): to'ldirish parametriga mos keladigan bo'sh joyni belgilaydi

EdgeInsets.only ({ikki marta chap: 0,0, ikkita yuqori: 0,0, ikki tomonlama o'ng: 0,0, ikkita pastki: 0,0}): to'rt tomonning har biri uchun nolga teng bo'lmagan to'ldirish qiymatlarini o'rnatadi

EdgeInsets.symmetric ({ikki marta vertikal: 0,0, ikkita gorizontal: 0,0}): vertikal yuqori va pastki to'ldirishni, gorizontal esa chap va o'ngni o'rnatadi.

Keling, avval chiziq qo'yilmagan misolni ko'rib chiqaylik:

1
2
3
4
5
6
7
8
9
10
11
12

import 'package:flutter/material.dart';
void main() {
runApp(Align(
alignment: Alignment.topCenter,
child: Text(
'Hello Flutter from metanit.com',
textDirection: TextDirection.ltr
)
)
);
}

Ko'rib turganingizdek, ilova butun ekranni, jumladan, smartfonning yuqori panelini egallaydi, bu erda turli ko'rsatkichlar va joriy vaqt joylashgan.

Smartfonning yuqori panelidan ilovadagi testni olib tashlash uchun biz chekinishni qo'llaymiz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import 'package:flutter/material.dart';
void main() {
runApp(Padding(
padding: EdgeInsets.all(40),
child: Align(
alignment: Alignment.topCenter,
child: Text(
'Hello Flutter from metanit.com',
textDirection: TextDirection.ltr
)
)
)
);
}

Bunday holda, Align konteyneri matn bilan boshqa konteynerga - Paddingga joylashtiriladi. To'ldirish to'rtta to'ldirish uchun bir xil qiymatni o'rnatadi - 40 birlik. Natijada, ilovadagi matn yuqori holat satridan 40 birlik pastga siljiydi:

Boshqa EdgeInsets konstruktorlaridan foydalanib, turli tomonlar uchun to'ldirishni o'rnatish mumkin. Masalan:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import 'package:flutter/material.dart';
void main() {
runApp(Padding(
padding: EdgeInsets.only(top: 40, bottom:10, left:10, right:10),
child: Align(
alignment: Alignment.topCenter,
child: Text(
'Hello Flutter from metanit.com',
textDirection: TextDirection.ltr
)
)
)
);
}

Download 1.13 Mb.

Do'stlaringiz bilan baham:

1 2 3 4 5 6 7 8 9 10 ... 27