Chào các em, hôm nay anh Creyt sẽ bật mí một "bí kíp võ công" trong Flutter giúp danh sách (list) của chúng ta mượt mà như lướt TikTok, không giật lag dù có hàng nghìn item. Đó chính là SliverFixedExtentList – Nghe tên thôi đã thấy "chuyên nghiệp" rồi đúng không? Đừng lo, anh sẽ "giải mã" nó theo cách dễ hiểu nhất, đảm bảo các em "ngấm" ngay!
1. SliverFixedExtentList là gì và để làm gì?
Tưởng tượng thế này, em có một thư viện sách khổng lồ, và tất cả các cuốn sách trong thư viện đó đều có chiều cao y hệt nhau. Khi em cần tìm một cuốn sách nào đó, người thủ thư (hay chính là Flutter engine) sẽ không cần phải đo đạc từng cuốn một để xem nó cao bao nhiêu rồi mới biết vị trí của nó trên kệ. Thay vào đó, anh ta chỉ cần biết "À, mỗi cuốn cao 20cm, vậy cuốn thứ 100 sẽ nằm ở vị trí 2000cm tính từ đầu kệ." Việc này nhanh hơn gấp bội!
SliverFixedExtentList chính là cái "kệ sách" đặc biệt đó trong Flutter. Nó là một loại Sliver (một phần của vùng cuộn) được thiết kế để hiển thị các danh sách mà tất cả các item con đều có cùng một chiều cao cố định.
Mục đích chính? Tối ưu hiệu suất! Khi Flutter biết trước chiều cao của mỗi item, nó không cần phải tính toán lại kích thước cho từng item mỗi khi danh sách cuộn. Điều này giúp giảm tải cho CPU, làm cho việc cuộn danh sách trở nên siêu mượt mà, đặc biệt với những danh sách dài lê thê.
2. Code Ví Dụ Minh Hoạ Rõ Ràng
Để sử dụng SliverFixedExtentList, chúng ta thường đặt nó bên trong một CustomScrollView (vì Sliver chỉ sống trong CustomScrollView mà thôi). Hãy xem ví dụ dưới đây:
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(
title: 'SliverFixedExtentList Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: Text('Anh Creyt dạy Fixed List'),
background: Image(
image: NetworkImage('https://picsum.photos/800/600'),
fit: BoxFit.cover,
),
),
),
// Đây rồi! SliverFixedExtentList của chúng ta
SliverFixedExtentList(
// 'itemExtent' là chiều cao CỐ ĐỊNH của MỖI item.
// Đây là yếu tố then chốt cho hiệu suất!
itemExtent: 80.0, // Ví dụ: mỗi item cao 80 pixel
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: index % 2 == 0 ? Colors.blue[100] : Colors.blue[300],
child: Text(
'Item số ${index + 1}',
style: const TextStyle(fontSize: 20, color: Colors.black87),
),
);
},
childCount: 50, // Tạo 50 item để dễ dàng cuộn thử
),
),
],
),
);
}
}
Trong ví dụ trên, điểm mấu chốt là thuộc tính itemExtent: 80.0. Nó nói cho Flutter biết rằng MỖI item trong danh sách này đều cao 80 pixel. Nhờ đó, Flutter có thể tính toán vị trí và hiển thị các item một cách cực kỳ hiệu quả.
3. Mẹo (Best Practices) để ghi nhớ và dùng thực tế
- Khi nào dùng? Chỉ dùng
SliverFixedExtentListkhi bạn chắc chắn rằng TẤT CẢ các item trong danh sách của bạn có cùng một chiều cao. Nếu item có chiều cao khác nhau (ví dụ: tin nhắn chat có thể dài ngắn khác nhau), thì bạn phải dùngSliverListthông thường, dù hiệu suất có thể không bằng. itemExtentlà "chìa khóa vàng": Thuộc tính này là linh hồn củaSliverFixedExtentList. Đừng quên set nó và hãy đảm bảo giá trị của nó chính xác bằng chiều cao của item con. Nếu bạn set sai, giao diện có thể bị lỗi hiển thị (ví dụ: các item bị chồng lên nhau hoặc có khoảng trắng thừa).- Hiệu suất vượt trội: Với
SliverFixedExtentList, Flutter không cần phải gọibuildercho từng item để đo kích thước của nó. Nó chỉ cần biếtindexcủa item vàitemExtentđể tính ra vị trí. Điều này giúp giảm đáng kể số lượng công việc phải làm trên mỗi frame khi cuộn, dẫn đến trải nghiệm người dùng mượt mà hơn. - Ghi nhớ bằng hình ảnh: Hãy nhớ lại cái "kệ sách đồng bộ" của anh Creyt. Khi mọi thứ đều có kích thước chuẩn, việc quản lý và tìm kiếm sẽ dễ dàng hơn rất nhiều!
4. Ví dụ thực tế các ứng dụng/website đã ứng dụng
Trong thế giới thực, SliverFixedExtentList được ứng dụng nhiều hơn bạn nghĩ, đặc biệt trong các trường hợp cần sự đồng bộ về giao diện và hiệu suất cao:
- Danh bạ điện thoại: Hầu hết các item trong danh bạ (tên, số điện thoại) đều có cùng một chiều cao.
SliverFixedExtentListlà lựa chọn lý tưởng. - Menu cài đặt (Settings): Các mục cài đặt thường là các
ListTilecó chiều cao đồng nhất, rất phù hợp để dùngSliverFixedExtentList. - Các danh sách sản phẩm đơn giản: Nếu bạn có một danh sách sản phẩm mà mỗi item hiển thị chỉ có tên và giá, và bạn đã thiết kế chúng với chiều cao cố định,
SliverFixedExtentListsẽ giúp list của bạn cuộn mượt mà hơn. - Lịch (Calendar view): Khi hiển thị các ngày trong tháng dưới dạng lưới hoặc danh sách với chiều cao ô cố định.
5. Thử nghiệm của anh Creyt và hướng dẫn nên dùng cho case nào
Hồi mới tập tành code Flutter, anh Creyt cũng từng "ngây thơ" dùng SliverList cho mọi thứ, từ danh sách tin nhắn chat (mà tin nhắn thì dài ngắn khác nhau) đến danh sách cài đặt. Đến khi làm một app có danh sách hàng nghìn item đồng bộ, và anh thấy app cứ "giật đùng đùng" như phim hành động mỗi khi cuộn nhanh. Lúc đó, anh mới bắt đầu đào sâu về Sliver và "ngộ" ra SliverFixedExtentList là chân ái cho những list "đều tăm tắp"!
Anh đã thử nghiệm bằng cách xây dựng hai danh sách giống hệt nhau, một dùng SliverList và một dùng SliverFixedExtentList với 10.000 item. Khi chạy trên thiết bị cấu hình thấp và bật công cụ Performance Overlay của Flutter, sự khác biệt là "một trời một vực". SliverFixedExtentList duy trì 60fps một cách ổn định, trong khi SliverList dễ dàng bị tụt frame, đặc biệt khi cuộn nhanh.
Khi nào nên dùng?
- Khi bạn có một danh sách dài (trên vài chục item) mà mỗi item có chiều cao không đổi.
- Khi bạn muốn tối ưu hóa hiệu suất cuộn để mang lại trải nghiệm người dùng tốt nhất, đặc biệt trên các thiết bị có cấu hình không quá mạnh.
- Khi bạn cần sự đồng bộ và gọn gàng trong thiết kế giao diện, nơi mỗi hàng đều có kích thước chuẩn.
Nhớ nhé các em, trong lập trình, việc chọn đúng công cụ cho đúng việc là yếu tố quyết định sự "sang chảnh" của app và trải nghiệm người dùng. SliverFixedExtentList là một trong những "công cụ vàng" mà các em cần nắm vững!
Thuộc Series: Flutter
Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!
