DataRow: Xương Sống Bảng Biểu Trong Flutter - Đừng Để Nó Rời Rạc!

Ngày xửa ngày xưa, khi các bạn còn bé thơ, chắc hẳn ai cũng từng mê mẩn những cuốn sổ tay, những bảng thời khóa biểu hay thậm chí là bảng điểm lủng củng chữ nghĩa. Trong thế giới lập trình, đặc biệt là với Flutter, khi ta cần hiển thị dữ liệu một cách có trật tự, dễ đọc, thì DataTable chính là vị cứu tinh. Và trong cái DataTable ấy, DataRow chính là những 'dòng kẻ' vàng, nơi dữ liệu của chúng ta được sắp xếp ngăn nắp, không lệch lạc chút nào.

Hãy hình dung thế này: bạn có một tờ giấy kẻ ô li khổng lồ, đó là DataTable. Các tiêu đề cột như "Tên", "Tuổi", "Địa chỉ" là DataColumn. Thế còn mỗi dòng dữ liệu cụ thể như "Nguyễn Văn A", "25", "Hà Nội" thì sao? Chính xác! Đó là một DataRow đấy. Nó không chỉ là một dòng chữ, mà là một tập hợp các DataCell – mỗi DataCell là một ô dữ liệu cụ thể, tương ứng với một DataColumn ở trên. DataRow được sinh ra để làm nhiệm vụ cao cả: gom nhóm các ô dữ liệu (DataCell) thành một 'bản ghi' hoàn chỉnh, giúp người dùng dễ dàng theo dõi và nắm bắt thông tin.

Code Ví Dụ Minh Họa: Mổ Xẻ Một DataRow

Để các bạn không còn mơ hồ, chúng ta hãy cùng nhau xây một 'bảng thần kỳ' với vài DataRow cơ bản. Nhìn vào đây, bạn sẽ thấy DataRow không hề phức tạp như bạn nghĩ, mà nó là một phần không thể thiếu khi bạn muốn dữ liệu của mình trông 'đẹp trai' và 'có tổ chức' hơn.

import 'package:flutter/material.dart';

class MyDataTableExample extends StatefulWidget {
  const MyDataTableExample({super.key});

  @override
  State<MyDataTableExample> createState() => _MyDataTableExampleState();
}

