Lưới ô

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 10 trên 33.

Thư viện ảnh hoặc màn hình chính của ứng dụng thường hiển thị các mục cạnh nhau theo hàng, thay vì xếp thành một cột dài. GridView.count sắp xếp các phần tử con thành lưới và cho phép cuộn như danh sách:

GridView.count(
  crossAxisCount: 2,
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
)

crossAxisCount là số ô trong mỗi hàng. Các ô lấp đầy từng hàng từ trái sang phải, rồi bắt đầu hàng mới. Mỗi ô là một hình vuông và các ô trong cùng một hàng chia đều chiều rộng của hàng.

mainAxisSpacing là khoảng cách giữa các hàng, còn crossAxisSpacing là khoảng cách giữa các ô trong một hàng.

Thử thách

Dễ

Sáu màu được xếp thành một ListView, mỗi hàng một màu. Thay vào đó, hãy hiển thị chúng trong một lưới có hai ô mỗi hàng: dùng GridView.count với crossAxisCount: 2. Giữ khoảng cách 8 pixel giữa các ô.

Tự làm thử

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