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


Download 1.13 Mb.
bet21/27
Sana03.12.2023
Hajmi1.13 Mb.
#1798657
1   ...   17   18   19   20   21   22   23   24   ...   27
Bog'liq
Flutter ramka uchun qo\'llanma 1-bob. Flutterga kirish Flutter ni

TextField va TextFormField

Flutter-da matn kiritish uchun TextField vidjetidan foydalanish mumkin:




1
2
3
4
5
6
7
8
9

import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: TextField(),
appBar: AppBar(title: Text("METANIT.COM")),)
));
}


Shuni ta'kidlash kerakki, TextField vidjeti asosiy konteynerlardan birini Materiallar vidjetini yoki Card, Dialog, Drawer yoki Scaffold kabi vidjetlarni ifodalashini talab qiladi (yuqoridagi misolda bo'lgani kabi).


Vidjet konstruktori juda ko'p parametrlarni oladi, shuning uchun men faqat bir nechtasini belgilayman:


dekoratsiya: IInputDecoration obyekti yordamida vidjetga uslublar kiritadi


yoqilgan: matn maydoni kiritish uchun mavjudligini ko'rsatadigan bool qiymati (agar noto'g'ri bo'lsa, kiritish maydoni mavjud emas)


kengaytiradi: vidjet barcha mavjud konteyner maydonini to'ldirishini ko'rsatadigan bool qiymati


keyboardType: Klaviatura turini TextInputType obyekti sifatida o‘rnatadi


maxLength: matn maydoniga kiritilishi mumkin bo'lgan belgilarning maksimal soni

maxLines: maksimal satrlar soni

minLines: minimal qatorlar soni


obscureText: vidjet kiritilgan belgilarni maskalashi yoki yo'qligini ko'rsatadigan bool qiymati (masalan, parolni kiritishda)


obscuringCharacter: obscureText to'g'ri bo'lganda kirish belgilar uchun niqob sifatida foydalanish uchun belgilarni belgilaydi.


readOnly: vidjetdagi matnni oʻzgartirish mumkinligini koʻrsatadigan bool qiymati


uslub: TextStyle obyekti sifatida kiritilgan matnning uslubi


textAlign: TextAlign obyekti sifatida matnning gorizontal tekislanishini belgilaydi


textAlignVertical: matnning vertikal tekislanishini TextAlignVertical obyekti sifatida belgilaydi


textDirection: TextDirection obyekti yordamida matn yo‘nalishini o‘rnatadi


Keling, ba'zi parametrlarni qo'llaymiz:




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

import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: TextField(
style: TextStyle(fontSize: 22, color: Colors.blue),
maxLines: 10,
minLines: 5),
appBar: AppBar(title: Text("METANIT.COM")))
));
}


Kirish maydonini formatlash


InputDecoration ob'ektini ifodalovchi bezak parametridan foydalanib, TextField vidjetini uslublashingiz mumkin.

InputDecoration sinfining konstruktori uchun ba'zi asosiy parametrlar:


chegara: vidjet chegarasini InputBorder obyekti sifatida o‘rnatadi. Odatiy bo'lib, vidjet pastki chegaraga ega. Agar siz chegarani butunlay olib tashlashingiz kerak bo'lsa, unda siz InputBorder.none qiymatidan foydalanishingiz mumkin


Chegarani yaratish uchun yana ikkita sinfni olish mumkin: OutlineInputBorder (element atrofida chegara hosil qiladi) va UnderlineInputBorder (faqat pastki chegarani yaratadi).


contentPadding: matn kiritishda vidjet chegaralarini to‘ldirishni o‘rnatadi, EdgeInsetsGeometry obyektini ifodalaydi


fillColor: Rang obyektini vidjetni rang bilan to‘ldirish uchun o‘rnatadi

to'ldirilgan: vidjet fillColor parametridagi rang bilan to'ldirilishini ko'rsatadigan bool qiymati (agar rost bo'lsa rang bilan to'ldirilgan bo'ladi)

hintText: vidjetda matn boʻlmaganda paydo boʻladigan matn taklifi


hintStyle: TextStyle obyekti sifatida hintText parametridan matn uslubi


icon: vidjet oldida ko'rsatilgan belgini ifodalovchi vidjet (Vidjet obyekti).


helperText: vidjetning pastki oʻng tomonida paydo boʻladigan va kiritilgan qiymatdan qanday foydalanishni koʻrsatuvchi yordamchi matn

helperStyle: TextStyle obyekti sifatida helperText parametridan matn uslubi

labelText: vidjet tepasida paydo boʻladigan va matn maydonining maqsadini tavsiflovchi yorliq matni


labelStyle: TextStyle obyekti sifatida labelText parametridagi matn uslubi


Masalan, chegarani olib tashlaymiz, lekin vidjetning fon rangini qo'shamiz:





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

import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: TextField(decoration: InputDecoration(
border: InputBorder.none,
hintText: "Введите логин",
fillColor: Colors.black12,
filled: true
)),
appBar: AppBar(title: Text("METANIT.COM")),)
));
}


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 1.13 Mb.

Do'stlaringiz bilan baham:
1   ...   17   18   19   20   21   22   23   24   ...   27



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