Siatka utworzona za pomocą kreatora

Część sekcji Listy i ekrany ścieżki Flutter w Coddy. Lekcja 11 z 33.

Siatka ze stu zdjęć ma ten sam problem co długa lista: nie możesz opisać każdego kafelka, a tworzenie ich wszystkich naraz jest powolne. GridView.builder tworzy kafelki w miarę przewijania, podobnie jak ListView.builder:

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

Długa nazwa, SliverGridDelegateWithFixedCrossAxisCount, określa układ siatki: stałą liczbę kafelków w każdym wierszu. Przyjmuje crossAxisCount i odstępy, które bezpośrednio przyjmowało GridView.count.

itemCount i itemBuilder działają tak samo jak w przypadku listy: konstruktor otrzymuje index każdego kafelka, zaczynając od 0.

Wyzwanie

Łatwy

Kalendarz pokazuje tylko pierwszy tydzień czerwca, wpisany ręcznie. Zastąp GridView.count elementem GridView.builder, który wyświetla wszystkie 30 dni, ponumerowane od 1, po siedem w każdym wierszu.

Spróbuj swoich sił

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'),
            ),
          ],
        ),
      ),
    );
  }
}