10、 Flutter Widgets 之 DataTable表格数据

最新推荐文章于 2026-02-28 09:31:15 发布

原创

最新推荐文章于 2026-02-28 09:31:15 发布 · 5.9k 阅读

标签

#flutter #ui #ios #android

本文详细介绍了如何在Flutter中使用DataTable组件，包括设置列和行、属性配置（如排序、选择、单元格编辑）、排序算法实现以及处理大量数据的滚动显示。展示了如何定制表头、添加选择功能和自定义事件处理。

1.DataTable介绍

数据表显示表格数据，需要设置行和列

2.DataTable属性

columns：DataColumn 行
sortColumnIndex：索引在行的位置
sortAscending = true：升序/降序只有UI变化，排序需要自己实现
onSelectAll：全选回调，默认实现全选操作
dataRowHeight = kMinInteractiveDimension：数据内容每列高度
headingRowHeight = 56.0：头部每列高度
horizontalMargin = 24.0：表格左右外边距
columnSpacing = 56.0：行每个子节点宽度
showCheckboxColumn = true：是否显示Checkbox
dividerThickness = 1.0：间隔线高度
rows：DataRow 列

3.DataColumn属性

label：子widget
tooltip：长按提示
numeric = false：是否右对齐
onSort：升序/降序

4.DataRow属性

selected = false：是否选中
onSelectChanged：选中回调
color：背景色
cells：子widgets

5.DataCell属性

child：子widget
placeholder = false：是都占位
showEditIcon = false：是否展示编辑
onTap：点击事件

6.DataTable基本用法

一个基础的DataTable需要设置columns列，rows行
由于DataTable本身是不具备滑动属性，所以当数据比较多的时候需要嵌套滑动组件，使用两个SingleChildScrollView来完成纵向横向的滑动

/**
 * @Author wywinstonwy
 * @Date 2021/12/28 9:45 下午
 * @Description:
 */
import 'package:demo202112/utils/common_appbar.dart';
import 'package:flutter/material.dart';

 class WyDataTable extends StatefulWidget {
   const WyDataTable({Key? key}) : super(key: key);

   @override
   _WyDataTableState createState() => _WyDataTableState();
 }

 class _WyDataTableState extends State<WyDataTable> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: getAppBar('DataTable'),
       body: _baseDataTable(),
     );
   }
   _baseDataTable(){
     return DataTable(
       columns: [
         DataColumn(label: Text('姓名')),
         DataColumn(label: Text('年龄')),
       ],
       rows: [
         DataRow(cells: [
           DataCell(Text('老王')),
           DataCell(Text('26')),
         ]),
         DataRow(cells: [
           DataCell(Text('老李')),
           DataCell(Text('16')),
         ]),
         DataRow(cells: [
           DataCell(Text('老李')),
           DataCell(Text('16')),
         ]),
       ],
     );
   }
 }

效果：