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


Download 1.13 Mb.
bet27/27
Sana03.12.2023
Hajmi1.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

ListTile


ListView elementi sifatida biz turli xil vidjetlardan, masalan, Konteyner yoki Matndan foydalanishimiz mumkin bo'lsa-da, maxsus ishlab chiqilgan ListTile vidjetidan foydalanish qulayroq. ListTile ixtiyoriy bo'lsa-da, odatda matn va belgini o'z ichiga olgan qat'iy balandlikdagi satrni ifodalaydi.

ListTile quyidagi konstruktorga ega:




1
2
3
4
5

ListTile({Key key, Widget leading, Widget title, Widget subtitle, Widget trailing, bool isThreeLine: false,
bool dense, VisualDensity visualDensity, ShapeBorder shape, EdgeInsetsGeometry contentPadding,
bool enabled: true, GestureTapCallback onTap, GestureLongPressCallback onLongPress, MouseCursor mouseCursor,
bool selected: false, Color focusColor, Color hoverColor, FocusNode focusNode, bool autofocus: false,
Color tileColor, Color selectedTileColor})

Konstruktorning asosiy parametrlari:


avtofokus: bool turini ifodalaydi va bu vidjet fokusni olish-olmasligini bildiradi (agar rost bo'lsa)


contentPadding: EdgeInsetsGeometry ob'ekti sifatida kontent va konteyner chegaralari o'rtasida to'ldirishni o'rnatadi


yoqilgan: bool turini ifodalaydi va elementning o'zaro ta'sir qilish uchun mavjudligini ko'rsatadi


focusColor: vidjet fokus olganida oladigan rangni oʻrnatadi


hoverColor: vidjet sichqonchani ko‘targanda oladigan Rangni o‘rnatadi


isThreeLine: bool turini ifodalaydi va ro'yxat elementida uchta satr matn bo'lishini ko'rsatadi


yetakchi: ro‘yxat elementi oldiga qo‘yilgan vidjet

sichqoncha kursori: sichqoncha kursori kursorni ushbu roʻyxat elementi ustiga olib kelganda oladigan kursor shakli. MouseCursor turini ifodalaydi

onLongPress: berilgan roʻyxat elementi uzoq vaqt davomida bosilganda chaqiriladigan GestureLongPressCallback tipidagi funksiya.


onTap: ushbu ro'yxat elementi bosilganda chaqiriladigan GestureTapCallback tipidagi funksiya


tanlangan: bool turini ifodalaydi va berilgan ro'yxat elementi tanlanadimi yoki yo'qligini bildiradi


selectedTileColor: ListTile tanlanganda oladigan rangni belgilaydi


subtitle: asosiy tarkib ostida joylashgan qoʻshimcha vidjetni oʻrnatadi


tileColor: vidjet tanlanmaganda ListTile rangini o‘rnatadi

sarlavha: ListTile-ning asosiy mazmunini ifodalovchi vidjetni o'rnatadi

treyling: asosiy tarkibdan keyin ko'rsatiladigan vidjetni o'rnatadi


ListTile-dagi asosiy tarkib sarlavha parametri yordamida belgilanadi, u har qanday vidjet bo'lishi mumkin, lekin ko'pincha Matn vidjeti ishlatiladi:




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

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


Etakchi parametrdan foydalanib, sarlavha parametridan vidjet oldida ko'rsatiladigan vidjetni o'rnatishingiz mumkin. Masalan, asosiy tarkib oldida belgini ko'rsatamiz:




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

import 'package:flutter/material.dart';
final List users = ["Tom", "Bob", "Sam", "Mike"];
final List icons = [Icons.face, Icons.tag_faces, Icons.work, Icons.book];
void main() {
runApp(MaterialApp(
home: Scaffold(
body: ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: users.length,
separatorBuilder: (BuildContext context, int index) => Divider(),
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(users[index], style:TextStyle(fontSize: 22)),
leading: Icon(icons[index]),
);
}
),
appBar: AppBar(title: Text("METANIT.COM")),)
));
}

Bunday holda, IconData ob'ektini ifodalovchi va ListTile sarlavhasining chap tomonida ko'rsatiladigan Icon () vidjetiga uzatiladigan o'rnatilgan piktogrammalardan foydalaniladi:



Yoki, masalan, sarlavha vidjetidan keyin va pastda vidjetlarni o‘rnatuvchi so‘nggi va subtitr parametrlarini qo‘shing:




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import 'package:flutter/material.dart';
final List users = ["Tom", "Bob", "Sam", "Mike"];
final List companies = ["Google", "Microsoft", "Apple", "JetBrains"];
void main() {
runApp(MaterialApp(
home: Scaffold(
body: ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: users.length,
separatorBuilder: (BuildContext context, int index) => Divider(),
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(users[index], style:TextStyle(fontSize: 22)),
leading: Icon(Icons.face),
trailing: Icon(Icons.phone),
subtitle: Text("Works in ${companies[index]}")
);
}
),
appBar: AppBar(title: Text("METANIT.COM")),)
));
}


Element tanlash bilan ishlash


ListTile klik ishlov beruvchilarini aniqlash uchun onTap va nLongPress parametrlaridan foydalanadi. Umuman olganda, elementlarni tanlash texnikasi oldingi mavzuda tasvirlanganiga o'xshaydi. Xususan, biz quyidagi kodni aniqlaymiz:


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
38
39
40
41
42
43
44
45

import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: UsersList(),
appBar: AppBar(title: Text("METANIT.COM")),)
));
}
class UsersList extends StatefulWidget {
@override
_UsersListState createState() => _UsersListState();
}
class _UsersListState extends State {
final List _users = ["Tom", "Alice", "Sam", "Bob", "Kate"];
int _selectedIndex = -1;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
_selectedIndex==-1?"Не выбрано": "Выбрано: ${_users[_selectedIndex]}",
style: TextStyle(fontSize: 30)),
Expanded(child: ListView.builder(
itemCount: _users.length,
itemBuilder: (BuildContext context, int index) =>
ListTile(
onTap: () {
setState(() {
// устанавливаем индекс выделенного элемента
_selectedIndex = index;
});
},
title: Text(_users[index], style: TextStyle(fontSize: 24)),
selected: index == _selectedIndex,
selectedTileColor: Colors.black12,
),
))
]);
}
}

Bunday holda, ListView alohida UsersList vidjetida inkapsullanadi. _UsersListState vidjet holati sinfida biz ListView-da ko'rsatiladigan ma'lumotlarni aniqlaymiz - foydalanuvchilar ro'yxati va tanlangan element indeksini kuzatish uchun _selectedIndex o'zgaruvchisi. Odatiy bo'lib, _selectedIndex -1 bo'lib, dastlab hech qanday element tanlanmaganligini bildiradi.


ListTile konstruktoridagi onTap parametridan foydalanib, biz holatni o'zgartiramiz - tanlangan elementning indeksini o'zgartiramiz:





1
2
3
4
5
6

onTap: () {
setState(() {
// устанавливаем индекс выделенного элемента
_selectedIndex = index;
});
},

Element tanlanganligini ko'rsatish uchun biz tanlangan parametrni o'rnatamiz:




1

selected: index == _selectedIndex,

Bundan tashqari, biz tanlangan elementning rangini selectedTileColor parametri yordamida o'rnatishimiz mumkin:




1

selectedTileColor: Colors.black12,

Dastur natijasi:




Download 1.13 Mb.

Do'stlaringiz bilan baham:
1   ...   19   20   21   22   23   24   25   26   27



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