Junior
Каква е разликата между Stateful и Stateless виджети?
sobes.tech AI
Отговор от AI
-
StatelessWidget:
- Няма вътрешно състояние, което може да се променя с времето.
- Параметрите на виджета се задават при създаването му и остават непроменени през целия му жизнен цикъл.
- Използва се за показване на статични данни.
- Прерисуването се случва само при преизграждане на родителския виджет.
- Реализира се чрез метода
build().
-
StatefulWidget:
- Има вътрешно състояние (
State), което може да се променя в отговор на събития (действия на потребителя, мрежови заявки и др.). - Прерисуването на виджета става при извикване на метода
setState(). - Използва се за създаване на интерактивни елементи и показване на динамични данни.
- Състои се от две части: самия
StatefulWidgetи свързания с него обектState.
- Има вътрешно състояние (
| Признак | StatelessWidget | StatefulWidget |
|---|---|---|
| Състояние | Няма | Има променливо състояние (State) |
| Прерисуване | При преизграждане на родителя | При извикване на setState() |
| Използване | Статични данни, неинтерактивни елементи | Интерактивни елементи, динамични данни |
| Реализация | Само метод build() |
createState() и методи за жизнения цикъл в State |
// Пример StatelessWidget
class MyStatelessWidget extends StatelessWidget {
final String text;
MyStatelessWidget({required this.text});
@override
Widget build(BuildContext context) {
return Text(text); // Просто показва предадения текст
}
}
// Пример StatefulWidget
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0; // Вътрешно състояние
void _incrementCounter() {
setState(() {
// Променяме състоянието и извикваме прерисуване
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Брояч:'),
Text('$_counter'),
ElevatedButton(
onPressed: _incrementCounter, // Метод при натискане
child: Text('Увеличи'),
),
],
);
}
}