在Flutter DataTable中对列值进行排序

Question

我在DataTable中对列进行排序遇到了严重困难。

以下是我的代码：

  SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: DataTable(
    sortColumnIndex: 0,
    sortAscending: true,

    columnSpacing: 5.0,
      horizontalMargin: 10,
    columns: [
      DataColumn(label: Text('Col1'),          
      DataColumn(label: Text('Col2'),numeric: false ),
      DataColumn(label: Text('Col3'),numeric: true ),
      DataColumn(label: Text('Col4'), numeric: true),
      DataColumn(label: Text('Col5'), numeric: true),
    ],
    rows: myList
        .map(
        ((element) => DataRow(
          cells: <DataCell>[
            DataCell(Text(element["Col1"]), placeholder: true,showEditIcon: false),
            DataCell(Text(element["Col2"].toString())),
            DataCell(Text(element["Col3"].toString())),
            DataCell(Text(element["Col4"].toString())),
            DataCell(Text(element["Col5"].toString())),
          ],
        )),
    ).toList(),
  ),
));

我还应该做什么呢？理想情况下，我希望将排序功能应用在用户单击的任何一列上，但是现在，只有1列可以进行排序，这已经让我很高兴了。

正如您所看到的，我已经添加了约束条件：

    sortColumnIndex: 0,
    sortAscending: true,

然而我却只得到了在第一列旁边的箭头（ColumnIndex = 0）- 当你点击它时它并没有什么作用。

我做错了什么？

- houba

---

myList 是一个 Map 的列表？ - Viren V Varasadiya

传递 sortColumnIndex 只会影响标题行中的指示箭头。数据行不会自动排序。您应该手动对数据进行排序，然后调用 setState。 - Pavel

谢谢。我该如何手动排序数据？我的问题是myList不是来自一个类。它没有从一个类实例化。也就是说，我不能调用像myList.myElement这样的语法。 - houba

Answer 1

您需要在将被排序的列中添加一个onSort属性，并调用一个排序函数。

bool sort = true; // or `false`...

DataTable(
  sortAscending: sort,
  sortColumnIndex: 0,
  columns: [
    DataColumn(
      label: Text("Col1"),
      onSort: (columnIndex, ascending) {
        setState(() {
          sort = !sort;
        });

        onSortColum(columnIndex, ascending);
      }),
      ...

还有 onSortColum 函数：

onSortColum(int columnIndex, bool ascending) {
  if (columnIndex == 0) {
    if (ascending) {
      yourDataList.sort((a, b) => a['name'].compareTo(b['name']));
    } else {
      yourDataList.sort((a, b) => b['name'].compareTo(a['name']));
    }
  }
}

- Elin

Answer 2

1. DataTable 应该是 StatefulWidget 的一部分
2. 每当需要在不同的列上进行排序时，就需要重新渲染 StatefulWidget 所包含的小部件
3. 为了触发重新渲染，我们应该在 onSort: (columnIndex, ascending) {} 中添加 setState(() {}) 方法，如下所示：

            DataColumn(
              label: const Text(
                'Name',
                style: TextStyle(fontStyle: FontStyle.italic),
              ),
              onSort: (columnIndex, ascending) {
                print("columnIndex:$columnIndex");
                print("ascending:$ascending");
                setState(() {
                  sortColumnIndex = columnIndex;
                  isAscending = ascending;
                });

4. 每次单击列标题时，都会调用onSort: (columnIndex, ascending) {}。

5. DataTable应该有状态变量，例如sortColumnIndex，以便对不同列进行排序点击时重置此索引，并且相应的索引列将获得箭头图标。

        child: DataTable(
          border: TableBorder.symmetric(),
          sortAscending: isAscending,
          sortColumnIndex: sortColumnIndex,

6. 如果再次按同一列，则 isAscending 将用于反转箭头。 7. 与 sortColumnIndex 状态变量类似，我们必须手动对表格数据进行排序，以便在单击后呈现新的排序值。

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  var isAscending = true;
  var sortColumnIndex = 0;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: DataTable(
          border: TableBorder.symmetric(),
          sortAscending: isAscending,
          sortColumnIndex: sortColumnIndex,
          columns: <DataColumn>[
            DataColumn(
              label: const Text(
                'Name',
                style: TextStyle(fontStyle: FontStyle.italic),
              ),
              onSort: (columnIndex, ascending) {
                print("columnIndex:$columnIndex");
                print("ascending:$ascending");
                setState(() {
                  sortColumnIndex = columnIndex;
                  isAscending = ascending;
                });
              },
            ),
            DataColumn(
              label: const Text(
                'Age',
                style: TextStyle(fontStyle: FontStyle.italic),
              ),
              onSort: (columnIndex, ascending) {
                print("columnIndex:$columnIndex");
                print("ascending:$ascending");
                setState(() {
                  sortColumnIndex = columnIndex;
                  isAscending = ascending;
                });
              },
            ),
            DataColumn(
              label: const Text(
                'Role',
                style: TextStyle(fontStyle: FontStyle.italic),
              ),
              onSort: (columnIndex, ascending) {
                print("columnIndex:$columnIndex");
                print("ascending:$ascending");
                setState(() {
                  sortColumnIndex = columnIndex;
                  isAscending = ascending;
                });
              },
            ),
          ],
          rows: const <DataRow>[
            DataRow(
              cells: <DataCell>[
                DataCell(Text('Sarah')),
                DataCell(Text('19')),
                DataCell(Text('Student')),
              ],
            ),
            DataRow(
              cells: <DataCell>[
                DataCell(Text('Janine')),
                DataCell(Text('43')),
                DataCell(Text('Professor')),
              ],
            ),
            DataRow(
              cells: <DataCell>[
                DataCell(Text('William')),
                DataCell(Text('27')),
                DataCell(Text('Associate Professor')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

- Kanagavelu Sugumar