Reja. Kross-platformali dasturlash tili haqida umumiy ma`lumot

Download 0,98 Mb.

bet	33/39
Sana	07.03.2022
Hajmi	0,98 Mb.
	#485533

1 ... 29 30 31 32 33 34 35 36 ... 39

Bog'liq
j7WNgrIuzYyWbItD7qqrNdYOmEd13B0L

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
)
)
)
);
}

Keling, har tomondan to'liq chegara o'rnatamiz va belgini qo'llaymiz:

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

import 'package:flutter/material.dart';
oid main() {
runApp(MaterialApp(
home: Scaffold(
body: TextField(decoration: InputDecoration(
border: OutlineInputBorder(),
icon: Icon(Icons.login),
hintText: "Введите логин",
helperText: "Логин используется для входа в систему",
)),
appBar: AppBar(title: Text("METANIT.COM")))
));
}

OutlineInputBorder klassi konstruktori vidjet atrofida chegara hosil qiladi. HelperText parametri vidjetning pastki qismida paydo bo'ladigan yordamchi matnni o'rnatadi. Va belgi parametri o'rnatilgan piktogramma to'plamidan Icons.login belgisini belgi sifatida o'rnatadi.

Matn kiritishga ishlov berish

Konstruktorning onChanged va onSubmitted parametrlaridan foydalanib, matn kiritilganda chaqiriladigan funksiyalarni sozlashimiz mumkin. Vidjetdagi matn har doim o‘zgarganda onChanged funksiyasi chaqiriladi. OnSubmitted funksiyasi foydalanuvchi yozishni tugatgandan so'ng chaqiriladi, masalan, klaviaturadagi Enter tugmasini bosish.

Bu funksiyalarning har ikkalasi ham ValueChanged (String qiymati) funksiyasini ifodalaydi, u parametr sifatida qatorni oladi - kiritilgan matn.

Eng oddiy dastur:

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

import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: TextField(
onSubmitted: (text) {
print("onSubmitted");
print("Введенный текст: $text");
},
onChanged: (text) {
print("onChanged");
print("Введенный текст: $text");
}),
appBar: AppBar(title: Text("METANIT.COM")))
));
}

Dasturning bajarilishidan ko'rinib turibdiki, kirish o'zgarganda onChanged funksiyasi chaqiriladi - belgi qo'shiladi yoki o'chiriladi, onSubmitted funksiyasi esa tugallangandan so'ng bir marta ishga tushiriladi.

Shunga ko'ra, ushbu funktsiyalardan foydalanib, siz vidjet holatini o'zgartirishingiz mumkin:

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
29
30
31
32
33
34
35
36

import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: Person(),
appBar: AppBar(title: Text("METANIT.COM")))
));
}
class Person extends StatefulWidget {
Person({ Key key}) : super(key: key);
@override
_PersonState createState() => _PersonState();
}
class _PersonState extends State
{
String _name = "Tom";
_changeName(String text){
setState(() =>_name = text);
}
@override
Widget build(BuildContext context) {
return Column(children:[
Text("Имя пользователя: $_name", style: TextStyle(fontSize: 22)),
TextField(
style: TextStyle(fontSize: 22),
onChanged: _changeName)
],
crossAxisAlignment: CrossAxisAlignment.start);
}
}

Bunday holda, shartli foydalanuvchi nomini _name o'zgaruvchisi ko'rinishida saqlaydigan Person vidjeti uchun _PersonState holat klassi aniqlanadi. Va onChanged funksiyasi chaqirilganda, u _changeName () usulini bajaradi, bunda u _name o'zgaruvchisining qiymatini o'zgartiradi.

Kirishni tekshirish uchun kiritilgan qiymat TextField tepasida joylashgan Matn vidjetiga chiqariladi.

TextFormField

TextFormField vidjeti xuddi TextField ga o‘xshaydi, u matn maydonini ham ifodalaydi va bir xil funksionallikni ta’minlaydi, faqat konstruktor parametrlariga initialValue parametrini qo‘shadi, undan matn maydonida boshlang‘ich qiymatni belgilash uchun foydalanishingiz mumkin:

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
29
30
31
32
33
34
35
36
37

import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: Person(),
appBar: AppBar(title: Text("METANIT.COM")))
));
}
class Person extends StatefulWidget {
Person({ Key key}) : super(key: key);
@override
_PersonState createState() => _PersonState();
}
class _PersonState extends State
{
String _name = "Tom";
_changeName(String text){
setState(() =&g; _name = text);
}
@override
Widget build(BuildContext context) {
return Column(children:[
Text("Имя пользователя: $_name", style: TextStyle(fontSize: 22)),
TextFormField(initialValue: _name,
style: TextStyle(fontSize: 22),
onChanged: _changeName)
],
crossAxisAlignment: CrossAxisAlignment.start);
}
}

Download 0,98 Mb.

Do'stlaringiz bilan baham:

1 ... 29 30 31 32 33 34 35 36 ... 39