Junior
Aký druh widgetov existuje vo Flutteri?
sobes.tech AI
Odpoveď od AI
Vo Flutteri sú widgety rozdelené do dvoch hlavných kategórií:
- StatelessWidget: Widgety, ktorých stav sa nemení po počiatočnej zostavbe. Opisujú časť UI, ktorá nezávisí od údajov v reálnom čase.
- StatefulWidget: Widgety so zmeniteľným stavom. Majú pripojený objekt
State, ktorý obsahuje meniteľné údaje a zabezpečuje mechanizmus na opätovnú výstavbu widgetu pri zmene stavu.
Okrem toho, widgety možno klasifikovať podľa ich určenia:
- Layout widgety: Riadi rozloženie iných widgetov na obrazovke (napríklad
Row,Column,Stack). - Material Components / Cupertino widgety: Poskytujú hotové UI prvky zodpovedajúce smerniciam Material Design (Android) alebo Cupertino (iOS) (napríklad
AppBar,Button,TextField). - Input widgety: Umožňujú používateľovi interagovať s aplikáciou (napríklad
TextField,Checkbox,Slider). - Interactive widgety: Reagujú na gestá používateľa (napríklad
GestureDetector,InkWell). - Painting & Effects widgety: Aplikujú grafické efekty (napríklad
Opacity,ClipRRect). - Scrolling widgety: Zabezpečujú posúvanie obsahu (napríklad
ListView,GridView).
Podľa spôsobu vytvárania môžu byť:
- Primitívne: Základné stavebné bloky (napríklad
Container,Text,Icon). - Kombinované: Skladajú sa z iných widgetov.
// Príklad StatefulWidget
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// Meniť stav a spustiť opätovné vykreslenie
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Počítadlo:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Zväčšiť',
child: Icon(Icons.add),
),
],
);
}
}
// Príklad StatelessWidget
class TitleWidget extends StatelessWidget {
final String title;
TitleWidget({required this.title});
@override
Widget build(BuildContext context) {
return Text(
title,
style: TextStyle(fontSize: 24),
);
}
}