用构建器创建行

本课属于 Coddy Flutter 学习旅程的“列表和屏幕”单元。第 6 课，共 33 课。

播放列表可以容纳数千首歌曲。为每首歌曲编写一个 ListTile 不现实，而且一次性创建所有项会很慢。ListView.builder 只会在每一行滚动到视野中时才创建它。

ListView.builder(
  itemCount: songs.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(songs[index]));
  },
)

itemCount 表示有多少行。itemBuilder 是一个函数，列表会为每一行调用它，并传入该行的 index：第一行为 0，下一行为 1，以此类推。它会返回该行对应的组件。

将 songs.length 用作 itemCount，这样歌曲列表增加时，列表也会随之增长。如果数字大于列表中的项数，就会请求一个不存在的歌曲，应用会因 RangeError 而停止。

挑战

简单

播放列表有 15 首歌，但只显示 3 首。修正 itemCount，让列表包含每一首歌，直到 Starfall，并且添加歌曲后仍能正常显示。

亲手试试

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<String> songs = [
      'Morning Light',
      'Paper Planes',
      'City Rain',
      'Slow River',
      'Neon Nights',
      'Golden Hour',
      'Northern Wind',
      'Blue Harbor',
      'Quiet Storm',
      'Summer Static',
      'Echo Valley',
      'Last Train',
      'Silver Lines',
      'Open Road',
      'Starfall',
    ];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Playlist')),
        body: ListView.builder(
          itemCount: 3,
          itemBuilder: (context, index) {
            return ListTile(title: Text(songs[index]));
          },
        ),
      ),
    );
  }
}