能否为动态获取的JSON字符串添加CSS类样式用于Flutter渲染？

方案1：拆分HTML内容单独控制每行样式 #

如果你只需要对三行文本单独设置样式，不需要保留其他HTML结构，可以直接拆分提取每行文本后用原生Flutter组件渲染，性能最好、样式控制自由度最高：

• 第一步先提取独立行文本：

List<String> lineList = [];
if (widget.place?.line1 != null) {
  lineList = widget.place!.line1!
      .split('</p>')
      .map((item) => item.replaceAll('<p>', '').trim())
      .where((item) => item.isNotEmpty)
      .toList();
}

• 第二步渲染时按行自定义样式：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: List.generate(lineList.length, (index) {
    return Text(
      lineList[index],
      // 按索引给不同行设置不同样式
      style: switch(index) {
        0 => const TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
        1 => const TextStyle(color: Colors.grey, fontSize: 14),
        _ => const TextStyle(fontSize: 14)
      },
    );
  }),
)

方案2：保留HTML格式，支持类名样式控制 #

如果你的内容存在更复杂的HTML结构，希望用类似CSS的逻辑按类名控制样式，可以使用Flutter HTML渲染组件实现：

• 你可以先预处理原HTML字符串，给每行<p>标签按顺序添加自定义类名：

String htmlContent = widget.place?.line1 ?? "";
int lineCount = 0;
// 给每个p标签增加类名：line-1、line-2、line-3
final processedHtml = htmlContent.replaceAllMapped(RegExp(r'<p>'), (match) {
  lineCount++;
  return '<p class="line-$lineCount">';
});

• 使用HTML渲染组件加载内容，按类名/标签定义样式，和CSS逻辑完全一致：

Html(
  data: processedHtml,
  style: {
    // 给所有p标签设置通用样式
    "p": Style(margin: Margins.only(bottom: 6)),
    // 按自定义类名设置单独样式
    ".line-1": Style(
      fontSize: FontSize(18),
      fontWeight: FontWeight.bold
    ),
    ".line-2": Style(color: Colors.grey),
  },
)

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