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

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: