عرض قائمة في فلاتر ListView Widget

ListView Widget

استخدام  ListView Widget في تطوير تطبيقات Flutter 

مقدمة:

في عالم تطوير التطبيقات باستخدام Flutter، يُعتبر ListView واحدًا من الودجت الأساسية والأكثر استخدامًا لعرض البيانات بشكل منظم ومتسلسل داخل واجهة المستخدم. يوفر ListView وسيلة فعّالة لعرض قوائم البيانات، سواء كانت قوائم ثابتة المحتوى أو قوائم ديناميكية تتغير باستمرار. تعتبر هذه التقنية أساسية لتطوير تطبيقات Flutter التي تتطلب عرض مجموعة كبيرة من العناصر بشكل منظم ومنسق.

في هذا الدرس، سنقوم بفحص ListView widget في Flutter بشكل مفصل، بدءًا من مفهومه وكيفية استخدامه، وصولاً إلى تطبيقاته العملية. سنتعرف على الاستخدامات الشائعة لهذا الودجت، وكيفية تخصيصه وتطبيقه في تطوير التطبيقات بشكل فعّال ومتقن. سنستعرض الأساليب والتقنيات المختلفة لاستخدامه، مع التركيز على الأمثلة العملية والتطبيقات الحقيقية التي تساعد في فهم عملية عمل هذا الودجت بشكل أفضل.

سوف نقوم أيضًا بمناقشة الفروق بين ListView وودجات أخرى في Flutter، بالإضافة إلى استكشاف الأسئلة الشائعة والاختلافات بين مختلف الأنواع من ListView مثل ListView.builder و ListView.separated. تهدف هذه المقدمة إلى توفير فهم شامل وعميق لـ ListView widget في Flutter ودوره في تطوير تطبيقات Flutter الحديثة والمبتكرة.

ما المقصود ب:ListView widget in Flutter

Widget ListView في Flutter هو عبارة عن واجهة مستخدم تستخدم لعرض قائمة من العناصر بطريقة منسقة وقابلة للتمرير. يعد ListView من العناصر الأساسية في بناء تطبيقات Flutter حيث يسمح بعرض مجموعة كبيرة من العناصر بدون الحاجة إلى مساحة شاشة كافية لعرضها كلها في وقت واحد. يمكن استخدام ListView لعرض النصوص، الصور، أو أي نوع من الوجوه الرسومية الأخرى.

تعتمد ListView على بنية قائمة منسقة تسمح للمستخدم بالتمرير بين العناصر بسلاسة في اتجاهين (عمودي أو أفقي)، حسب الاحتياجات. كما يتضمن ListView العديد من الخصائص التي يمكن تخصيصها، مثل تحديد الحجم الافتراضي للعناصر، وتخصيص الهوامش والحواف، وتحديد طرق التمرير، وإضافة تأثيرات تجميلية وتفاعلية.

باستخدام ListView، يمكنك بناء تطبيقات Flutter المتنوعة التي تعتمد بشكل كبير على عرض البيانات بشكل قائمة، مثل التطبيقات الاجتماعية، التطبيقات الخدمية، وتطبيقات الألعاب التي تحتاج إلى عرض قوائم للعناصر المختلفة.

خطوة بخطو كيف ننشيء ListView widget؟

لإنشاء ListView widget في تطبيق Flutter، يمكنك اتباع الخطوات التالية:

إضافة استيرادات ضرورية:

قبل استخدام ListView، يجب علينا استيراد المكتبة التي تحتوي عليها. يتم ذلك عادةً في قسم الاستيرادات في ملف الـ Dart الخاص بالواجهة.

import 'package:flutter/material.dart';

إنشاء قائمة من العناصر:
قبل تحديد كيفية عرض العناصر، يجب عليك إنشاء قائمة تحتوي على العناصر التي ترغب في عرضها في ListView.

List<String> items = ['Item 1', 'Item 2', 'Item 3'];

