如何修改Flutter中DataTable组件排序图标的颜色及图标样式？

一、修改排序图标的颜色 #

直接在外层套Theme组件，覆盖当前区域的图标主题颜色即可，不用改动DataTable核心代码：

Theme(
  data: Theme.of(context).copyWith(
    iconTheme: const IconThemeData(color: Colors.red), // 替换成你需要的颜色
  ),
  child: Scrollbar(
    controller: _scrollController,
    child: SingleChildScrollView(
      controller: _scrollController,
      scrollDirection: Axis.horizontal,
      child: DataTable(
        border: TableBorder.all(width: 0.2),
        headingRowColor: MaterialStateProperty.resolveWith<Color?>(
            (Set<MaterialState> states) {
          return Styles.TableHeaderColor;
        }),
        columns: getColumns(TableTitles),
        rows: getRows(),
        sortColumnIndex: sortColumnIndex,
        sortAscending: isAscending,
        dataRowHeight: 50,
        headingRowHeight: 40,
      ),
    ),
  ),
)

二、完全替换排序图标 #

默认DataTable没有直接替换图标的参数，需要自定义DataColumn的label，手动控制图标显示逻辑：

1. 修改getColumns方法，给每个列的label组合文本和自定义图标：

List<DataColumn> getColumns(List<String> titles) {
  return titles.asMap().entries.map((entry) {
    int index = entry.key;
    String title = entry.value;
    return DataColumn(
      label: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(title),
          const SizedBox(width: 4),
          // 根据当前排序状态显示对应图标
          if (sortColumnIndex == index)
            isAscending
                ? const Icon(Icons.arrow_upward, size: 16, color: Colors.blue) // 自定义升序图标
                : const Icon(Icons.arrow_downward, size: 16, color: Colors.blue), // 自定义降序图标
        ],
      ),
      onSort: (columnIndex, ascending) {
        // 保留你的排序逻辑，更新状态
        setState(() {
          sortColumnIndex = columnIndex;
          isAscending = ascending;
        });
      },
    );
  }).toList();
}

2. 最后记得去掉DataTable的sortColumnIndex和sortAscending参数，避免默认图标和自定义图标重复显示：

// 删掉这两行
sortColumnIndex: sortColumnIndex,
sortAscending: isAscending,

这样就能完全自定义图标样式，包括图标类型、大小、颜色都可以自由设置。

内容的提问来源于stack exchange，提问作者Tony Lam