Menu
CoddyTech

העלאת מצב למעלה

חלק מהיחידה ניהול מצב במסלול ה-Flutter של Coddy. שיעור 4 מתוך 27.

הקישו על האגודל בטלפון: המספר שלצדו עולה, אבל בסרגל העליון עדיין כתוב 0 likes. הכפתור שומר את המונה שלו ב-State משלו, ושום דבר אחר לא יכול לראות אותו.

כששני רכיבים צריכים את אותו ערך, העבירו אותו למעלה אל הרכיב הקרוב ביותר שמכיל את שניהם. זה נקרא העלאת המצב למעלה. הדף מחזיק ב-likes, והכפתור הופך ל-StatelessWidget שמקבל את הערך ואת פונקציית ההתקשרות החוזרת:

LikeButton(
  likes: likes,
  onLike: () {
    setState(() {
      likes++;
    });
  },
)

עכשיו יש מונה אחד במקום אחד. הסרגל העליון, הכפתור וכפתור האיפוס קוראים את אותו ערך ומשנים אותו, ולכן הם לעולם לא יוכלו לא להסכים.

בדיקה מהירה: אם ערך מוצג או משתנה בשני מקומות, הרכיב שמחזיק בו חייב להיות מעל שניהם.

challenge icon

אתגר

בינוני

הפוך את הדף לבעלים היחיד של מספר הלייקים:

  • הפוך את 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)),
      ],
    );
  }
}
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה ניהול מצב

תרגלו בעצמכם: קומפיילר Flutter אונליין