استخدام ListView Widget:
بعد ذلك، قم بتضمين ListView في شجرة الواجهة بالطريقة التالية:

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

itemCount: يحدد عدد العناصر التي ستعرض في القائمة.
itemBuilder: يحدد كيفية بناء كل عنصر في القائمة.

يتلقى دالة itemBuilder معلومات حول الموقع الحالي للعنصر ومن ثم يجب علينا إرجاع واجهة مستخدم لهذا العنصر.

في المثال أعلاه، يتم إنشاء عنصر ListTile لكل عنصر في القائمة.

استخدام ListView بأسلوب آخر:
يمكنك استخدام ListView بأسلوب آخر إذا كانت البيانات ثابتة ولا تتغير، مثل:

ListView(
children: [
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
),
ListTile(
title: Text('Item 3'),
),
],
)

في هذا المثال، يتم تحديد العناصر مباشرة كأطفال في ListView.

هذه هي الخطوات الأساسية لإنشاء ListView widget في تطبيق Flutter.

يمكنك تخصيص المظهر والسلوك بمزيد من التعديلات وفقًا لاحتياجات تطبيقك.

تطبيق شامل مع الشرح خطوة بخطوة عن استخدام ListView

 دعونا ننشء تطبيقًا بسيطًا يستخدم ListView في تطبيق Flutter لعرض قائمة بسيطة من العناصر. سيحتوي التطبيق على قائمة من الأسماء وعند النقر على أي عنصر في القائمة، سيتم عرض رسالة توضح العنصر الذي تم النقر عليه. لنبدأ:

إعداد المشروع:
نقم بإنشاء تطبيق Flutter جديد عبر استخدام أحد محررات النصوص المفضلة لديك أو من خلال سطر الأوامر.

flutter create listview_example

تعديل ملف الـ Dart الرئيسي:
نقم بتعديل ملف main.dart واستبدل الشيفرة الخاصة به بالشيفرة التالية:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListView Example',
home: MyListView(),
);
}
}

class MyListView extends StatelessWidget {
final List<String> items = [
'Omar',
'Gogo',
'Adam',
'Elin',
'Ahmed',
'El-Rayan',
'Mohammad',
'Kamal',
'Ali',
'Gamal',
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView Example'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('You tapped on ${items[index]}')),
);
},
);
},
),
);
}
}

تحليل الشيفرة:

MyApp: هو الفئة الرئيسية التي تقوم بتشغيل التطبيق وتعيين MyListView كصفحة البداية.
MyListView: هي الفئة التي تحتوي على ListView. يتم استخدام ListView.builder لبناء قائمة ديناميكية بناءً على عدد العناصر في items.
ListTile: يتم استخدامه لعرض كل عنصر في القائمة بشكل منفصل.
onTap: يتم استخدامه لتحديد سلوك عند النقر على عنصر في القائمة.

في هذا المثال، يتم عرض رسالة SnackBar توضح العنصر الذي تم النقر عليه.

تشغيل التطبيق:
قم بتشغيل التطبيق عبر محرر النصوص الخاص بك أو عبر سطر الأوامر:

flutter run
بعد التشغيل، يجب أن ترى تطبيقًا يعرض قائمة من الأسماء، وعند النقر على أحد الأسماء، ستظهر رسالة توضح العنصر الذي تم النقر عليه.

هذا تطبيق بسيط يستخدم ListView في Flutter. يمكنك توسيعه وتخصيصه حسب احتياجات تطبيقك المحدد.

تطبيق 1: عرض قائمة المواد الدراسية

لدينا قائمة بالمواد الدراسية نريد استخدام ListView في التعامل معها اشرح تطبيق حول ذلك

 دعنا نقوم بإنشاء تطبيق بسيط باستخدام ListView لعرض قائمة المواد الدراسية. سنقوم بتضمين أسماء المواد الدراسية في القائمة، وعند النقر على كل مادة، سيتم عرض رسالة توضيحية بأنه تم اختيار تلك المادة. لنبدأ:

