Sobes.tech
Junior

Ποια είναι η διαφορά μεταξύ των widgets Stateful και Stateless;

sobes.tech AI

Απάντηση από AI

  • StatelessWidget:

    • Δεν διαθέτει εσωτερική κατάσταση που μπορεί να αλλάξει με την πάροδο του χρόνου.
    • Οι παράμετροι του widget ορίζονται κατά τη δημιουργία του και παραμένουν αμετάβλητες καθ' όλη τη διάρκεια του κύκλου ζωής του.
    • Χρησιμοποιείται για την εμφάνιση στατικών δεδομένων.
    • Η ανανέωση γίνεται μόνο κατά την ανακατασκευή του γονικού widget.
    • Υλοποιείται μέσω της μεθόδου build().
  • StatefulWidget:

    • Διαθέτει εσωτερική κατάσταση (State) που μπορεί να αλλάξει σε απάντηση σε γεγονότα (ενέργειες χρήστη, αιτήματα δικτύου κ.λπ.).
    • Η ανανέωση του widget γίνεται όταν καλείται η μέθοδος setState().
    • Χρησιμοποιείται για τη δημιουργία διαδραστικών στοιχείων και την εμφάνιση δυναμικών δεδομένων.
    • Αποτελείται από δύο μέρη: το ίδιο το StatefulWidget και το συσχετισμένο αντικείμενο State.
Χαρακτηριστικό StatelessWidget StatefulWidget
Κατάσταση Δεν έχει Έχει μεταβλητή κατάσταση (State)
Ανακατασκευή Όταν ανακατασκευάζεται το γονικό widget Όταν καλείται η 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('Αύξηση'),
        ),
      ],
    );
  }
}