Sobes.tech
Junior

Mi a különbség a Stateful és Stateless widgetek között?

sobes.tech MI

Válasz az MI-től

  • StatelessWidget:

    • Nincs belső állapota, amely idővel változhat.
    • A widget paraméterei a létrehozásakor vannak beállítva, és életciklusa során nem változnak.
    • Statikus adatok megjelenítésére használják.
    • Újrarajzolás csak akkor történik, amikor a szülő widget újraépül.
    • A build() metódussal valósítják meg.
  • StatefulWidget:

    • Belső állapottal (State) rendelkezik, amely eseményekre (felhasználói műveletek, hálózati kérések stb.) reagálhat.
    • A widget újrarajzolása a setState() hívásakor történik.
    • Interaktív elemek és dinamikus adatok megjelenítésére használják.
    • Két részből áll: maga a StatefulWidget és a hozzá kapcsolódó State objektum.
Jellemző StatelessWidget StatefulWidget
Állapot Nincs Változtatható állapottal (State)
Újrarajzolás Amikor a szülő widget újraépül Amikor a setState() hívódik
Használat Statikus adatok, nem interaktív elemek Interaktív elemek, dinamikus adatok
Megvalósítás Csak a build() metódus createState() és életciklus metódusok a State-ben
// StatelessWidget példa
class MyStatelessWidget extends StatelessWidget {
  final String text;

  MyStatelessWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Text(text); // Csak megjeleníti a átadott szöveget
  }
}
// StatefulWidget példa
class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0; // Belső állapot

  void _incrementCounter() {
    setState(() {
      // Állapot módosítása és újrarajzolás
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Számláló:'),
        Text('$_counter'),
        ElevatedButton(
          onPressed: _incrementCounter, // Metódus hívása nyomáskor
          child: Text('Növel'),
        ),
      ],
    );
  }
}