إنشاء مشروع Flutter جديد:
نقم بإنشاء مشروع جديد في Flutter باستخدام أحد محررات النصوص المفضلة لديك، أو باستخدام سطر الأوامر.

flutter create subject_listview_app

تحرير ملف lib/main.dart:
نقم بتحرير ملف main.dart لإنشاء تطبيق Flutter.

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Subject ListView',
home: SubjectListScreen(),
);
}
}

class SubjectListScreen extends StatelessWidget {
final List<String> subjects = [
'الرياضيات',
'العلوم',
'التاريخ',
'الجغرافيا',
'اللغة الإنجليزية',
'الفنون'
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('قائمة المواد الدراسية'),
),
body: ListView.builder(
itemCount: subjects.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(subjects[index]),
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("تم اختيار المادة"),
content: Text("لقد تم اختيار ${subjects[index]}"),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("حسناً"),
),
],
);
},
);
},
);
},
),
);
}
}

شرح الكود:

يتم استيراد material.dart لاستخدام واجهات المستخدم الموجودة في Flutter.
تم إنشاء MyApp كفئة StatelessWidget تقوم بإرجاع MaterialApp والتي تحتوي على SubjectListScreen.
تم إنشاء SubjectListScreen كفئة StatelessWidget أيضًا. تحتوي على قائمة المواد الدراسية وتستخدم ListView.builder لعرضها.
استخدمنا ListView.builder للتعامل مع قائمة المواد الدراسية. لقد قمنا بتحديد itemCount ليكون عدد العناصر في القائمة، و itemBuilder لبناء كل عنصر.
في كل عنصر، قمنا بإنشاء ListTile لعرض اسم المادة. عند النقر على أي مادة، ستظهر رسالة توضيحية باسم تلك المادة.
تشغيل التطبيق:
يمكنك تشغيل التطبيق على محاكي الجهاز أو جهازك الفعلي باستخدام أمر flutter run.

بهذه الطريقة، يمكن للمستخدمين الآن استعراض قائمة المواد الدراسية والنقر على أي مادة لعرض رسالة توضيحية بأن تلك المادة تم اختيارها.

شجرة الويدجت الهرمية لهذا التطبيق

شجرة الويدجت الهرمية (Widget Tree) توضح تركيب التطبيق بشكل هرمي، حيث يتم عرض كل ويدجت وعلاقتها بالويدجت الأب والأطفال. إليك شجرة الويدجت الهرمية لتطبيقنا:

- MyApp
  - MaterialApp
    - Scaffold
      - AppBar
      - ListView.builder
        - ListTile
        - ListTile
        - ListTile
        - ListTile
        - ListTile
        - ListTile

MyApp: يعتبر المدخل الرئيسي للتطبيق.
MaterialApp: يُمثل التطبيق بشكل عام، ويحتوي على السمة والمظهر العام للتطبيق.
Scaffold: يوفر هيكلًا للواجهة ومكونات مثل AppBar و Body.
AppBar: يعرض الشريط العلوي للتطبيق مع العنوان.
ListView.builder: يستخدم لعرض قائمة المواد الدراسية بشكل ديناميكي.
ListTile: يعرض كل عنصر في القائمة بعنوانه.

تطبيق 3 عن استخدامات ListView widget in Flutter

لنقم بإنشاء تطبيق آخر يستخدم ListView widget في Flutter، ولكن هذه المرة سنقوم بعرض قائمة من الصور بدلاً من النصوص. سيكون الهدف هو عرض مجموعة من الصور بشكل قابل للتمرير. لنبدأ:

إضافة الصور:
قم بتحميل مجموعة من الصور ووضعها داخل مجلد assets في مشروع Flutter الخاص بك.

