Reja. Kross-platformali dasturlash tili haqida umumiy ma`lumot

4-bob. Flutterdagi ro'yxatlar

ListView vidjeti

ListView vidjeti ob'ektlarning aylantiriladigan ro'yxatini taqdim etadi.

ListView klassi ko'p sonli parametrlarga ega bo'lgan bir nechta konstruktorlarga ega, shuning uchun faqat bir nechta parametrlarga e'tibor qaratamiz:

bolalar: ListViewga qo'shiladigan vidjetlar ro'yxatini ifodalovchi ro'yxati ob'ekti

scrollDirection: elementlarning yoʻnalishini oʻrnatadi. Ikki konstantani belgilaydigan Axis ro'yxatini ifodalaydi:

Axis.gorizontal: gorizontal ro'yxatni o'rnatadi - elementlar chapdan o'ngga (yoki o'ngdan chapga) joylashtirilgan.

Axis.vertical: vertikal ro'yxatni o'rnatadi - elementlar yuqoridan pastgacha tartibga solinadi

Sukut bo'yicha Axis.vertical.

padding: ListView chegaralaridan elementlarni to'ldirishni o'rnatadi, EdgeInsetsGeometry ob'ektini ifodalaydi

teskari: agar rost bo'lsa, elementlarni o'zgartiradi

fizika: ScrollPhysics obyekti yordamida aylantirish parametrlarini o‘rnatadi

Keling, eng oddiy ro'yxatni aniqlaymiz:

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")),) )); }

Bunday holda, barcha ListView elementlari Matn vidjeti bilan ifodalanadi:

Aslida, bu ro'yxatni tuzishning eng maqbul usuli emas, chunki bu holda faqat Matn vidjetidagi sarlavha o'zgaradi. Ammo keyin bu tuzilmani qanday soddalashtirish mumkinligini ko'rib chiqamiz.

Odatiy bo'lib, barcha elementlar ustunga joylashtirilgan vertikal ro'yxat yaratiladi. Keling, gorizontal ro'yxatni aniqlaymiz:

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'; const double textSize = 22; void main() { runApp(MaterialApp( home: Scaffold( body: ListView( padding: const EdgeInsets.all(8), scrollDirection: Axis.horizontal, 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")),) )); }

Gorizontal ro'yxat yaratish uchun scrollDirection parametriga Axis.horizontal qiymati uzatiladi. Biroq, natijaga qarasak, elementlar bir-biriga yaqin joylashganligini ko'rishimiz mumkin.

Bunday holda, biz Matn vidjetini to'ldirishni qo'llab-quvvatlaydigan boshqa vidjetga o'rashimiz 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 32 33 34 35 36

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

Bunday holda, to'ldirishni yaratish uchun Matn vidjeti o'ngga va chapga teng to'ldirishni o'rnatadigan Paddingga o'ralgan: