给行编号

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

构建器获取的 index 不只是用来查找对应歌曲的方式。它还是这一行在列表中的位置，所以你可以把它显示出来。

itemBuilder: (context, index) {
  return ListTile(
    leading: Text('$index'),
    title: Text(songs[index]),
  );
},

这样会在第一首歌曲旁显示 0，因为 Dart 从 0 开始计数。人们从 1 开始计数，所以要显示 index + 1。字符串中的计算要放在花括号里：'${index + 1}'。

挑战

简单

给歌曲编号：为每个 ListTile 添加一个 leading: CircleAvatar，显示歌曲编号，从 1 开始，对应 Morning Light。

亲手试试

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: songs.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(songs[index]));
          },
        ),
      ),
    );
  }
}