تحرير ملف pubspec.yaml:
قم بتعريف المسار النسبي للصور داخل ملف pubspec.yaml كما يلي:

نضع هذا الكود في الملف المذكور

flutter:
assets:
- assets/image1.jpg
- assets/image2.jpg
- assets/image3.jpg

# قم بإضافة المزيد من المسارات حسب الحاجة

تحرير ملف lib/main.dart:
قم بتحرير ملف main.dart لعرض الصور في ListView.

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image ListView',
home: ImageListScreen(),
);
}
}

class ImageListScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('قائمة الصور'),
),
body: ListView(
children: [
Image.asset('assets/image1.jpg'),
Image.asset('assets/image2.jpg'),
Image.asset('assets/image3.jpg'),
// أضف المزيد من الصور حسب الحاجة
],
),
);
}
}

تشغيل التطبيق:
نقم بتشغيل التطبيق على محاكي الجهاز أو جهازك الفعلي باستخدام أمر flutter run.

هذا التطبيق سيعرض الصور التي قمت بتضمينها في مجلد assets باستخدام ListView، مما يتيح للمستخدمين التمرير عبرها بسهولة. يمكنك أيضًا تخصيص التطبيق بإضافة مزيد من الصور أو تطبيق تعديلات أخرى حسب الحاجة.

تطبيق 4 :تطبيق عن استخدام ListView widget in Flutter

 لنقم بإنشاء تطبيق آخر يستخدم ListView في Flutter، ولكن هذه المرة سنقوم بعرض قائمة من العناصر التي تحتوي على بيانات نصية مثل الاسم والعمر.

سنقوم بإنشاء قائمة بسيطة لعرض أسماء الأشخاص وأعمارهم. لنبدأ:

تحرير ملف lib/main.dart:
نقم بتحرير ملف main.dart لإنشاء التطبيق.

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'قائمة الأشخاص',
home: PersonListScreen(),
);
}
}

class PersonListScreen extends StatelessWidget {
// بيانات الأشخاص
final List<Map<String, dynamic>> people = [
{'name': 'أحمد', 'age': 25},
{'name': 'محمد', 'age': 30},
{'name': 'سارة', 'age': 28},
{'name': 'لينا', 'age': 22},
{'name': 'علي', 'age': 35},
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('قائمة الأشخاص'),
),
body: ListView.builder(
itemCount: people.length,
itemBuilder: (context, index) {
final person = people[index];
return ListTile(
title: Text(person['name']),
subtitle: Text('العمر: ${person['age']} سنة'),
);
},
),
);
}
}

شرح الكود:

تم إنشاء MyApp كفئة StatelessWidget لإرجاع MaterialApp مع PersonListScreen كالصفحة الرئيسية.
PersonListScreen تستخدم Scaffold لتقديم التصميم الأساسي للواجهة.
ListView.builder يستخدم لبناء القائمة بشكل ديناميكي باستخدام بيانات الأشخاص المعرفة مسبقًا.
كل عنصر في القائمة ممثل بـ ListTile يعرض اسم الشخص وعمره.

تشغيل التطبيق:
نستخدم أمر flutter run لتشغيل التطبيق على محاكي الجهاز أو جهازك الفعلي.

بهذا، ستتمكن من إنشاء تطبيق بسيط يستخدم ListView لعرض قائمة من الأشخاص ببياناتهم مثل الاسم والعمر.

تطبيق 5:تطبيق اخر اكثر تقدما عن استخدام :ListView widget in Flutter

لنقم بإنشاء تطبيق متقدم يستخدم ListView widget في Flutter لعرض قائمة من العناصر بيانات متعددة الأعمدة. سنقوم بإنشاء تطبيق يعرض قائمة من الأفلام تحتوي على العنوان، الوصف والتقييم. سنستخدم بيانات مزيفة لأغراض التوضيح. لنبدأ:

