Jetpack Compose中在Markdown插入自定义音频播放器Composable的问题求助

问题根源在于你用了**行内占位（InlineTextContent）**来渲染大尺寸的音频播放器——这种方式原本是为小尺寸行内元素（比如图标、小图片）设计的，当播放器尺寸接近全屏宽、高度达190.sp时，行内布局无法正确分配空间，导致文本和播放器重叠。

要实现mp3链接显示独立播放器、后续文本正常换行的效果，应该把音频播放器作为块级元素渲染，而不是行内元素。以下是具体实现方案：

方案1：自定义Markdown块节点处理（推荐） #

通过扩展Markdown解析器，将.mp3链接识别为独立的块节点，渲染时单独生成音频播放器块，确保文本在播放器下方正常显示。

1.1 定义自定义块节点与解析器 #

import io.noties.markwon.AbstractBlockParser
import io.noties.markwon.BlockParser
import io.noties.markwon.BlockParserFactory
import io.noties.markwon.BlockNode
import io.noties.markwon.MarkwonPlugin
import io.noties.markwon.Parser
import io.noties.markwon.Renderer
import io.noties.markwon.node.Node

class Mp3LinkBlockExtension : MarkwonPlugin {
    override fun configureParser(builder: Parser.Builder) {
        builder.blockParserFactory(object : BlockParserFactory {
            override fun create(state: Parser.State): BlockParser {
                return Mp3LinkBlockParser(state)
            }
        })
    }

    override fun configureRenderer(builder: Renderer.Builder) {
        builder.nodeRendererFactory { context ->
            Mp3LinkNodeRenderer(context)
        }
    }
}

class Mp3LinkBlockParser(state: Parser.State) : AbstractBlockParser(state) {
    override fun tryContinue(state: Parser.State): Boolean = false

    override fun isContainer(): Boolean = false

    override fun parse(state: Parser.State) {
        val line = state.line.content.trim()
        // 匹配Markdown格式的mp3链接：[音频名称](xxx.mp3)
        if (line.matches(Regex("\\[.*\\]\\(.+\\.mp3\\)"))) {
            val text = line.substring(1, line.indexOf("]("))
            val url = line.substring(line.indexOf("](") + 2, line.length - 1)
            state.pushNode(Mp3LinkNode(text, url))
            state.closeBlock()
        }
    }
}

class Mp3LinkNode(val displayText: String, val audioUrl: String) : BlockNode()

1.2 自定义节点渲染器 #

class Mp3LinkNodeRenderer(private val context: Renderer.Context) : NodeRenderer {
    override fun render(node: Node) {
        node as Mp3LinkNode
        // 将音频播放器作为块级元素添加到渲染流中
        context.renderer().addBlock {
            AudioPlayer(
                url = node.audioUrl,
                modifier = Modifier.fillMaxWidth().height(190.sp.toDp()),
                alignment = Alignment.Center
            )
        }
    }

    override fun handlesNode(node: Node): Boolean {
        return node is Mp3LinkNode
    }
}

1.3 初始化Markwon时加载扩展 #

val markwon = Markwon.Builder(context)
    .usePlugin(Mp3LinkBlockExtension())
    // 保留你原有的其他配置（比如图片加载、样式等）
    .build()

方案2：调整InlineContent占位符（临时 workaround） #

如果不想修改解析逻辑，可强行将行内占位符设置为块级尺寸，但这种方式可能存在布局兼容性问题：

val INLINE_TEXT_WIDTH = Constraints.Infinity // 填充父容器宽度
val INLINE_TEXT_HEIGHT = 190.sp.toPx()

inlineContent = mapOf(
    URL to InlineTextContent(
        Placeholder(
            width = INLINE_TEXT_WIDTH,
            height = INLINE_TEXT_HEIGHT,
            placeholderVerticalAlign = PlaceholderVerticalAlign.Top
        ) { context ->
            AudioPlayer(
                context,
                modifier = Modifier.fillMaxWidth().height(190.sp.toDp()),
                alignment = Alignment.Center
            )
        }
    )
)

这种方式通过让占位符占据整行宽度、顶部对齐，迫使文本换行到播放器下方，但本质还是行内元素，不如方案1稳定。

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