flutter_markdown如何实现内容折叠展开？v0.6.14版本标签失效问题

flutter_markdown ^0.6.14版本原生不支持HTML的<details>和<summary>折叠标签，该版本的默认解析器未实现这类标签的渲染逻辑，直接使用无法正常显示折叠效果。

解决办法 #

• 自定义标签渲染扩展：通过实现MarkdownElementBuilder手动处理这两个标签，将其映射为Flutter的ExpansionTile组件实现折叠功能。示例代码如下：

class DetailsElementBuilder extends MarkdownElementBuilder {
  @override
  Widget? visitElementAfter(Element element, TextStyle? preferredStyle) {
    if (element.localName == 'details') {
      final summaryElement = element.children?.firstWhere(
        (child) => child is Element && (child as Element).localName == 'summary',
        orElse: () => const Text(''),
      );
      final summaryText = summaryElement is Element 
          ? summaryElement.text 
          : (summaryElement as Text).data ?? '';
      final contentElements = element.children?.where((child) {
        return !(child is Element && (child as Element).localName == 'summary');
      }).toList() ?? [];

      return ExpansionTile(
        title: Text(summaryText),
        children: contentElements.map((child) {
          return MarkdownBody(data: child.text);
        }).toList(),
      );
    }
    return null;
  }
}

使用时在Markdown组件中注册该builder：

Markdown(
  data: yourMarkdownContent,
  builders: {
    'details': DetailsElementBuilder(),
  },
)

• 升级依赖版本：检查flutter_markdown的后续版本，确认是否已原生支持这两个标签，升级后即可直接使用（注意验证版本兼容性）。

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