Flutter Pluto_grid单元格是否支持多种字体样式？

Pluto Grid本身没有内置的富文本单元格支持，但可以通过自定义单元格渲染器轻松实现多字体样式的效果，完全能满足你区分不同字符串内容的需求。下面是具体实现方案：

方案1：直接用TextSpan构建富文本 #

这种方式适合提前处理好文本片段和对应样式的场景：

1. 准备带样式的数据 #

将单元格内容拆分为多个带样式的TextSpan，存储在PlutoCell的value中：

final List<PlutoRow> rows = [
  PlutoRow(
    cells: {
      'rich_story': PlutoCell(value: [
        TextSpan(text: 'This is a '),
        TextSpan(text: 'true', style: TextStyle(color: Colors.red)),
        TextSpan(text: ' story about a boy '),
        TextSpan(
          text: 'and a girl',
          style: TextStyle(
            color: Colors.red,
            decoration: TextDecoration.lineThrough,
          ),
        ),
      ]),
      'simple_story': PlutoCell(value: 'This is a story about a boy'),
    },
  ),
];

2. 自定义列的渲染器 #

在PlutoColumn中设置renderer属性，返回RichText组件渲染富文本：

final List<PlutoColumn> columns = [
  PlutoColumn(
    title: '富文本内容',
    field: 'rich_story',
    type: PlutoColumnType.text(),
    renderer: (ctx) {
      return Container(
        padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        child: RichText(
          text: TextSpan(
            // 继承默认文本样式，避免和PlutoGrid风格脱节
            style: DefaultTextStyle.of(ctx.context).style,
            children: ctx.cell.value as List<TextSpan>,
          ),
        ),
      );
    },
  ),
  PlutoColumn(
    title: '普通内容',
    field: 'simple_story',
    type: PlutoColumnType.text(),
  ),
];

3. 渲染PlutoGrid #

直接使用上述列和数据构建表格即可：

PlutoGrid(
  columns: columns,
  rows: rows,
  mode: PlutoGridMode.normal,
)

方案2：解析HTML格式的文本 #

如果你的内容是类似<font color=red>true</font>的HTML字符串，可以用第三方库（如flutter_html）解析后渲染：

1. 添加依赖 #

在pubspec.yaml中添加：

dependencies:
  flutter_html: ^3.0.0-beta.2

2. 准备HTML格式数据 #

final List<PlutoRow> rows = [
  PlutoRow(
    cells: {
      'html_story': PlutoCell(value: 'This is a <font color=red>true</font> story about a boy <font color=red style="text-decoration: line-through;">and a girl</font>'),
    },
  ),
];

3. 自定义渲染器 #

PlutoColumn(
  title: 'HTML解析内容',
  field: 'html_story',
  type: PlutoColumnType.text(),
  renderer: (ctx) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      child: Html(
        data: ctx.cell.value as String,
        // 调整样式匹配PlutoGrid的默认风格
        style: {
          'body': Style(margin: EdgeInsets.zero, padding: EdgeInsets.zero),
        },
      ),
    );
  },
),

注意事项 #

• 如果你需要对富文本列进行筛选、排序，建议将原始纯文本存储在PlutoCell的extra属性中，用于筛选逻辑判断：

  PlutoCell(
    value: [/* TextSpan列表 */],
    extra: 'This is a true story about a boy and a girl', // 纯文本用于筛选
  )
  

• 自定义渲染器完全兼容PlutoGrid的其他特性（如单元格编辑、拖拽排序等），如果需要编辑富文本，还可以进一步自定义编辑组件。

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