تحضير البيانات التجريبية:
نقم بإنشاء قائمة من الأفلام الوهمية بمعلومات مثل العنوان، الوصف والتقييم.

List<Map<String, dynamic>> movies = [
{
'title': 'Inception',
'description': 'A thief who steals corporate secrets through the use of dream-sharing technology.',
'rating': 8.8,
},
{
'title': 'Interstellar',
'description': 'A team of explorers travel through a wormhole in space in an attempt to ensure humanity\'s survival.',
'rating': 8.6,
},
// إضافة المزيد من الأفلام حسب الحاجة
];

إنشاء ListView:
نقم بإنشاء ListView.builder لعرض قائمة الأفلام.

List<Map<String, dynamic>> movies = [
{
'title': 'Inception',
'description': 'A thief who steals corporate secrets through the use of dream-sharing technology.',
'rating': 8.8,
},
{
'title': 'Interstellar',
'description': 'A team of explorers travel through a wormhole in space in an attempt to ensure humanity\'s survival.',
'rating': 8.6,
},
// إضافة المزيد من الأفلام حسب الحاجة
];

تكملة الكود:
قم بإكمال الكود داخل main.dart بناءً على البيانات والـ ListView المُعرف أعلاه.

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Movies List',
home: Scaffold(
appBar: AppBar(
title: Text('أفلام'),
),
body: MovieList(),
),
);
}
}

class MovieList extends StatelessWidget {
final List<Map<String, dynamic>> movies = [
{
'title': 'Inception',
'description': 'A thief who steals corporate secrets through the use of dream-sharing technology.',
'rating': 8.8,
},
{
'title': 'Interstellar',
'description': 'A team of explorers travel through a wormhole in space in an attempt to ensure humanity\'s survival.',
'rating': 8.6,
},
// إضافة المزيد من الأفلام حسب الحاجة
];

@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: movies.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(movies[index]['title']),
subtitle: Text(movies[index]['description']),
trailing: Text('Rating: ${movies[index]['rating']}'),
onTap: () {
// يمكنك إضافة مزيد من المنطق هنا عند النقر على العنصر
},
);
},
);
}
}

تشغيل التطبيق:
قم بتشغيل التطبيق على محاكي الجهاز أو جهازك الفعلي باستخدام أمر flutter run.

هذا التطبيق يعرض قائمة من الأفلام مع العنوان، الوصف والتقييم. يمكنك توسيع هذا التطبيق بإضافة مزيد من البيانات أو تخصيص العرض بما يتناسب مع احتياجات التطبيق الفعلية.

الكود النهائي

ها هو الكود النهائي لتطبيق استخدام ListView في Flutter لعرض قائمة من الأفلام:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Movies List',
home: Scaffold(
appBar: AppBar(
title: Text('أفلام'),
),
body: MovieList(),
),
);
}
}

class MovieList extends StatelessWidget {
final List<Map<String, dynamic>> movies = [
{
'title': 'Inception',
'description': 'A thief who steals corporate secrets through the use of dream-sharing technology.',
'rating': 8.8,
},
{
'title': 'Interstellar',
'description': 'A team of explorers travel through a wormhole in space in an attempt to ensure humanity\'s survival.',
'rating': 8.6,
},
// إضافة المزيد من الأفلام حسب الحاجة
];

@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: movies.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(movies[index]['title']),
subtitle: Text(movies[index]['description']),
trailing: Text('Rating: ${movies[index]['rating']}'),
onTap: () {
// يمكنك إضافة مزيد من المنطق هنا عند النقر على العنصر
},
);
},
);
}
}

نقم بنسخ الكود أعلاه ولصقه في ملف main.dart في مشروع Flutter  .

سيقوم التطبيق بعرض قائمة من الأفلام مع العنوان، الوصف والتقييم.

سأشرح الكود في أسطر منفصلة:

Import Statements (بيانات الاستيراد):
في هذا الجزء، نقوم بإستيراد المكتبات التي سنحتاجها في التطبيق.

