Flutter中PlutoGrid表格文本换行与行高自适应实现咨询

要实现PlutoGrid单元格文本自动换行且行高随内容自适应，需从自定义单元格组件和开启行高自适应配置两方面入手，具体方案如下：

1. 自定义可换行的单元格组件 #

在buildColumns方法中，为需要换行的列指定cellWidget，使用支持自动换行的Text组件，确保文本超出列宽时自动折行：

List<PlutoColumn> buildColumns(List<dynamic> mainFields) {
  return mainFields.map((field) {
    return PlutoColumn(
      field: field.key,
      title: field.title,
      width: field.width, // 沿用后端返回的列宽
      cellWidget: (PlutoGridCell cell) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6), // 增加内边距优化排版
          child: Text(
            cell.value?.toString() ?? '',
            softWrap: true,
            maxLines: null, // 不限制行数
            overflow: TextOverflow.visible, // 不截断文本
            style: const TextStyle(fontSize: 14),
          ),
        );
      },
    );
  }).toList();
}

2. 开启PlutoGrid行高自适应配置 #

在PlutoGridConfiguration中添加rowHeightConfig，开启自动行高功能，让行高随单元格内容高度自动调整：

configuration: PlutoGridConfiguration(
  // 原有样式配置...
  style: PlutoGridStyleConfig(
    defaultColumnTitlePadding: const EdgeInsets.only(left: 20),
    gridBorderRadius: BorderRadius.circular(4),
    gridBorderColor: const Color(0xFFECF0FE),
    enableCellBorderHorizontal: true,
    enableColumnBorderHorizontal: true,
    enableGridBorderShadow: true,
    menuBackgroundColor: const Color(0xFFECF0FE),
    enableCellBorderVertical: false,
    rowHeight: 40, // 设置最小行高，避免内容过短时行高过窄
  ),
  // 新增行高自适应配置
  rowHeightConfig: const PlutoGridRowHeightConfig(
    autoRowHeight: true,
  ),
  columnSize: const PlutoGridColumnSizeConfig(
      autoSizeMode: PlutoAutoSizeMode.scale,
      resizeMode: PlutoResizeMode.normal),
  scrollbar: PlutoGridScrollbarConfig(
    scrollbarThickness: 8,
    scrollbarRadius: const Radius.circular(8),
    scrollBarColor: Theme.of(context).colorScheme.primary,
  ),
),

3. 注意事项 #

• 若PlutoAutoSizeMode.scale导致列宽被强制缩放，可尝试改为PlutoAutoSizeMode.none，确保后端返回的列宽完全生效；
• 保留单元格内边距可优化内容与边框的间距，提升可读性；
• 确保buildRows返回的PlutoRow的cell值为完整字符串，未被提前截断。

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