Flutter: ListView

Verze z 26. 1. 2026, 09:37 (zobrazit zdroj) Spravce (diskuse | příspěvky) (Vytvoření základu stránky.)		Aktuální verze z 26. 1. 2026, 11:16 (zobrazit zdroj) Spravce (diskuse | příspěvky) (Formátování, upřesnění title a subtitle)
Řádka 2:		Řádka 2:
	== ListView ==		== ListView ==
−	* <code>ListView</code> slouží pro zobrazení dynamického seznamu položek, který lze skrolovat.	+	* <code>ListView</code> 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ě.		* Lze ho využít například pro zobrazení položek ze seznamu či pro položky, které přidáváme postupně.
−	== Zobrazení seznamu ==	+	== Příklad zobrazení seznamu ==
	* Pro zobrazení seznamu <code>seznam</code> můžeme použít ListView:		* Pro zobrazení seznamu <code>seznam</code> můžeme použít ListView:
		+	List<Element> seznam = ...;
		+
	Expanded(		Expanded(
	child: ListView.builder(		child: ListView.builder(
Řádka 12:		Řádka 14:
	itemBuilder: (context, index) {		itemBuilder: (context, index) {
	return ListTile(		return ListTile(
−	title: Text('${_seznam[index].abc}'),	+	title: Text('${_seznam[index].nazev}'),
−	subtitle: Text('${_seznam[index].def}'),	+	subtitle: Text('${_seznam[index].popis}'),
	);		);
	},		},
Řádka 22:		Řádka 24:
	== Vytvoření ListView ==		== Vytvoření ListView ==
−	=== ListView(children: []) ===	+	=== ListView.builder() ===
−	* Vhodné pro '''krátké statické seznamy''' &mdash; nelze přidávat položky.	+	* Používá se pro delší nebo dynamické seznamy (nejčastější varianta).
		+	* Vytváří položky až když jsou potřeba (lepší výkon)
−	<code>	+	ListView.builder(
−	ListView(	+	itemCount: 10,
−	children: [	+	itemBuilder: (context, index) {
−	ListTile(title: Text('Položka 1')),	+	return ListTile(
−	ListTile(title: Text('Položka 2')),	+	title: Text('Položka $index'),
−	ListTile(title: Text('Položka 3')),	+	);
−	],	+	},
−	)	+	)
−	</code>	+
−	=== ListView.builder() ===	+	=== ListView(children: []) ===
−	* Používá se pro '''delší nebo dynamické seznamy''' (nejčastější varianta).	+	* Vhodné pro krátké statické seznamy &mdash; nelze přidávat položky.
−	* Vytváří položky '''až když jsou potřeba''' (lepší výkon)	+
−	<code>	+	ListView(
−	ListView.builder(	+	children: [
−	itemCount: 10,	+	ListTile(title: Text('Položka 1')),
−	itemBuilder: (context, index) {	+	ListTile(title: Text('Položka 2')),
−	return ListTile(	+	ListTile(title: Text('Položka 3')),
−	title: Text('Položka $index'),	+	],
−	);	+	)
−	},	+
−	)	+
−	</code>	+
Řádka 56:		Řádka 54:
	; Vlastnosti <code>ListTile</code>:		; Vlastnosti <code>ListTile</code>:
−	* '''leading''' – ikona vlevo	+	* <code>title</code> – hlavní text (nadpis položky)
−	* '''trailing''' – ikona vpravo	+	* <code>subtitle</code> – doplňující popis položky
−	* '''onTap''' – reakce na kliknutí	+	* <code>leading</code> – ikona vlevo
		+	* <code>trailing</code> – ikona vpravo
		+	* <code>onTap</code> – reakce na kliknutí
		+
		+	; Příklad použití:
−	<code>	+	ListTile(
−	ListTile(	+	leading: Icon(Icons.person),
−	leading: Icon(Icons.person),	+	title: Text('Karel Dvořák'),
−	title: Text('Uživatel'),	+	subtitle: Text('místnost: 33'),
−	trailing: Icon(Icons.arrow_forward),	+	trailing: Icon(Icons.arrow_forward),
−	onTap: () {	+	onTap: () {
−	print('Klik!');	+	_reakceNaKlik;
−	},	+	},
−	)	+	)
−	</code>	+

---

Aktuální verze z 26. 1. 2026, 11:16

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