إنشاء الصفوف باستخدام أداة البناء

جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 6 من 33.

يمكن لقائمة تشغيل أن تحتوي على آلاف الأغاني. كتابة ListTile لكل أغنية غير ممكنة، وإنشاءها كلها دفعة واحدة سيكون بطيئًا. ينشئ ListView.builder كل صف فقط عندما يظهر أثناء التمرير.

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

تحدد itemCount عدد الصفوف. أما itemBuilder فهي دالة تستدعيها القائمة لكل صف، مع index الخاص بالصف: 0 للصف الأول، و1 للذي يليه، وهكذا. وتُرجع الأداة المرئية الخاصة بذلك الصف.

استخدم songs.length لـ itemCount، لكي يزداد طول القائمة عندما يزداد عدد الأغاني. فالعدد الأكبر من عدد عناصر القائمة يطلب أغنية غير موجودة، ويتوقف التطبيق مع ظهور RangeError.

التحدي

سهل

تحتوي قائمة التشغيل على 15 أغنية، لكن 3 أغانٍ فقط تظهر. أصلح itemCount حتى تظهر كل أغنية في القائمة، وصولًا إلى Starfall، وتظل القائمة صحيحة عند إضافة أغانٍ.

جرّب بنفسك

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