העלאת מצב למעלה
חלק מהיחידה ניהול מצב במסלול ה-Flutter של Coddy. שיעור 4 מתוך 27.
הקישו על האגודל בטלפון: המספר שלצדו עולה, אבל בסרגל העליון עדיין כתוב 0 likes. הכפתור שומר את המונה שלו ב-State משלו, ושום דבר אחר לא יכול לראות אותו.
כששני רכיבים צריכים את אותו ערך, העבירו אותו למעלה אל הרכיב הקרוב ביותר שמכיל את שניהם. זה נקרא העלאת המצב למעלה. הדף מחזיק ב-likes, והכפתור הופך ל-StatelessWidget שמקבל את הערך ואת פונקציית ההתקשרות החוזרת:
LikeButton(
likes: likes,
onLike: () {
setState(() {
likes++;
});
},
)עכשיו יש מונה אחד במקום אחד. הסרגל העליון, הכפתור וכפתור האיפוס קוראים את אותו ערך ומשנים אותו, ולכן הם לעולם לא יוכלו לא להסכים.
בדיקה מהירה: אם ערך מוצג או משתנה בשני מקומות, הרכיב שמחזיק בו חייב להיות מעל שניהם.
אתגר
בינוניהפוך את הדף לבעלים היחיד של מספר הלייקים:
- הפוך את
LikeButtonל־StatelessWidgetעם שני שדות:likesופונקציית קריאה חוזרת בשםonLike. - הדף מעביר את
likesשלו, ואתonLikeשמוסיף 1 בתוךsetState.
כך הסרגל העליון מתעדכן בהתאם לכפתור, וכפתור הרענון מאפס את שניהם.
נסו בעצמכם
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int likes = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('$likes likes'),
actions: [
IconButton(
icon: const Icon(Icons.refresh),
onPressed: () {
setState(() {
likes = 0;
});
},
),
],
),
body: const Center(
child: LikeButton(),
),
);
}
}
class LikeButton extends StatefulWidget {
const LikeButton({super.key});
@override
State<LikeButton> createState() => _LikeButtonState();
}
class _LikeButtonState extends State<LikeButton> {
int likes = 0;
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(Icons.thumb_up),
iconSize: 40,
onPressed: () {
setState(() {
likes++;
});
},
),
Text('$likes', style: const TextStyle(fontSize: 32)),
],
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה ניהול מצב
1העלאת מצב למעלה
העברת מצב לרכיב ילדהעברת פונקציית Callback לרכיב ילדפונקציות Callback ששולחות ערךהעלאת מצב למעלהתרגלו בעצמכם: קומפיילר Flutter אונליין