Menu
CoddyTech

Строки с разделителями

Часть раздела Списки и экраны путешествия по Flutter на Coddy. Урок 8 из 33.

Длинный список легче читать, если между строками есть разделитель. При использовании builder нельзя вручную добавлять Divider, поэтому существует второй вид списка с builder, который добавляет их за вас:

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 для обычного пустого пространства.

challenge icon

Задание

Легко

Измени список воспроизведения на 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]));
          },
        ),
      ),
    );
  }
}
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Списки и экраны

Потренируйтесь самостоятельно: Онлайн-компилятор Flutter