구분선이 있는 행

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 8번째.

긴 목록은 행 사이에 선이 있으면 더 읽기 좋습니다. 빌더를 사용하면 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]));
          },
        ),
      ),
    );
  }
}