磁贴网格

本课属于 Coddy Flutter 学习旅程的“列表和屏幕”单元。第 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'),
            ),
          ],
        ),
      ),
    );
  }
}