import 'package:flutter/material.dart';

Main Function (الدالة الرئيسية):
تبدأ تطبيق Flutter بتشغيل الدالة main، والتي تقوم بتشغيل تطبيق Flutter.

void main() {
runApp(MyApp());
}

MyApp Class (فئة التطبيق):

هذه الفئة هي المسؤولة عن بناء وتصميم التطبيق.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Movies List',
home: Scaffold(
appBar: AppBar(
title: Text('أفلام'),
),
body: MovieList(),
),
);
}
}

MovieList Class (فئة قائمة الأفلام):
هذه الفئة هي المسؤولة عن عرض قائمة الأفلام باستخدام ListView.

class MovieList extends StatelessWidget {
final List<Map<String, dynamic>> movies = [
{
'title': 'Inception',
'description': 'A thief who steals corporate secrets through the use of dream-sharing technology.',
'rating': 8.8,
},
{
'title': 'Interstellar',
'description': 'A team of explorers travel through a wormhole in space in an attempt to ensure humanity\'s survival.',
'rating': 8.6,
},
// إضافة المزيد من الأفلام حسب الحاجة
];

@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: movies.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(movies[index]['title']),
subtitle: Text(movies[index]['description']),
trailing: Text('Rating: ${movies[index]['rating']}'),
onTap: () {
// يمكنك إضافة مزيد من المنطق هنا عند النقر على العنصر
},
);
},
);
}
}

RunApp Function (دالة تشغيل التطبيق):
تقوم بتشغيل التطبيق وعرض الشاشة الرئيسية المحددة.

void main() {
runApp(MyApp());
}

هذه هي الأساسيات التي يحتاج إلى معرفتها لفهم الكود. يستخدم الكود ListView لعرض قائمة من الأفلام، حيث يتم تمثيل كل فيلم باستخدام ListTile، ويتم استخدام ListView.builder للسماح بعرض قوائم طويلة بشكل فعال.

شجرة الودجت الهرمية لهذا التطبيق

شجرة الويدجت الهرمية لتطبيقنا هي كالتالي:

- MyApp
  - MaterialApp
    - Scaffold
      - AppBar
      - MovieList
        - ListView.builder
          - ListTile (Movie 1)
          - ListTile (Movie 2)
          - ...
          - ListTile (Movie n)

MyApp: يُعتبر المدخل الرئيسي للتطبيق.
MaterialApp: يُمثل التطبيق بشكل عام ويحتوي على السمة والمظهر العام للتطبيق.
Scaffold: يُستخدم لإنشاء واجهة المستخدم الأساسية بما في ذلك شريط العنوان.
AppBar: يُعرض شريط العنوان للتطبيق.
MovieList: يُعرض قائمة الأفلام.
ListView.builder: يُستخدم لإنشاء ListView بشكل فعال.
ListTile: يُعرض كل عنصر في القائمة، حيث يحتوي على معلومات حول الفيلم مثل العنوان والوصف والتقييم.
.

اختبار عن ListView widget in Flutter مع الاجابات

 كويز بسيط حول ListView widget في Flutter مع الإجابات:

السؤال 1:
ما هو الهدف الرئيسي لاستخدام ListView widget في Flutter؟

أ) عرض قائمة من العناصر بشكل منسق ومتسلسل داخل واجهة المستخدم
ب) تحقيق التنقل بين شاشات التطبيق
ج) إضافة خصائص الرسوم المتحركة للعناصر في التطبيق
د) التحكم في تنسيق العناصر داخل الشاشة

الإجابة الصحيحة:
أ) عرض قائمة من العناصر بشكل منسق ومتسلسل داخل واجهة المستخدم

السؤال2:
ما هو الفرق بين ListView و Column في Flutter؟

