شبكة من البلاطات
جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 10 من 33.
يعرض معرض الصور أو الشاشة الرئيسية للتطبيق العناصر جنبًا إلى جنب في صفوف، وليس في عمود طويل واحد. ترتّب GridView.count عناصرها في شبكة وتتيح التمرير مثل القائمة:
GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
children: [
Container(color: Colors.red),
Container(color: Colors.blue),
Container(color: Colors.green),
],
)يحدّد crossAxisCount عدد المربعات في كل صف. تملأ المربعات الصفوف من اليسار إلى اليمين، ثم يبدأ صف جديد. كل مربع يكون مربع الشكل، وتتقاسم مربعات الصف عرضه.
يمثّل mainAxisSpacing المسافة بين الصفوف، ويمثّل crossAxisSpacing المسافة بين المربعات في الصف.
التحدي
سهلالألوان الستة مرتبة عموديًا في ListView، لون واحد في كل صف. اعرضها في شبكة تضم بلاطتين في كل صف بدلًا من ذلك: استخدم GridView.count مع crossAxisCount: 2. اترك مسافة قدرها 8 بكسلات بين البلاطات.
جرّب بنفسك
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('Colors')),
body: ListView(
padding: const EdgeInsets.all(8),
children: [
Container(
color: Colors.red,
alignment: Alignment.center,
child: const Text('Red'),
),
Container(
color: Colors.orange,
alignment: Alignment.center,
child: const Text('Orange'),
),
Container(
color: Colors.yellow,
alignment: Alignment.center,
child: const Text('Yellow'),
),
Container(
color: Colors.green,
alignment: Alignment.center,
child: const Text('Green'),
),
Container(
color: Colors.blue,
alignment: Alignment.center,
child: const Text('Blue'),
),
Container(
color: Colors.purple,
alignment: Alignment.center,
child: const Text('Purple'),
),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس القوائم والشاشات
1قوائم قابلة للتمرير
قائمة قابلة للتمريرعناصر القائمةالبداية والنهايةاضغط على عنصر قائمةفواصل بين الصفوف6علامات التبويب والأدراج والتمرير بالسحب
علامات التبويب مع شريط تنقلأيقونات ممتلئة لعلامة التبويب المفتوحةدرج جانبياسحب للحذفالتراجع عن السحبتدرّب بنفسك: مترجم Flutter عبر الإنترنت