Tạo lưới bằng trình dựng

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 11 trên 33.

Một lưới gồm một trăm ảnh cũng gặp vấn đề như danh sách dài: bạn không thể viết từng ô, còn tạo tất cả cùng lúc thì chậm. GridView.builder tạo các ô khi chúng cuộn vào màn hình, giống như ListView.builder:

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

Tên dài SliverGridDelegateWithFixedCrossAxisCount chỉ bố cục của lưới: một số lượng ô cố định trên mỗi hàng. Nó nhận crossAxisCount và khoảng cách, giống như cách GridView.count nhận trực tiếp các giá trị này.

itemCount và itemBuilder hoạt động giống như trong danh sách: hàm tạo nhận index của từng ô, bắt đầu từ 0.

Thử thách

Dễ

Lịch chỉ hiển thị tuần đầu tiên của tháng 6, được viết thủ công. Thay GridView.count bằng GridView.builder để hiển thị đủ 30 ngày, đánh số từ 1, mỗi hàng có bảy ngày.

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