Cộng các phần tử trong danh sách bằng fold

Thuộc phần Quản lý trạng thái trong hành trình Flutter của Coddy. Bài học 8 trên 27.

Một danh sách chi phí cần được tính tổng. Bạn có thể dùng vòng lặp để cộng, nhưng danh sách có một phương thức làm đúng việc này: fold. Phương thức này duyệt qua danh sách, mang theo một giá trị từ phần tử này sang phần tử khác:

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

Hãy đọc như sau: bắt đầu từ 0.0. Với mỗi khoản chi e, sum mới bằng sum cũ cộng với e.amount. Khi duyệt xong danh sách, sum cuối cùng là kết quả. Với 3.5 và 12, các giá trị lần lượt là 0.0, rồi 3.5, rồi 15.5.

Hàm phải trả về tổng mới. Nếu hàm chỉ trả về e.amount, mỗi bước sẽ quên bước trước đó, và “tổng” sẽ là giá cuối cùng.

Bản thân danh sách có thể thay đổi: expenses.add(...) bên trong setState thêm một khoản nữa, và lần dựng giao diện tiếp theo sẽ cộng danh sách mới.

Thử thách

Dễ

Dòng tổng tiền luôn hiển thị $0.00. Hãy tự tính tổng:

Gán giá trị cho total bằng expenses.fold, cộng amount của từng khoản chi.

Dòng này đã hiển thị số tiền với 2 chữ số thập phân, nên kết quả phải là Total: $15.50 và tăng lên khi bạn thêm một món ăn nhẹ.

Tự làm thử

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'),
            ),
          ],
        ),
      ),
    );
  }
}