عناصر واجهة من البيانات باستخدام map

جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 15 من 33.

تنشئ الدالة map للقائمة قائمةً جديدةً بتطبيق دالة على كل عنصر. وهي الطريقة التي تحوّل بها قائمة بيانات إلى قائمة عناصر واجهة مستخدم:

ListView(
  children: books.map((book) => ListTile(title: Text(book.title))).toList(),
)

(book) => ListTile(...) دالة قصيرة: تأخذ book واحدًا وتُعيد العنصر بعد السهم. تستدعيها map لكل كتاب، بالترتيب.

لا تُعيد map قيمةً من النوع List بعد، لذا أنهِ التعبير بـ .toList(): إذ يحتاج children: إلى قائمة. ويؤدي for الخاص بالمجموعات المهمة نفسها. استخدم الطريقة الأسهل قراءةً بالنسبة إليك؛ سترى كلتيهما في التطبيقات الحقيقية.

تحوّل map البيانات أيضًا إلى بيانات أخرى: التعبير books.map((book) => book.title).toList() هو List<String> يحتوي على العناوين.

التحدي

سهل

تحتوي القائمة على خمسة كتب، لكن الشاشة تعرض ثلاث بطاقات مكتوبة يدويًا. استبدل البطاقات الثلاث بـ books.map(...).toList()، بحيث يحصل كل كتاب على بطاقة تعرض عنوانه ومؤلفه في العنوان الفرعي.

جرّب بنفسك

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final List<Book> books = [
      Book('Dune', 'Frank Herbert'),
      Book('Emma', 'Jane Austen'),
      Book('Ulysses', 'James Joyce'),
      Book('Coraline', 'Neil Gaiman'),
      Book('Beloved', 'Toni Morrison'),
    ];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Books')),
        body: ListView(
          children: [
            ListTile(
              title: Text(books[0].title),
              subtitle: Text(books[0].author),
            ),
            ListTile(
              title: Text(books[1].title),
              subtitle: Text(books[1].author),
            ),
            ListTile(
              title: Text(books[2].title),
              subtitle: Text(books[2].author),
            ),
          ],
        ),
      ),
    );
  }
}

class Book {
  final String title;
  final String author;

  Book(this.title, this.author);
}