اجمع عناصر قائمة باستخدام fold

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

تحتاج قائمة النفقات إلى مجموع. يمكنك استخدام حلقة وجمع القيم، لكن للقائمة دالة تنفّذ ذلك بالضبط: fold. تمرّ عبر القائمة، حاملةً قيمة واحدة من عنصر إلى آخر:

double total = expenses.fold(0.0, (sum, e) => sum + e.amount);

اقرأها هكذا: ابدأ من 0.0. لكل نفقة e، يكون sum الجديد هو sum القديم مضافًا إليه e.amount. عند الانتهاء من القائمة، تكون قيمة sum الأخيرة هي النتيجة. بالنسبة إلى 3.5 و12، تكون القيم 0.0، ثم 3.5، ثم 15.5.

يجب أن تُرجع الدالة المجموع الجديد. إذا أرجعت e.amount فقط، فستنسى كل خطوة ما سبقها، وسيكون «المجموع» هو السعر الأخير.

يمكن أن تتغير القائمة نفسها: إضافة expenses.add(...) داخل setState تضيف عنصرًا آخر، وفي عملية البناء التالية يُجمع محتوى القائمة الجديدة.

التحدي

سهل

يُظهر سطر الإجمالي دائمًا $0.00. احسبه بدلًا من ذلك:

عيّن total باستخدام expenses.fold، مع إضافة amount لكل مصروف.

يعرضه السطر بالفعل بمنزلتين عشريتين، لذا ينبغي أن يظهر هكذا: Total: $15.50، وأن يزداد عند إضافة وجبة خفيفة.

جرّب بنفسك

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class Expense {
  Expense({required this.name, required this.amount});

  final String name;
  final double amount;
}

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> {
  final List<Expense> expenses = [
    Expense(name: 'Coffee', amount: 3.5),
    Expense(name: 'Lunch', amount: 12),
  ];

  @override
  Widget build(BuildContext context) {
    double total = 0;
    return Scaffold(
      appBar: AppBar(title: const Text('Expenses')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            for (final e in expenses) Text('${e.name}: \$${e.amount.toStringAsFixed(2)}'),
            const SizedBox(height: 16),
            Text('Total: \$${total.toStringAsFixed(2)}', style: const TextStyle(fontSize: 28)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  expenses.add(Expense(name: 'Snack', amount: 2.25));
                });
              },
              child: const Text('Add a snack'),
            ),
          ],
        ),
      ),
    );
  }
}