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

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

تنتقل القيمة من الوالد إلى الابن. أما النقر فيسير في الاتجاه الآخر: فالزر موجود في الابن، لكن النقاط التي يغيّرها تخص الوالد.

يمرّر الوالد دالة إلى الابن، ويستدعيها الابن. الدالة التي لا تأخذ أي معاملات ولا تعيد أي قيمة يكون نوعها VoidCallback:

class AddButton extends StatelessWidget {
  const AddButton({super.key, required this.onAdd});

  final VoidCallback onAdd;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: onAdd, child: Text('Add point'));
  }
}

يكتب الوالد ما يفعله النقر، مستخدمًا setState كالمعتاد:

AddButton(
  onAdd: () {
    setState(() {
      score++;
    });
  },
)

اكتب onPressed: onAdd، وليس onAdd(). في الحالة الأولى، تمرّر الدالة إلى الزر ليستخدمها لاحقًا. أما في الحالة الثانية، فتستدعيها فورًا أثناء البناء، وتمرّر القيمة التي تعيدها.

التحدي

سهل

يوجد الزر Add point داخل عنصر الواجهة AddButton، لكنه لا يفعل شيئًا بعد.

أضف إلى AddButton حقلًا من النوع final VoidCallback onAdd، وتُعيّنه مُنشئته.
استخدمه بوصفه قيمة onPressed للزر.
في الصفحة، مرّر دالة تضيف 1 إلى score داخل 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 score = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Score: $score', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            const AddButton(),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: const Text('Add point'),
    );
  }
}