Menu
CoddyTech
flag Ar iconالعربيةdown icon

رفع الحالة إلى المكوّن الأب

جزء من قسم إدارة الحالة في رحلة 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 عبر الإنترنت