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

ListView-ni dinamik ravishda yaratish

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

1 ... 19 20 21 22 23 24 25 26 27

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

ListView-ni dinamik ravishda yaratish

Oldingi mavzuda eng oddiy ListView yaratish misoli ko'rib chiqildi:

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

import 'package:flutter/material.dart';
const double textSize = 22;
void main() {
runApp(MaterialApp(
home: Scaffold(
body: ListView(
padding: const EdgeInsets.all(8),
children:[
Text("Tom", style: TextStyle(fontSize: textSize)),
Text("Alice", style: TextStyle(fontSize: textSize)),
Text("Bob", style: TextStyle(fontSize: textSize)),
Text("Sam", style: TextStyle(fontSize: textSize)),
Text("Kate", style: TextStyle(fontSize: textSize)),
],
),
appBar: AppBar(title: Text("METANIT.COM")),)
));
}

Yuqoridagi misolda qo'llanilgan List sinfining standart konstruktori oz sonli elementlardan iborat ro'yxatlar yaratish uchun mos keladi, chunki bu holda biz ro'yxatdagi har bir elementni sozlashimiz kerak. Biroq, yuqoridagi misolda ham oz sonli elementlarga ega bo'lgan holda, biz barcha Matn elementlari faqat matnda farqlanishini ko'rishimiz mumkin. Va agar biz faqat bir marta Matn vidjetini aniqlab olsak va qandaydir tarzda uni ko'rsatish uchun barcha qatorlarni uzatsak yaxshi bo'lardi. Va bu holda, biz ListView sinfining boshqa konstruktoridan foydalanishimiz mumkin - ListView.builder ().

ListView.builder () ro'yxat elementlarini yaratadigan itemBuilder parametri sifatida IndexedWidgetBuilder ob'ektini oladi. Ushbu konstruktor katta ro'yxatlarni yaratish uchun qulayroqdir.

Masalan, ListView.builder () konstruktori yordamida oldingi misolni qayta loyihalashtiramiz:

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

import 'package:flutter/material.dart';
const List users = ["Tom", "Alice", "Bob", "Sam", "Kate"];
void main() {
runApp(MaterialApp(
home: Scaffold(
body: ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: users.length,
itemBuilder: (BuildContext context, int index) {
return Text(users[index], style: TextStyle(fontSize: 22));
}
),
appBar: AppBar(title: Text("METANIT.COM")),)
));
}

ItemBuilder-ga uzatiladigan IndexedWidgetBuilder aslida vidjet funksiyasi (BuildContext context, int index) bo‘lib, u vidjet kontekstini hamda indeksni oladi va yaratilgan vidjetni qaytaradi. Indeks sifatida nima o'tkaziladi?

Bu erda ListView ham itemCount parametridan foydalangan holda elementlar soniga o'rnatiladi - u foydalanuvchilardagi elementlar soniga teng: itemCount: users.length list (bu holda 5 ta element). Natijada, itemBuilder indeks parametriga uzatiladigan 0 dan users.length gacha bo'lgan raqamlarni ketma-ket takrorlaydi va shunday qilib, har bir o'tgan indeks uchun Matn vidjetini yaratadi va foydalanuvchilarning [indeks] qiymatini vidjetga uzatadi.

Aslida, bu funktsiyani har bir indeks uchun o'zining Matn vidjeti yaratilgan halqa bilan solishtirish mumkin. Biz quyidagi ListView bilan yakunlaymiz:

Aytgancha, biz ListView yaratish uchun bir nechta manbalardan foydalanishimiz 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

import 'package:flutter/material.dart';
const List users = ["Tom", "Alice", "Bob", "Sam", "Kate"];
const List companies = ["Microsoft", "Google", "Apple", "JetBrains", "Amazon"];
void main() {
runApp(MaterialApp(
home: Scaffold(
body: ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: users.length,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.symmetric(vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(users[index], style: TextStyle(fontSize: 22)),
Text("Место работы: ${companies[index]}", style: TextStyle(fontSize: 18))
],
)
);
}
),
appBar: AppBar(title: Text("METANIT.COM")),)
));
}

Bunday holda, ikkita Ro'yxat mavjud - biri foydalanuvchilar uchun, ikkinchisi esa kompaniyalar uchun. ListView yaratilganda, har bir ListView elementi uchun itemBuilder funktsiyasi ikkita Matn vidjetini o'z ichiga olgan Konteyner vidjetini yaratadi: biri foydalanuvchi nomini, ikkinchisi esa kompaniya nomini ko'rsatadi.

Ya'ni, bu holda, itemBuilder funksiyasi birinchi navbatda foydalanuvchilar ro'yxatidan birinchi elementni va kompaniyalar ro'yxatidan birinchi elementni tanlaydi, shuning uchun u ushbu ro'yxatlardan ikkinchi elementni tanlaydi va hokazo.

Biroq, bu erda shuni yodda tutish kerakki, ikkala ro'yxatda ListView vidjetining itemCount parametri uchun belgilanganidan kam bo'lmagan elementlar bo'lishi kerak.

Tabiiyki, biz murakkabroq ob'ektlarni ro'yxatga o'tkazishimiz 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

import 'package:flutter/material.dart';
class User{
String name;
int age;
User(this.name, this.age);
}
final List users = [User("Tom", 36), User("Alice", 31), User("Bob", 41), User("Sam", 28)];
void main() {
runApp(MaterialApp(
home: Scaffold(
body: ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: users.length,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.symmetric(vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(users[index].name, style: TextStyle(fontSize: 22)),
Text("Возраст: ${users[index].age}", style: TextStyle(fontSize: 18))
],
)
);
}
),
appBar: AppBar(title: Text("METANIT.COM")),)
));
}

Bunday holda, foydalanuvchilar ro'yxatidagi har bir Foydalanuvchi ob'ekti

uchun ListView-da alohida element yaratiladi:

Download 1.13 Mb.

Do'stlaringiz bilan baham:

1 ... 19 20 21 22 23 24 25 26 27