Geliştirme sırasında çoğu zaman kendinizi ListView'i bir tür önceden tanımlanmış formatla doldururken bulabilirsiniz. Bu düzeni Rows, Columns ve Containers kullanarak kendiniz oluşturmak yerine, yardımcı olması için Flutter'daki hazır widget'ı ListTile widget'ı olarak kullanabilirsiniz.

Bu derste, bazı pratik örnekler üzerinden bir Flutter uygulamasına nasıl ListTile widget'ı ekleyeceğinizi göstereceğim.

İşte bugün ele alacağımız şeyler:

ListTile nedir?

Flutter'daki ListTile widget'ı, ilgili bilgileri görüntüleyen bir UI öğesidir.

Materyal Tasarımından Liste spesifikasyonunu takip eder. Tipik bir ListTile üç bölüme ayrılmıştır; Başlat , Ortala ve Bitir . Başlangıç bölümü, önde gelen pencere aracını içerir; Merkez bölümü başlık ve alt başlığı içerir; ve Bitiş bölümü, sondaki widget'ı içerir.

Liste kutucuğu bölümlerini gösteren diyagram

Esas olarak ListView, Column ve Row gibi kaydırılabilir görünümleri doldurmak için kullanılır. Örneğin, yapılacaklar listesi, e-postalar, gezinme seçenekleri ve daha fazlasını göstermek için ListTile'ı kullanabilirsiniz. ListTile'a dokunarak da click olayını alabilirsiniz.

Görsel bir öğreniciyseniz, bu hızlı video eğitimine göz atın:

ListTile Ekleme

ListView widget'ında ListTile'ı görüntülemek için minimum kod:

 Liste görünümü(
  çocuklar: const [
    ListeTile(
      lider: Simge(Icons.car_rental),
      başlık: Metin('Araba'),
      sondaki: Simge(Icons.more_vert),
    ),
    ListeTile(
      lider: Simge(Icons.flight),
      başlık: Metin('Uçuş'),
      sondaki: Simge(Icons.more_vert),
    ),
    ListeTile(
      lider: Simge(Icons.train),
      başlık: Metin('Tren'),
      sondaki: Simge(Icons.more_vert),
    )
  ],
)

Kodun tasarıma nasıl çevrildiği aşağıda açıklanmıştır:

Sonuç iPhone'da gösterilen kutucuk kodunu listele

Arka ucunuzdan gelebilecek uzun listeyi doldurmak için ListTile'ı kullanmak istediğinizde, tek ListTile pencere öğesini ListView.Builder içine sarabilir ve aşağıdaki kodda gösterildiği gibi ListTile içindeki verileri gösterebilirsiniz:

 final List<String> item = List<String>.generate(10000, (i) => '$i');
ListView.builder(
  itemCount: item.length,
  itemBuilder: (bağlam, dizin) {
    ListTile'ı döndür(
      lider: CircleAvatar(
        arkaplanRenk: const Renk(0xff764abc),
        çocuk: Metin(öğeler[indeks]),
      ),
      başlık: Text('Item ${items[index]}'),
      alt başlık: Metin('Öğe açıklaması'),
      sondaki: Simge(Icons.more_vert),
    );
  },
)

Çıktı:

iPhone'daki kutucuk öğelerini listele

ListeTile varyasyonları

Üzerinde belirli bir eylem gerçekleştirmenize izin veren başka ListTile türleri de vardır.

Bunlar:

  1. Onay KutusuListTile
  2. RadioListTile
  3. SwitchListTile

Onay KutusuListTile

CheckboxListTile pencere bileşeni, ListTile ve Checkbox pencere öğelerinin bir birleşimidir.

Herhangi bir öğeyi tamamlandı olarak işaretlemek için bu widget'ı kullanabilirsiniz – örneğin; yapılacaklar öğeleri. Varsayılan olarak, ListTile'ın sağ tarafında onay kutusu görüntülenir (soldan sağa dil için).

CheckboxListTile pencere öğesini şu şekilde ekleyebilirsiniz:

 sınıf Dil {
  dize adı;
  bool kontrol edildi;
  Language(this.name, {this.isChecked = false});
}
// 1.
final Liste<Dil> diller = [Language('English'), Language('Fransızca'), Language('Almanca')];
ListView.builder(
  itemCount: diller.uzunluk,
  itemBuilder: (bağlam, dizin) {
    dönüş CheckboxListTile(
      // 2.
      başlık: Metin('${diller[index].name}'),
      // 3.
      değer: diller[index].isChecked,
      // 4.
      onChanged: (bool? değer) {
        setState(() {
          diller[index].isChecked = değer!;
        });
      },
      // 5.
      ikincil: const Icon(Icons.language),
    );
  },
)

