Junior
Ce tipuri de widget-uri există în Flutter?
sobes.tech AI
Răspuns de la AI
În Flutter, widget-urile sunt împărțite în două categorii principale:
- StatelessWidget: Widget-uri al căror stare nu se schimbă după construcția inițială. Ele descriu o parte a interfeței utilizatorului care nu depinde de datele în timpul execuției.
- StatefulWidget: Widget-uri cu stare modificabilă. Au un obiect
Stateasociat, care conține date modificabile și oferă un mecanism pentru reconstrucția widget-ului atunci când starea se schimbă.
De asemenea, widget-urile pot fi clasificate în funcție de scopul lor:
- Widget-uri de layout: Controlează poziționarea altor widget-uri pe ecran (de exemplu,
Row,Column,Stack). - Componente Material / widget-uri Cupertino: Oferă elemente UI gata făcute, conforme cu ghidurile Material Design (Android) sau Cupertino (iOS) (de exemplu,
AppBar,Button,TextField). - Widget-uri de input: Permite utilizatorului să interacționeze cu aplicația (de exemplu,
TextField,Checkbox,Slider). - Widget-uri interactive: Reacționează la gesturile utilizatorului (de exemplu,
GestureDetector,InkWell). - Widget-uri de pictură și efecte: Aplică efecte grafice (de exemplu,
Opacity,ClipRRect). - Widget-uri de derulare: Asigură derularea conținutului (de exemplu,
ListView,GridView).
În funcție de modul de creare, widget-urile pot fi:
- Primitivi: Blocuri de construcție de bază (de exemplu,
Container,Text,Icon). - Compozite: Formate din alte widget-uri.
// Exemplu de StatefulWidget
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// Schimbă starea și reafișează
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Contor:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Crește',
child: Icon(Icons.add),
),
],
);
}
}
// Exemplu de StatelessWidget
class TitleWidget extends StatelessWidget {
final String title;
TitleWidget({required this.title});
@override
Widget build(BuildContext context) {
return Text(
title,
style: TextStyle(fontSize: 24),
);
}
}