الصفوف مع الفواصل
جزء من قسم القوائم والشاشات في رحلة 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]));
},
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس القوائم والشاشات
1قوائم قابلة للتمرير
قائمة قابلة للتمريرعناصر القائمةالبداية والنهايةاضغط على عنصر قائمةفواصل بين الصفوف6علامات التبويب والأدراج والتمرير بالسحب
علامات التبويب مع شريط تنقلأيقونات ممتلئة لعلامة التبويب المفتوحةدرج جانبياسحب للحذفالتراجع عن السحبتدرّب بنفسك: مترجم Flutter عبر الإنترنت