Budowanie wierszy za pomocą konstruktora

Część sekcji Listy i ekrany ścieżki Flutter w Coddy. Lekcja 6 z 33.

Lista odtwarzania może zawierać tysiące utworów. Napisanie ListTile dla każdego z nich nie jest możliwe, a utworzenie wszystkich naraz byłoby powolne. ListView.builder tworzy każdy wiersz dopiero wtedy, gdy pojawi się on na ekranie podczas przewijania.

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

itemCount określa liczbę wierszy. itemBuilder to funkcja, którą lista wywołuje dla każdego wiersza, przekazując jego index: 0 dla pierwszego wiersza, 1 dla następnego i tak dalej. Zwraca ona widget dla danego wiersza.

Użyj songs.length jako wartości itemCount, aby lista rosła wraz z listą utworów. Liczba większa niż liczba utworów na liście powoduje próbę pobrania nieistniejącego utworu, a aplikacja zatrzymuje się z błędem RangeError.

Wyzwanie

Łatwy

Playlista zawiera 15 utworów, ale wyświetlają się tylko 3. Popraw itemCount, aby wszystkie utwory znalazły się na liście, aż do Starfall, i aby liczba pozostała prawidłowa po dodaniu utworów.

Spróbuj swoich sił

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