שורות עם מפרידים

חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 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]));
          },
        ),
      ),
    );
  }
}