شبكة من أداة إنشاء

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

تواجه شبكة تضم مئة صورة المشكلة نفسها التي تواجهها قائمة طويلة: لا يمكنك كتابة كل عنصر، وإنشاء جميع العناصر دفعة واحدة بطيء. تنشئ GridView.builder العناصر عند ظهورها أثناء التمرير، مثل ListView.builder:

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemCount: photos.length,
  itemBuilder: (context, index) {
    return Image.network(photos[index]);
  },
)

الاسم الطويل، SliverGridDelegateWithFixedCrossAxisCount، يحدد تخطيط الشبكة: عددًا ثابتًا من العناصر في كل صف. وهو يأخذ crossAxisCount والتباعد اللذين كان GridView.count يأخذهما مباشرةً.

يعمل كل من itemCount وitemBuilder بالطريقة نفسها كما في القائمة: يحصل العنصر المنشئ على index الخاص بكل عنصر، بدءًا من 0.

التحدي

سهل

يعرض التقويم الأسبوع الأول من يونيو فقط، وقد كُتب يدويًا. استبدل GridView.count بـ GridView.builder لعرض الأيام الثلاثين كلها، مرقمةً من 1، بواقع سبعة أيام في كل صف.

جرّب بنفسك

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('June')),
        body: GridView.count(
          padding: const EdgeInsets.all(8),
          crossAxisCount: 7,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          children: [
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('1'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('2'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('3'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('4'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('5'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('6'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('7'),
            ),
          ],
        ),
      ),
    );
  }
}