DataTable

  • sortColumnIndex：排序的列号
  • sortAscending：排序方式，true为升序，false为降序，决定了排序箭头的上下，也决定了排序事件的传入值
  • columns：表格头部们
  • rows：各行数据，通常是动态生成的
  • 详情用法见代码部分，我相信未来的我看到代码一定能秒懂。

代码区

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
class Student{
  String name;
  int age;
  String school;
  bool selected;
  //学生类和它的构造函数
  Student(this.name,this.age,this.school,{this.selected=false});
}

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);
  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  bool asc=true;//定义排序的方式，定义true为升序，false为降序
  //模仿接收后台的数据
  List<Student> students=[
    Student("阿东", 21, "Three Gorges"),
    Student("阿叶", 20, "Three Gorges")
  ];

  getStudentsData(){//生成表单数据
    List<DataRow> dataRows=[];//生成空行们
    for (var element in students) {//for循环添加数据
      dataRows.add(DataRow(
          selected: element.selected,//这一行默认的选中状态
          onSelectChanged: (selected){//单击行时调用的函数，selected是当前行点击后的状态
            setState(() {//使用setState是为了重新渲染组件
              element.selected=selected!;
            });
          },
          cells: [//cell，也就是单元格，一行数据中固定最小单位
            DataCell(Text(element.name)),
            DataCell(Text("${element.age}")),//因为Student定义的年龄是int类型，所以要加双引号变成字符串才能作为Text的内容
            DataCell(Text(element.school))
          ]
      ));
    }
    return dataRows;//返回生成好的表单数据
  }
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      physics: const BouncingScrollPhysics(),
      child: DataTable(
        sortColumnIndex: 1,//指定需要排序的列号，这里的1为年龄那一列。复选框的那一列不计入。
        sortAscending: asc,//指定排序方式，asc为上面定义的布尔值，同时它决定了排序箭头的方向，也决定了下方点击排序后产生的toBeAsc的值
        columns:  [
          const DataColumn(label: Text("name")),
          DataColumn(
            label: const Text("age"),
            numeric: true,//需要排序的列，要把列设置为数字型的列。
            onSort: (int index,bool toBeAsc){//然后定义它的排序方式，传入的是一个匿名函数，index为列号？toBeAsc是点击排序后，传入的布尔值，即是否是升序（ASC）
                setState(() {//自然要用到setState来重新渲染组件
                  asc=toBeAsc;//toBeAsc是点击排序箭头后的值。如果点击前是向上的箭头，即升序(true)，那点击后这个toBeAsc的值，就是false
                  if(toBeAsc){//排序可以看源码注释，就是给sort函数传入一个匿名函数，自己决定如何定义它们的大小。这里是compare年龄来决定大小
                    students.sort((a,b) => a.age.compareTo(b.age));
                  }
                  else {
                    students.sort((a,b) => b.age.compareTo(a.age));
                  }
                });
            }
          ),
          const DataColumn(label: Text("school"))
        ],
        rows: getStudentsData(),//调用函数，获取表单数据
      ),
    );
  }
}

效果图