Kod bloğundaki sayıların açıklaması:

  1. Dillerin listesini tutan bir değişken
  2. Bu, onay kutusu etiketini gösterir
  3. Bu, öğenin işaretlenip işaretlenmeyeceğine karar verir.
  4. Bu, ListTile'a dokunduğunuzda çağrılır.
  5. Bu, önde gelen bir simge görevi görür

çıktı :

İşaretli kutularla İngilizce, Fransızca ve Almanca

İkincil (baştaki) pencere aracını ve onay kutusunu değiştirmek için controlAffinity özelliğini kullanabilir ve bunu ListTileControlAffinity.leading olarak ayarlayabilirsiniz.

Şimdi metnin solundaki onay kutuları

Ayrıca checkboxShape parametresini RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)) olarak ayarlayarak onay kutusunun şeklini değiştirebilirsiniz.

Dairesel onay kutuları

RadioListTile

RadioListTile pencere bileşeni, ListTile ve RadioButton pencere öğelerinin bir birleşimidir — bu pencere öğesi, bir öğe listesinden tek bir seçeneği seçmek için kullanılır.

RadioListTile widget'ını şu şekilde ekleyebilirsiniz:

 // 1.
enum Cinsiyet { erkek, kadın }
// 2.
Cinsiyet? _gender = Cinsiyet.male;
Liste görünümü(
  çocuklar: [
    // 3.
    RadioListTile<Gender>(
      ikincil: Simge(Icons.male),
      controlAffinity: ListTileControlAffinity.trailing,
      başlık: const Metin('Erkek'),
      // 4.
      değer: Gender.male,
      // 5.
      grupDeğeri: _gender,
      // 6.
      onChanged: (Cinsiyet? değer) {
        setState(() {
          _gender = değer;
        });
      },
    ),
    RadioListTile<Gender>(
      ikincil: Simge(Icons.female),
      controlAffinity: ListTileControlAffinity.trailing,
      başlık: const Metin('Kadın'),
      değer: Gender.female,
      grupDeğeri: _gender,
      onChanged: (Cinsiyet? değer) {
        setState(() {
          _gender = değer;
        });
      },
    ),
  ],
)

Kod bloğundaki sayıların açıklaması:

  1. RadioListTile için tüm seçim değerlerini tutan bir numaralandırma
  2. Bu, enum kullanarak varsayılan seçimi kaydeder
  3. enum türünde RadioListTile ekleme
  4. Geçerli liste döşemesine seçim değeri atama. ListTile bu değeri temsil eder
  5. Bu, halihazırda seçili olan değeri görüntülemek için kullanılır.
  6. Bu, radyo düğmesini değiştirdiğinizde seçimle birlikte çağrılır

Çıktı:

erkek veya kadın seçeneği

SwitchListTile

SwitchListTile pencere bileşeni, ListTile veSwitch pencere öğelerinin bir birleşimidir.

Kullanıcıların uygulama ayarlarını açmasına veya kapatmasına olanak tanıyan UI etkileşimini oluşturmak için bu widget'ı kullanabilirsiniz.

SwitchListTile widget'ını şu şekilde ekleyebilirsiniz:

 sınıf Cihaz {
  dize adı;
  bool Açık;
  Cihaz(this.name, {this.isOn = false});
}
// 1.
nihai Liste<Cihaz> cihazlar = [
  Cihaz('TV'),
  Cihaz('Fan'),
  Cihaz('Buzdolabı'),
];
ListView.builder(
  itemCount: cihazlar.uzunluk,
  itemBuilder: (bağlam, dizin) {
    SwitchListTile(
      // 2.
      başlık: Text('${cihazlar[index].name}'),
      // 3.
      değer: cihazlar[indeks].isOn,
      // 4.
      onChanged: (bool değeri) {
        setState(() {
          cihazlar[indeks].isOn = değer;
        });
      },
    );
  },
)

Kod bloğundaki sayıların açıklaması:

  1. Cihazların listesini tutan bir değişken
  2. Bu, ListTile'ın adını veya başlığını gösterir.
  3. Bu, anahtarın açılıp kapatılmayacağını belirler.
  4. Bu, anahtarı değiştirdiğinizde çağrılır