أ) ListView يستخدم لتنظيم العناصر بشكل عمودي فقط، بينما Column يستخدم لتنظيم العناصر بشكل أفقي فقط
ب) ListView يسمح بالتمرير بين العناصر عند الحاجة، بينما Column لا يسمح بذلك
ج) ListView يستخدم لتنظيم العناصر بشكل عمودي ويتيح التمرير بينها، بينما Column يستخدم لتنظيم العناصر بشكل أفقي فقط
د) لا فرق بينهما، يمكن استخدام أيًا منهما بدون اختلاف

الإجابة الصحيحة:
ج) ListView يستخدم لتنظيم العناصر بشكل عمودي ويتيح التمرير بينها، بينما Column يستخدم لتنظيم العناصر بشكل أفقي فقط

السؤال 3:
ما هو الفرق بين ListView.builder و ListView في Flutter؟

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

الإجابة الصحيحة:
ب) ListView.builder يُستخدم لعرض قوائم ديناميكية تتغير باستمرار ويمكنه التعامل مع عدد كبير من العناصر بكفاءة، بينما ListView يُستخدم لعرض قوائم ثابتة المحتوى

السؤال 4:
ما هو الفرق بين ListView و GridView في Flutter؟

أ) ListView يستخدم لعرض العناصر بشكل أفقي، بينما GridView يستخدم لعرضها بشكل عمودي
ب) ListView يستخدم لعرض العناصر بشكل عمودي مع تمكين التمرير، بينما GridView يستخدم لعرضها بشكل أفقي مع التمرير
ج) ListView يستخدم لعرض العناصر بشكل عمودي، بينما GridView يستخدم لعرضها بشكل عمودي وأفقي داخل شبكة من الخلايا
د) لا فرق بينهما، يمكن استخدام أيًا منهما بدون اختلاف

الإجابة الصحيحة:
ج) ListView يستخدم لعرض العناصر بشكل عمودي، بينما GridView يستخدم لعرضها بشكل عمودي وأفقي داخل شبكة من الخلايا

السؤال 5:
ما هو الفرق بين ListView.separated و ListView.builder في Flutter؟

أ) ListView.separated يُستخدم لعرض قائمة من العناصر مع فواصل بينها، بينما ListView.builder يستخدم لعرض قائمة من العناصر بدون فواصل
ب) ListView.separated يُستخدم لعرض قائمة من العناصر بشكل ديناميكي وبفواصل، بينما ListView.builder يستخدم لعرض قائمة ثابتة المحتوى
ج) لا فرق بينهما، كلاهما يُستخدم لنفس الغرض
د) ListView.separated يستخدم لعرض قائمة ديناميكية تتغير باستمرار، بينما ListView.builder يستخدم لعرض قائمة ثابتة المحتوى

الإجابة الصحيحة:
أ) ListView.separated يُستخدم لعرض قائمة من العناصر مع فواصل بينها، بينما ListView.builder يستخدم لعرض قائمة من العناصر بدون فواصل

السؤال 6:
ما هو الفرق بين ListView و SingleChildScrollView في Flutter؟

أ) ListView يستخدم لعرض العناصر بشكل ثابت، بينما SingleChildScrollView يستخدم لتمكين التمرير بين محتوى يفوق الشاشة
ب) ListView يستخدم لتمكين التمرير بين محتوى يفوق الشاشة، بينما SingleChildScrollView يستخدم لعرض العناصر بشكل ثابت
ج) ListView يستخدم لتمكين التمرير بين محتوى يفوق الشاشة وتنظيم العناصر بشكل عمودي، بينما SingleChildScrollView يستخدم لتمكين التمرير بين محتوى يفوق الشاشة بشكل أفقي
د) لا فرق بينهما، كلاهما يستخدمان لتمكين التمرير بين محتوى يفوق الشاشة

الإجابة الصحيحة:
ب) ListView يستخدم لتمكين التمرير بين محتوى يفوق الشاشة، بينما SingleChildScrollView يستخدم لعرض العناصر بشكل ثابت