Sobes.tech
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('Увеличи'),
        ),
      ],
    );
  }
}