Flutter: ListView

Obsah 1 ListView 2 Příklad zobrazení seznamu 3 Vytvoření ListView 3.1 ListView.builder() 3.2 ListView(children: []) 4 ListTile: položka seznamu 5 Související stránky

ListView

• ListView slouží pro zobrazení dynamického seznamu položek, kterým lze skrolovat.
• Lze ho využít například pro zobrazení položek ze seznamu či pro položky, které přidáváme postupně.

Příklad zobrazení seznamu

• Pro zobrazení seznamu seznam můžeme použít ListView:

 List<Element> seznam = ...;

 Expanded(
   child: ListView.builder(
     itemCount: _seznam.length,
     itemBuilder: (context, index) {
       return ListTile(
           title: Text('${_seznam[index].nazev}'),
           subtitle: Text('${_seznam[index].popis}'),
       );
     },
   ),
 ),

Vytvoření ListView

ListView.builder()

• Používá se pro delší nebo dynamické seznamy (nejčastější varianta).
• Vytváří položky až když jsou potřeba (lepší výkon)

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Položka $index'),
    );
  },
)

ListView(children: [])

• Vhodné pro krátké statické seznamy — nelze přidávat položky.

ListView(
  children: [
    ListTile(title: Text('Položka 1')),
    ListTile(title: Text('Položka 2')),
    ListTile(title: Text('Položka 3')),
  ],
)

ListTile: položka seznamu

• Jednu položku dynamického seznamu reprezentuje widget ListTile

Vlastnosti ListTile

• title – hlavní text (nadpis položky)
• subtitle – doplňující popis položky
• leading – ikona vlevo
• trailing – ikona vpravo
• onTap – reakce na kliknutí

Příklad použití

ListTile(
  leading: Icon(Icons.person),
  title: Text('Karel Dvořák'),
  subtitle: Text('místnost: 33'),
  trailing: Icon(Icons.arrow_forward),
  onTap: () {
    _reakceNaKlik;
  },
)

Související stránky

• Flutter: Základní widgety
• Flutter: Kostra aplikace