class _MyDataTableExampleState extends State<MyDataTableExample> {
  // Đây là 'nguồn sống' cho bảng của chúng ta: một danh sách các 'người dùng'
  final List<Map<String, dynamic>> _users = [
    {'name': 'Alice', 'age': 30, 'role': 'Developer'},
    {'name': 'Bob', 'age': 24, 'role': 'Designer'},
    {'name': 'Charlie', 'age': 35, 'role': 'Manager'},
    {'name': 'David', 'age': 28, 'role': 'Tester'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DataRow: Kẻ Sắp Xếp Dữ Liệu!'),
        backgroundColor: Colors.blueAccent,
      ),
      body: Center(
        // Luôn nhớ 'SingleChildScrollView' cho bảng, kẻo nó 'tràn' ra ngoài màn hình!
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal, // Cho phép cuộn ngang nếu bảng quá rộng
          child: DataTable(
            // Đây là các 'tiêu đề' của bảng, như những cái nhãn dán trên mỗi cột vậy
            columns: const <DataColumn>[
              DataColumn(
                label: Expanded(
                  child: Text(
                    'Tên',
                    style: TextStyle(fontStyle: FontStyle.italic, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
              DataColumn(
                label: Expanded(
                  child: Text(
                    'Tuổi',
                    style: TextStyle(fontStyle: FontStyle.italic, fontWeight: FontWeight.bold),
                  ),
                ),
                numeric: true, // Báo hiệu đây là cột số, giúp căn chỉnh đẹp hơn
              ),
              DataColumn(
                label: Expanded(
                  child: Text(
                    'Vai trò',
                    style: TextStyle(fontStyle: FontStyle.italic, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ],
            // Và đây là 'linh hồn' của bài học hôm nay: Các DataRow!
            // Chúng ta dùng .map để biến danh sách _users thành danh sách DataRow
            rows: _users.map((user) {
              return DataRow(
                // Bạn có muốn chọn cả dòng không? Dùng onSelectChanged!
                // onSelectChanged: (bool? selected) {
                //   if (selected != null && selected) {
                //     ScaffoldMessenger.of(context).showSnackBar(
                //       SnackBar(content: Text('Bạn vừa chọn ${user['name']}!')),
                //     );
                //   }
                // },
                // selected: user['name'] == 'Alice', // Ví dụ: Alice luôn được chọn
                cells: <DataCell>[
                  // Mỗi DataCell là một 'ô' trong dòng, chứa dữ liệu cụ thể
                  DataCell(Text(user['name'].toString())),
                  DataCell(Text(user['age'].toString())), // Nhớ chuyển số sang chuỗi nhé!
                  DataCell(Text(user['role'].toString())),
                ],
              );
            }).toList(), // Cuối cùng, đừng quên .toList() để biến Iterable thành List
          ),
        ),
      ),
    );
  }
}

Trong ví dụ trên, mỗi DataRow được tạo ra từ một Map trong danh sách _users. Điều quan trọng nhất là: số lượng DataCell trong mỗi DataRow PHẢI khớp với số lượng DataColumn. Nếu không, bảng của bạn sẽ 'méo mó' ngay, nhìn rất khó chịu!

Gợi Ý Đọc Tiếp

DecorationTween: Phù Thủy Biến Hình UI Đỉnh Cao Của Flutter

18 Lượt xem

Mẹo và Best Practices Từ Giảng Viên Creyt: Đừng Chỉ Học, Hãy Thông Minh!

1. "Cái áo" cho DataTable (SingleChildScrollView): Giống như bạn mặc áo choàng khi ra đường lạnh, DataTable cũng cần SingleChildScrollView để không bị 'tràn' ra ngoài màn hình, đặc biệt khi có nhiều cột. Hãy đặt nó trong SingleChildScrollView(scrollDirection: Axis.horizontal) để đảm bảo bảng luôn 'dễ thở' và có thể cuộn ngang.
2. DataColumn.numeric = true: Nếu cột của bạn chứa toàn số (như "Tuổi", "Số lượng"), hãy set numeric: true cho DataColumn đó. Flutter sẽ tự động căn phải cho dữ liệu số, giúp bảng của bạn trông chuyên nghiệp và dễ đọc hơn, đúng chuẩn kế toán vậy!
3. onSelectChanged cho Dòng Dữ Liệu: Bạn muốn người dùng có thể chọn cả một dòng để thực hiện hành động nào đó (ví dụ: xem chi tiết, xóa)? Hãy dùng thuộc tính onSelectChanged của DataRow. Nó sẽ cung cấp cho bạn một callback khi dòng được chọn hoặc bỏ chọn.
4. Dữ liệu động là bạn thân: Trong thực tế, hiếm khi bạn gõ từng DataRow một cách thủ công. Hãy học cách sinh DataRow từ một danh sách dữ liệu (như _users.map(...) trong ví dụ). Đây là cách làm 'chính chủ' và hiệu quả nhất.
5. Cân nhắc hiệu năng với PaginatedDataTable: Nếu bảng của bạn có hàng trăm, hàng ngàn dòng dữ liệu, DataTable thông thường có thể khiến ứng dụng 'thở dốc'. Lúc đó, hãy nghĩ đến PaginatedDataTable hoặc các giải pháp tùy chỉnh khác để phân trang hoặc 'ảo hóa' dữ liệu, chỉ hiển thị những gì cần thiết trên màn hình.
6. DataCell không phải là 'nhà kho' vô hạn: Mặc dù bạn có thể đặt bất kỳ Widget nào vào DataCell, nhưng hãy giữ nó đơn giản. Text, Icon, hoặc một ElevatedButton nhỏ là ổn. Đừng cố gắng nhét cả một ListView vào trong một DataCell nhé, nó sẽ biến bảng của bạn thành một 'mớ bòng bong' khó coi đấy!

Ứng Dụng Thực Tế: DataRow Hiện Diện Khắp Nơi!

Bạn có thể không nhận ra, nhưng DataRow (hoặc các khái niệm tương tự trong các nền tảng khác) đang hiện diện khắp mọi nơi trong cuộc sống số của chúng ta:

• Bảng quản lý trong Admin Panel: Khi bạn truy cập trang quản trị của một website hay ứng dụng, danh sách người dùng, sản phẩm, đơn hàng, hay các bài viết đều được hiển thị dưới dạng bảng. Mỗi dòng trong đó chính là một DataRow.
• Ứng dụng quản lý tài chính cá nhân: Liệt kê các giao dịch thu chi, số dư tài khoản, các khoản đầu tư.
• Các trang web thống kê, phân tích: Hiển thị các chỉ số kinh doanh, dữ liệu thị trường dưới dạng bảng để dễ so sánh.
• Giỏ hàng trong ứng dụng thương mại điện tử: Mỗi mặt hàng bạn thêm vào giỏ hàng thường được hiển thị như một dòng với tên sản phẩm, số lượng, giá cả.

Thấy chưa? DataRow không chỉ là một widget đơn thuần, nó là một 'người kể chuyện' thầm lặng, giúp dữ liệu của bạn trở nên có ý nghĩa và dễ hiểu hơn rất nhiều. Hãy nắm vững nó, và bạn sẽ có thêm một công cụ mạnh mẽ trong hành trình chinh phục Flutter!