تمرير الحالة إلى مكوّن فرعي

جزء من قسم إدارة الحالة في رحلة Flutter على Coddy. الدرس 1 من 27.

يتكوّن التطبيق من العديد من عناصر الواجهة، وغالبًا ما يحتاج العنصر الصغير إلى قيمة يملكها عنصر أكبر. هنا، تُخزَّن النتيجة في State الصفحة، أما لوحة النتائج التي تعرضها فهي عنصر واجهة مستقل.

لتمرير قيمة إلى عنصر فرعي، أضف إليه حقلًا final واطلب هذه القيمة في المُنشئ:

class ScoreBoard extends StatelessWidget {
  const ScoreBoard({super.key, required this.score});

  final int score;

  @override
  Widget build(BuildContext context) {
    return Text('Score: $score');
  }
}

يمرّر العنصر الأب قيمته في كل مرة ينشئ فيها العنصر الفرعي: ScoreBoard(score: score). عندما يستدعي العنصر الأب setState، يُنشئ العنصر الفرعي مجددًا، وتحصل لوحة النتائج على الرقم الجديد.

لا يغيّر العنصر الفرعي القيمة أبدًا. بل يعرض ما أُعطي له، ويظل العنصر الأب هو المالك الوحيد للنتيجة.

التحدي

سهل

يحتسب الزر +1 النقاط، لكن لوحة النتائج تعرض دائمًا Score: 0.

أضف إلى ScoreBoard حقلًا من النوع final int score، وتُعيّنه أداة الإنشاء الخاصة به.
اجعل نصه Score: متبوعًا بهذه النتيجة.
مرّر score الخاص بالصفحة عندما تنشئ الصفحة لوحة النتائج.

جرّب بنفسك

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 score = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const ScoreBoard(),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  score++;
                });
              },
              child: const Text('+1'),
            ),
          ],
        ),
      ),
    );
  }
}

class ScoreBoard extends StatelessWidget {
  const ScoreBoard({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Score: 0', style: TextStyle(fontSize: 32));
  }
}