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

Ro'yxatga ajratuvchi qo'shish

ListView-ni to'ldirganda, biz har bir ro'yxat elementiga qo'llaniladigan vidjetni o'zimizcha uslublashimiz mumkin - chekinishlar, chegaralar, qandaydir grafikalar. Ammo agar biz ListView-dagi elementlar o'rtasida ajratuvchi yaratish haqida gapiradigan bo'lsak, unda biz boshqa sinf konstruktoridan foydalanishimiz mumkin - ListView.separated. Ushbu konstruktor, xuddi ListView.builder konstruktori kabi, itemBuilder parametri yordamida ListViewda elementlarni yaratish funksiyasini belgilash imkonini beradi. Lekin u ixtiyoriy separatorBuilder parametridan foydalanib elementlar orasidagi chegara yaratish funksiyasini ham belgilash imkonini beradi.

SeparatorBuilder shuningdek, IndexedWidgetBuilder tipidagi funksiyani, ya'ni Vidjet funktsiyasini (BuildContext context, int index) ifodalaydi.

Shunday qilib, ListView.separated konstruktoridan foydalanamiz:

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

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 Container( padding: EdgeInsets.symmetric(vertical: 10), child: Text(users[index], style: TextStyle(fontSize: 22)) ); } ), appBar: AppBar(title: Text("METANIT.COM")),) )); }

Ajratuvchi yaratish uchun bu erda o'rnatilgan Divider () vidjeti ishlatiladi, bu asosan chiziqni ifodalaydi:

Va Divider bo'luvchini sozlash imkonini beruvchi bir qator variantlarni taqdim etadi:

ikki qavatli balandlik: ajratgichning balandligi

ikki barobar qalinligi: ajratgichning kengligi

qo'sh chekinish: ajratuvchidan oldin chekinish

edouble ndIndent: ajratuvchidan keyin chekinish

Rang rangi: ajratuvchining rangi

Masalan, ajratgichni o'rnatamiz:

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

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(height: 20, color: Colors.redAccent, thickness: 2,), itemBuilder: (BuildContext context, int index) { return Container( padding: EdgeInsets.symmetric(horizontal: 10), child: Text(users[index], style: TextStyle(fontSize: 22)) ); } ), appBar: AppBar(title: Text("METANIT.COM")),) )); }

Bu erda ajratuvchi kengligi 20 va qalinligi 3. Bundan tashqari, ochiq qizil rangdan foydalanadi.

Gorizontal ro'yxat uchun siz boshqa o'rnatilgan VerticalDivider vidjetidan foydalanishingiz mumkin:

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

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, scrollDirection: Axis.horizontal, separatorBuilder: (BuildContext context, int index) => VerticalDivider(), itemBuilder: (BuildContext context, int index) { return Container( padding: EdgeInsets.symmetric(horizontal: 10), child: Text(users[index], style: TextStyle(fontSize: 22)) ); } ), appBar: AppBar(title: Text("METANIT.COM")),) )); }

VerticalDivider Divider bilan bir xil variantlarni taqdim etadi, faqat balandlik parametri o'rniga bo'linuvchining kengligini sozlaydigan kenglik parametrini qo'llaydi.

Flutter ajratuvchi - Divider va VerticalDivider yaratish uchun o'rnatilgan vidjetlarni taqdim etishiga qaramay, biz o'zimiz ListView elementlari orasidagi chegara vazifasini bajaradigan o'z vidjetimizni belgilashimiz mumkin. Masalan, Konteyner vidjetidan foydalanamiz:

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

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) => Container(height:1, color: Colors.blue, margin: EdgeInsets.symmetric(vertical: 10),), itemBuilder: (BuildContext context, int index) { return Container( padding: EdgeInsets.symmetric(vertical: 10), child: Text(users[index], style: TextStyle(fontSize: 22)) ); } ), appBar: AppBar(title: Text("METANIT.COM")),) )); }

Bu holda konteyner balandligi 1 ga teng bo'lganligi sababli, u asosan ingichka chiziqni ifodalaydi. Bundan tashqari, bu erda qo'shni vidjetlardan 10 birlikdan iborat chekinish o'rnatiladi, ular yana o'rnatilgan Matn vidjeti bilan Konteyner sinfi tomonidan taqdim etilgan ro'yxat elementi vidjetlari.