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('Αύξηση'),
),
],
);
}
}