构建器生成的网格

本课属于 Coddy Flutter 学习旅程的“列表和屏幕”单元。第 11 课，共 33 课。

包含 100 张照片的网格也有和长列表一样的问题：你无法逐个编写每个网格项，而且一次性构建所有网格项会很慢。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 开始。

挑战

简单

日历只显示了手写的 6 月第一周。把 GridView.count 替换为 GridView.builder，显示全部 30 天，并从 1 开始编号，每行显示 7 天。

亲手试试

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