如何在Flutter的PaginatedDataTable组件中实现排序功能

要给PaginatedDataTable添加排序功能，核心逻辑如下：

• 在页面State中维护两个状态：_sortColumnIndex（当前选中的排序列下标）、_sortAscending（当前排序是否为升序）
• 为每个DataColumn配置onSort回调，点击表头时触发排序逻辑
• 在自定义的MyData数据源类中新增排序方法，对内部数据列表排序后调用notifyListeners()通知表格刷新
• 将PaginatedDataTable的sortColumnIndex、sortAscending属性和前面维护的状态做绑定，显示排序方向箭头

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // 隐藏debug横幅
        debugShowCheckedModeBanner: false,
        title: '表格测试',
        theme: ThemeData(
          primarySwatch: Colors.amber,
        ),
        home: const HomeScreen());
  }
}

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

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

class _HomeScreenState extends State<HomeScreen> {
  final MyData _data = MyData();
  // 新增排序相关状态
  int _sortColumnIndex = 0;
  bool _sortAscending = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('表格测试'),
      ),
      body: Column(
        children: [
          const SizedBox(
            height: 10,
          ),
          PaginatedDataTable(
            source: _data,
            header: const Text('我的商品'),
            // 绑定排序相关属性
            sortColumnIndex: _sortColumnIndex,
            sortAscending: _sortAscending,
            columns: [
              DataColumn(
                label: const Text('ID'),
                // 新增排序回调
                onSort: (columnIndex, ascending) {
                  setState(() {
                    _sortColumnIndex = columnIndex;
                    _sortAscending = ascending;
                  });
                  _data.sort('id', ascending);
                },
              ),
              DataColumn(
                label: const Text('名称'),
                onSort: (columnIndex, ascending) {
                  setState(() {
                    _sortColumnIndex = columnIndex;
                    _sortAscending = ascending;
                  });
                  _data.sort('title', ascending);
                },
              ),
              DataColumn(
                label: const Text('价格'),
                onSort: (columnIndex, ascending) {
                  setState(() {
                    _sortColumnIndex = columnIndex;
                    _sortAscending = ascending;
                  });
                  _data.sort('price', ascending);
                },
              )
            ],
            columnSpacing: 100,
            horizontalMargin: 10,
            rowsPerPage: 8,
            showCheckboxColumn: false,
          ),
        ],
      ),
    );
  }
}

class MyData extends DataTableSource {
  final List<Map<String, dynamic>> _data = List.generate(
      200,
      (index) => {
            "id": index,
            "title": "商品 $index",
            "price": Random().nextInt(10000)
          });

  // 新增排序方法
  void sort(String field, bool ascending) {
    _data.sort((a, b) {
      final valueA = a[field];
      final valueB = b[field];
      if (ascending) {
        return Comparable.compare(valueA, valueB);
      } else {
        return Comparable.compare(valueB, valueA);
      }
    });
    // 通知数据源更新，刷新表格
    notifyListeners();
  }

  @override
  bool get isRowCountApproximate => false;
  @override
  int get rowCount => _data.length;
  @override
  int get selectedRowCount => 0;
  @override
  DataRow getRow(int index) {
    return DataRow(cells: [
      DataCell(Text(_data[index]['id'].toString())),
      DataCell(Text(_data[index]["title"])),
      DataCell(Text(_data[index]["price"].toString())),
    ]);
  }
}

修改完成后点击对应列表头即可触发排序，表头会自动显示升序/降序箭头标识当前排序方向。

内容的提问来源于stack exchange，提问作者Miguel Flores