带分隔符的行

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

长列表在每行之间加一条分隔线，读起来会更清晰。使用构建器时，你无法手动编写 Divider，因此还有一种构建器列表可以帮你添加分隔线：

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

每当两行之间有间隔时，都会调用一次 separatorBuilder，并返回要放在那里的组件。15 行的列表有 14 个分隔线，最后一行后面不会有分隔线。

分隔线可以是任意组件：可以是 Divider，也可以用 SizedBox 留出空白。

挑战

简单

将播放列表改为 ListView.separated，并在每两首歌曲之间添加一个 Divider。

亲手试试

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