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.