使用 map 根据数据创建 Widget

本课属于 Coddy Flutter 学习旅程的“列表和屏幕”单元。第 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);
}