Hàng có dấu phân cách

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 8 trên 33.

Một danh sách dài sẽ dễ đọc hơn khi có một đường kẻ giữa các hàng. Với một builder, bạn không thể tự viết từng Divider, vì vậy có một kiểu danh sách builder thứ hai giúp thêm chúng cho bạn:

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

separatorBuilder được gọi cho mỗi khoảng trống giữa hai hàng và trả về widget sẽ nằm ở đó. Danh sách có 15 hàng sẽ có 14 dấu phân cách, và không bao giờ có dấu phân cách sau hàng cuối cùng.

Dấu phân cách có thể là bất kỳ widget nào: Divider hoặc SizedBox để tạo khoảng trống đơn thuần.

Thử thách

Dễ

Thay đổi danh sách phát thành ListView.separated với một Divider giữa mỗi hai 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: songs.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(songs[index]));
          },
        ),
      ),
    );
  }
}