دوال رد النداء التي ترسل قيمة

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

يمكن لردّ النداء أن يعيد قيمة إلى المكوّن الأب. يحتوي منتقي المقاس أدناه على ثلاثة أزرار، وتحتاج الصفحة إلى معرفة الزر الذي تم النقر عليه.

أضف معلمة إلى ردّ النداء. النوع void Function(String) هو دالة تأخذ String ولا تُرجع شيئًا:

class SizePicker extends StatelessWidget {
  const SizePicker({super.key, required this.onPick});

  final void Function(String) onPick;

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: () => onPick('S'),
      child: Text('S'),
    );
  }
}

يغلّف كل زر الاستدعاء داخل دالة صغيرة، () => onPick('S')، لكي تُنفَّذ عند النقر لا أثناء البناء. يستقبل المكوّن الأب القيمة كمعلمة ويحتفظ بها:

SizePicker(
  onPick: (picked) {
    setState(() {
      size = picked;
    });
  },
)

لدى Flutter اسم مختصر للنوع نفسه: ValueChanged<String>. تستخدمه العديد من العناصر المُضمَّنة، مثل onChanged في TextField.

التحدي

متوسط

اجعل أزرار المقاس تعمل:

أضف إلى SizePicker حقلاً باسم final void Function(String) onPick، واضبطه بواسطة المُنشئ.
اجعل كل زر يستدعي onPick بالحرف الخاص به.
اعرض المقاس الذي تم اختياره في الصفحة: Size: S أو Size: M أو Size: L.

جرّب بنفسك

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> {
  String size = 'M';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('T-shirt')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Size: $size', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            const SizePicker(),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        OutlinedButton(onPressed: () {}, child: const Text('S')),
        const SizedBox(width: 8),
        OutlinedButton(onPressed: () {}, child: const Text('M')),
        const SizedBox(width: 8),
        OutlinedButton(onPressed: () {}, child: const Text('L')),
      ],
    );
  }
}