Çıktı:

Geçiş anahtarı olan öğeleri listele

ListTile temasını yönetme

Tema, bir ön uç uygulaması geliştirmenin önemli bir yönüdür. Tema, markanızı aktarır ve dikkatli yönetilmezse, tüm UI öğelerinin aynı kuralı izlemesini sağlamak için çok fazla zaman harcıyor olabilirsiniz.

ListTile'ın görünümünü ve verdiği hissi tasarımınıza uyacak şekilde değiştirmek istediğinizi varsayalım. Gerçekten aşağıdaki iki seçeneğiniz var:

  1. Widget düzeyinde temayı değiştirme
  2. Uygulama düzeyinde tema değiştirme

Widget düzeyinde temayı değiştirme

Renk, şekil ve boyut gibi özelliklerini doğrudan değiştirerek ListTile'ın görünümünü değiştirebilirsiniz.

ListTile'ın arka plan rengini, metin rengini ve simge rengini şu şekilde değiştirebilirsiniz:

 ListTile'ı döndür(
  // 1.
  karoRenk: Colors.redAksan,
  // 2.
  metinRenk: Renkler.beyaz,
  // 3.
  iconColor: Renkler.beyaz,
);

Kod bloğundaki sayıların açıklaması:

  1. Bu, ListTile'ın arka plan rengini değiştirir
  2. Bu, ListTile'da görünen tüm metnin rengini değiştirir.
  3. Bu, ListTile'da görünen tüm simgelerin rengini değiştirir.

Uygulama düzeyinde tema değiştirme

Muhtemelen tüm uygulama sayfalarında ListTile pencere aracının görsel estetiğini değiştirmek isteyebilirsiniz. Bunu listTileTheme tanımlayarak ve ardından ListTileThemeData pencere aracını ekleyerek yapabilirsiniz.

ListTileThemeData pencere bileşeninin içinde, projenizdeki tüm ListTile pencere öğeleri için değiştirmek istediğiniz tüm özellikleri belirtebilirsiniz.

İşte kod örneği:

 MaterialApp'ı iade et(
  başlık: 'Flutter Demo',
  debugShowCheckedModeBanner: yanlış,
  tema: ThemeData(
    birincilSwatch: Colors.blue,
    listTileTheme: ListTileThemeData(
      karoRenk: Colors.redAksan,
      metinRenk: Renkler.beyaz,
      iconColor: Renkler.beyaz,
    ),
  ),
  ana sayfa: MyHomePage(),
);

Hem birinci hem de ikinci yaklaşım, aşağıdakiyle aynı sonucu verir:

Arka plan artık kırmızı

bölücü ekleme

Ayırıcı eklemek, özellikle öğeler orta bölümde üç satırla görüntülendiğinde, öğeler arasında net bir şekilde ayrım yapmanıza yardımcı olur.

ListTile öğeleri arasına ayırıcı eklemek için ListView pencere aracını ekleyin. ListView içine, fayans özelliği ve ListTile.divideTiles listesiyle ListTile.divideTiles ekleyin.

Kod Örneği:

 Liste görünümü(
  çocuklar: ListTile.divideTiles(bağlam: bağlam, döşemeler: [
    ListeTile(
      lider: Simge(Icons.car_rental),
      başlık: Metin('Araba'),
    ),
    ListeTile(
      lider: Simge(Icons.flight),
      başlık: Metin('Uçuş'),
    ),
    ListeTile(
      lider: Simge(Icons.train),
      başlık: Metin('Tren'),
    ),
  ]).Listeye(),
)

Çıktı:

Liste kutucuğu bölücü

ListView.Builder kullanıyorsanız, onu ListView.separated ile değiştirebilir ve ayırıcıyı döndüren separatorBuilder parametresini ekleyebilirsiniz.

Kod örneği:

 ListView.separated( // <-- BURAYA BAKIN
  itemCount: item.length,
  itemBuilder: (bağlam, dizin) {
    ListTile'ı döndür(
      lider: CircleAvatar(
        arkaplanRenk: const Renk(0xff764abc),
        çocuk: Metin(öğeler[indeks]),
      ),
      başlık: Text('Item ${items[index]}'),
      alt başlık: Metin('Öğe açıklaması'),
      sondaki: Simge(Icons.more_vert),
    );
  },
  separatorBuilder: (bağlam, dizin) { // <-- BURAYA BAKIN
    Dönüş Bölücü();
  },
)

