Junior
Jaké druhy widgetů existují ve Flutteru?
sobes.tech AI
Odpověď od AI
Ve Flutteru jsou widgety rozděleny do dvou hlavních kategorií:
- StatelessWidget: Widgety, jejichž stav se po počáteční sestavě nemění. Popisují část uživatelského rozhraní, která nezávisí na datech za běhu.
- StatefulWidget: Widgety s měnitelným stavem. Mají přiřazený objekt
State, který obsahuje měnitelné údaje a poskytuje mechanismus pro překreslení widgetu při změně stavu.
Kromě toho lze widgety třídit podle jejich účelu:
- Rozvržení widgetů: Řídí rozmístění ostatních widgetů na obrazovce (například
Row,Column,Stack). - Material Components / Cupertino widgety: Poskytují hotové UI prvky odpovídající směrnicím Material Design (Android) nebo Cupertino (iOS) (například
AppBar,Button,TextField). - Vstupní widgety: Umožňují uživateli interagovat s aplikací (například
TextField,Checkbox,Slider). - Interaktivní widgety: Reagují na gesta uživatele (například
GestureDetector,InkWell). - Malování a efekty widgetů: Používají grafické efekty (například
Opacity,ClipRRect). - Posuvné widgety: Zajišťují posuv obsahu (například
ListView,GridView).
Podle způsobu tvorby mohou být widgety:
- Primitivní: Základní stavební bloky (například
Container,Text,Icon). - Složené: Sestavené z jiných widgetů.
// Příklad StatefulWidget
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// Změna stavu a překreslení
_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ýšit',
child: Icon(Icons.add),
),
],
);
}
}
// Pří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),
);
}
}