Menu
CoddyTech
flag Ar iconالعربيةdown icon

شبكة من البلاطات

جزء من قسم القوائم والشاشات في رحلة 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 المسافة بين المربعات في الصف.

challenge icon

التحدي

سهل

الألوان الستة مرتبة عموديًا في 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'),
            ),
          ],
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس القوائم والشاشات

تدرّب بنفسك: مترجم Flutter عبر الإنترنت