Tạo hàng bằng bộ dự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 6 trên 33.

Một danh sách phát có thể chứa hàng nghìn bài hát. Không thể viết một ListTile cho mỗi bài hát, còn tạo tất cả cùng lúc sẽ rất chậm. ListView.builder chỉ tạo từng hàng khi hàng đó xuất hiện trên màn hình trong lúc cuộn.

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

itemCount cho biết có bao nhiêu hàng. itemBuilder là một hàm mà danh sách gọi cho từng hàng, kèm theo index của hàng: 0 cho hàng đầu tiên, 1 cho hàng tiếp theo, cứ thế tiếp tục. Hàm này trả về tiện ích cho hàng đó.

Dùng songs.length cho itemCount để danh sách tăng theo số bài hát. Nếu dùng một số lớn hơn số bài hát trong danh sách, ứng dụng sẽ tìm một bài hát không tồn tại và dừng lại với lỗi RangeError.

Thử thách

Dễ

Danh sách phát có 15 bài hát, nhưng chỉ hiển thị 3 bài. Hãy sửa itemCount để mọi bài hát đều có trong danh sách, đến tận Starfall, và vẫn chính xác khi bạn thêm bài hát.

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