首页 > 解决方案 > 对 Datatable 的排序方向箭头感到困惑

问题描述

我觉得我在 Flutter 的DataTableMaterial Design 和 Flutter 的实现之间看到了排序顺序箭头的差异。

Material Design 的数据表规范(大部分)显示当列数据上升时箭头指向上方,当列数据下降时箭头指向下方。这在排序部分和规格部分是正确的。有一个关于工具提示的图像,它是相反的。然而,文本从未真正指定方向。

在此处输入图像描述

但在 Flutter 中,情况似乎正好相反。上升数据有一个向下的箭头,而下降的数据有一个向上的箭头。我发现这在我自己的实现和官方 FlutterDataTable演示中都是正确的,如下图所示:

在此处输入图像描述

对我个人而言,上升数据的箭头指向更有意义,但我试图了解 Flutter 中是否存在设计错误,或者我只是误解了 Material Design 或从图片中做出了太多假设。

我认为我的部分困惑在这篇关于排序顺序箭头方向的文章中有所描述,尤其是他们在文章结尾附近关于如何解释三角形与箭头的观点。

Flutter 的排序顺序箭头方向是否正确?

标签: dartmaterial-designflutter

解决方案


在使用日期选择小部件中的 setState 时,我的应用程序遇到了类似的问题,这将导致我的数据表小部件第一列中的箭头从“向上”变为“向下”,而不会更改排序顺序。

在此处输入图像描述

我在我的项目中访问了 DataTable 源代码,并在顶部的 if 语句中添加了一个额外的条件,这修复了错误并且不影响任何其他功能:

地点

flutter/packages/flutter/lib/src/material/data_table.dart

原始代码 [从第 1142 行开始]

if ((_up != newUp) && !skipArrow) {
  if (_orientationController.status == AnimationStatus.dismissed) {
    _orientationController.forward();
  } else {
    _orientationController.reverse();
  }
}

错误修复

if ((_up != newUp) && (newUp == false || _up != null) && !skipArrow) {
  if (_orientationController.status == AnimationStatus.dismissed) {
    _orientationController.forward();
  } else {
    _orientationController.reverse();
  }
}

推荐阅读