Đánh số các hàng

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 7 trên 33.

Chỉ số mà hàm dựng nhận được không chỉ giúp tìm đúng bài hát. Đây còn là vị trí của hàng trong danh sách, nên bạn có thể hiển thị nó.

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

Đoạn này hiển thị số 0 bên cạnh bài hát đầu tiên vì Dart bắt đầu đếm từ 0. Mọi người đếm từ 1, nên hãy hiển thị index + 1. Phép tính bên trong chuỗi cần đặt trong dấu ngoặc nhọn: '${index + 1}'.

Thử thách

Dễ

Đánh số các bài hát: thêm vào mỗi ListTile một CircleAvatar trong leading:, hiển thị số thứ tự của bài hát, bắt đầu từ 1 cho Morning Light.

Tự làm thử

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