Çıktı:

Kapatmak için hızlıca kaydırma davranışı ekleme

Kaydırarak kapat özelliği, bir kaydırma hareketi kullanarak belirli bir ListTile'ı listeden kaldırmanıza olanak tanır. Örneğin, bir e-postayı listenizden kaldırmak için bu özelliği kullanabilirsiniz.

İşte adımlar:

  1. ListTile widget'ınızı Dismissible widget'ının içine sarın
  2. Dismissible widget'ının onDismissed parametresini ekleyin ve bir geri arama kaydedin. Öğeyi listeden çıkarmak için mantığı buraya yazabilirsiniz.
 ListView.builder(
  itemCount: item.length,
  itemBuilder: (bağlam, dizin) {
    Geri Dön Dismissible( // Adım 1
      anahtar: Anahtar(öğeler[indeks]),
      onDismissed: (yön) { // 2. Adım
        setState(() {
          item.removeAt(index);
        });
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(içerik: Text('${items[index]} reddedildi')));
      },
      çocuk: ListTile(
        //visualDensity: VisualDensity(dikey: 4),
        lider: CircleAvatar(
          arkaplanRenk: const Renk(0xff764abc),
          çocuk: Metin(öğeler[indeks]),
        ),
        başlık: Text('Item ${items[index]}'),
        alt başlık: Metin('Öğe açıklaması'),
        sondaki: Simge(Icons.more_vert),
      ),
    );
  },
)
)

(Not: Yukarıdaki kod yalnızca ListTile'ı kullanıcı arayüzünden kaldırır ve öğeyi veritabanınızdan kaldırmak için iş mantığını kendiniz yazmanız gerekir)

Çıktı:

Liste öğelerini kaldırmak için kullanıcı hızlıca kaydırır

ListTile yüksekliğini değiştirme

Bazen ListTile yüksekliğini bir dereceye kadar ayarlamak isteyebilirsiniz. ListTile pencere bileşeni, boyutları Malzeme tasarımı belirtimine göre sınırlandırıldığından, height özelliğini doğrudan desteklemez. Bu nedenle ListTile yüksekliğini artırmak veya azaltmak için visualDensity özelliğini kullanabilirsiniz.

visualDensity pozitif bir sayıya ayarlanması ListTile yüksekliğini artırırken, negatif bir sayı yüksekliği azaltır.

(Not: Ayarlayabileceğiniz maksimum ve minimum değerler 4 ve -4'tür )

İşte kod örneği:

 ListeTile(
  visualDensity: VisualDensity(dikey: 4), //<-- BURAYA BAKIN
  lider: CircleAvatar(
    arkaplanRenk: const Renk(0xff764abc),
    çocuk: Metin(öğeler[indeks]),
  ),
  başlık: Text('Item ${items[index]}'),
  alt başlık: Metin('Öğe açıklaması'),
  sondaki: Simge(Icons.more_vert),
);

Çıktı:

Liste öğesi döşemeleri daha yüksek yüksekliğe sahip

özelleştirme

Mevcut özellikleri kullanarak ListTile'a çeşitli özelleştirmeler ekleyebilirsiniz. Örneğin, rengini değiştirebilir (vurgulu, basılı vb. gibi farklı durumlarda), şeklini değiştirebilir, başlık ile diğer öğeler arasına boşluk ekleyebilir ve yüksekliğini değiştirebilirsiniz.

Tanımına giderek desteklediği tüm özellikleri görebilirsiniz. Tüm özellikleri görmek için sağ tıklayın ve ardından Git > Delcation veya Kullanımlar öğesine tıklayın.

Tüm mülklerin listesini görme

Çözüm

ListTile pencere aracını eklemek, uygulama geliştirme hızını artırmanıza yardımcı olur. Malzeme özelliklerini takip eder ve bir öğeyi anlamlı bir şekilde sunmak için ihtiyacınız olan her şeyi kapsar.

Bu eğitimde, önce ListTile'ın nasıl ekleneceğine, türlerine ve temanın nasıl yönetileceğine baktık ve bölücü ve hızlıca kapat özelliği ekleme ve ListTile yüksekliğini değiştirme gibi bazı senaryoları ele aldık. umarım bir sonraki listenizi oluştururken yardımcı olursunuz.

Flutter'da ListTile nasıl eklenir: LogRocket Blog'da ilk olarak örnekler içeren bir eğitim çıktı.