Separator

ListView.separated ile satır aralarına ayraç koymayı öğrenirsin.

ListView.separated

ListView.separated, liste öğeleri arasına ayraç (separator) koyan ListView türüdür. itemCount ve itemBuilder yanı sıra bir separatorBuilder alır; bu, her iki öğe arasına çizilecek widget'ı üretir. En yaygın ayraç Divider widget'ıdır.

ListView.separated(
  itemCount: 10,
  separatorBuilder: (context, index) => Divider(),
  itemBuilder: (context, index) {
    return ListTile(title: Text('Öğe $index'));
  },
)

Divider widget'ı

Divider, yatay bir çizgi çizen basit bir widget'tır. ListView.separated'ta separatorBuilder olarak sıkça kullanılır. thickness parametresi çizgi kalınlığını, color rengini, indent sol ve sağ boşluğunu belirler. Boş bir Container da ayraç olarak kullanılabilir ama Divider daha okunaklıdır.

ListView.separated(
  itemCount: 5,
  separatorBuilder: (context, index) => Divider(
    color: Colors.grey,
    thickness: 1,
    indent: 16,
  ),
  itemBuilder: (context, index) => ListTile(
    title: Text('Kişi $index'),
  ),
)

Uygulama Separator bilgisini yazdır

main içinde iki satırı print ile yazdır: separated ayrac ve divider cizgi.

Örnek çözümü göster

void main() {
  print('separated ayrac');
  print('divider cizgi');
}

Kendini test et

ListView.separated ne ekler?
- Öğelerin arasına ayraç
- Öğelerin altına buton
- Öğelerin yanına simge
- Öğelerin üstüne başlık
Cevabı göster

Öğelerin arasına ayraç — ListView.separated, separatorBuilder ile öğelerin arasına ayraç widget'ı koyar.

Ayraç ekle

ListView.
  ____(
    itemCount: 5,
    separatorBuilder: (context, index) =&gt; Divider(),
    itemBuilder: (context, index) =&gt; Text('$index'),
  )

Cevabı göster

ListView.
  separated(
    itemCount: 5,
    separatorBuilder: (context, index) =&gt; Divider(),
    itemBuilder: (context, index) =&gt; Text('$index'),
  )

Separator kavramları

ListView.separated

Ayraçlı liste
separatorBuilder

Ayraç üreten fonksiyon
Divider

Yatay çizgi widget'ı
indent

Çizgi kenar boşluğu

Sıradaki ders: Özet - ListView

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler