|
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")),)
));
}
|
Do'stlaringiz bilan baham: |
