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

Ro'yxatdagi elementni tanlash

Odatiy bo'lib, ListView tanlangan elementni kuzatishni qo'llab-quvvatlamaydi va bunday vaziyatda biz o'zimiz elementni tanlash bilan shug'ullanish uchun butun infratuzilmani yaratishimiz kerak. Bunday holda, biz ilgari muhokama qilingan GestureDetector vidjetidan foydalanishimiz mumkin, bu bizga bosishni kuzatish imkonini beradi.

Masalan, 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 46 47 48 49 50

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: _createListView, )) ]); } Widget _createListView(BuildContext context, int index) { return GestureDetector( onTap: () { setState(() { // устанавливаем индекс выделенного элемента selectedIndex = index; }); }, child: Container( margin: EdgeInsets.symmetric(vertical: 4), padding: EdgeInsets.symmetric(vertical: 8), color: index == selectedIndex ? Colors.black12: Colors.white60, child: Text(users[index], style: TextStyle(fontSize: 24)), ), ); } }

Shunday qilib, bu holda, yangi vidjet aniqlanadi - UsersList, u holatni saqlashi mumkin. Uning barcha holati _UsersListState sinfiga kiritilgan

_UsersListState foydalanuvchilar ro'yxatini saqlaydi - ListViewda ko'rsatiladigan haqiqiy ma'lumotlar:

1	final List users = ["Tom", "Alice", "Sam", "Bob", "Kate"];

Tanlangan elementni kuzatib borish uchun bizga uning indeksi kerak. Va foydalanuvchilar ro'yxatidan tanlangan element indeksini saqlash uchun alohida o'zgaruvchini aniqlaymiz:

1	int selectedIndex = -1;

Odatiy bo'lib, u -1 bo'lib, u hali hech qanday element tanlanmaganligining belgisi sifatida ishlaydi. ListView-da element tanlangandan so'ng, bu o'zgaruvchi tanlangan element indeksini ushlab turadi.

Tashkiliy jihatdan barcha vidjetlar Ustun konteyneriga joylashtiriladi, unda birinchi vidjet - Matn tanlangan elementning qiymatini ko'rsatadi (agar mavjud bo'lsa):

1 2 3

Text( selectedIndex==-1?"Не выбрано": "Выбрано: ${users[selectedIndex]}", style: TextStyle(fontSize: 30)),

ListView konteyner maydonini to'ldirishda muammolarga duch kelmasligi uchun biz ushbu vidjetni Expander konteyneriga joylashtiramiz. Va ListView-ni to'ldirish aniqlik uchun alohida _createListView usuliga o'tkaziladi. Eslatib o'taman, ListView konstruktorida itemBuilder parametri element indeksini ikkinchi parametr sifatida qabul qiluvchi funktsiyani oladi:

1	Widget _createListView(BuildContext context, int index) {

Shunday qilib, _createListView usuli parametridan biz joriy elementning indeksini olishimiz va u bilan biror narsa qilishimiz mumkin.

ListView-dagi element uchun yuqori darajadagi konteyner bosishlarni boshqaradigan GestureDetector vidjetidir.

Bosilganda funksiya ishga tushadi, u GestureDetector vidjetining onTap parametri orqali uzatiladi:

1 2 3 4 5 6

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

Bu erda biz vidjet holatini bosilgan element indeksini tanlanganIndex o'zgaruvchisiga o'tkazish orqali o'zgartiramiz.

GestureDetector-ning o'zi Konteyner vidjetini o'z ichiga oladi va u foydalanuvchilar ro'yxatidagi qatorni ko'rsatadigan Matn vidjetini o'z ichiga oladi.

Tanlangan elementni ajratib ko'rsatish uchun Konteyner vidjetida fon rangi joriy indeks tanlangan element indeksi ekanligiga qarab o'rnatiladi:

1	color: index == selectedIndex ? Colors.black12: Colors.white60,

Natijada, biz ListView-da elementlarni tanlashimiz va ularni olishimiz mumkin bo'ladi: