如何在Jetpack Compose中实现文本环绕图片布局？

我正在练习实现文本环绕图片的布局效果：文本位于图片左侧，当文本高度超出图片高度后，需占据屏幕的完整宽度。我想了解该效果应如何实现——是使用BoxWithConstraints、自定义Layout，还是仅通过Row、Column、Box这类基础Compose组件即可完成？

当前我的Compose代码如下：

Column(
    modifier = Modifier.fillMaxWidth()
) {
    Row(
        modifier = modifier.fillMaxWidth()
            .padding(horizontal = 8.dp)
    ) {

        Column(
            modifier = Modifier.weight(1f)
        ) {
            StarRatingBar(movieDetail.voteAverage)

            Text(
                color = Color.Black,
                fontWeight = FontWeight.SemiBold,
                text = movieDetail.genres.joinToString(" • ") { genre -> genre.name },
                fontSize = 16.sp,
                textAlign = TextAlign.Start
            )

            Text(
                color = Color.DarkGray,
                text = "Running time ${movieDetail.runtime.minutes}")
            Text(text = "Revenue $${movieDetail.revenue.formatNumberWithSuffix()}")
            /** Don't show if there is zero budget*/
            if (movieDetail.budget > 0) {
                Text(text = "Budget $${movieDetail.budget.formatNumberWithSuffix()}")
            }

            Text(
                color = Color.LightGray,
                fontSize = 22.sp,
                fontWeight = FontWeight.Bold,
                text = "Overview")


            Text(
                color = Color.White,
                modifier = Modifier.fillMaxWidth(),
                fontSize = 18.sp,
                fontWeight = FontWeight.SemiBold,
                text = movieDetail.overview
            )
        }

        KamelImage(
            resource = { asyncPainterResource(data = movieDetail.posterPath) },
            contentDescription = movieDetail.title,
            modifier = Modifier.size(150.dp, 250.dp).clip(RoundedCornerShape(8.dp)),
            contentScale = ContentScale.FillHeight,
            onLoading = {_ ->
                CircularProgressIndicator(
                    color = Color.Blue
                )
            },
            onFailure = {
                Image(imageVector = vectorResource(Res.drawable.compose_multiplatform), contentDescription = null)
            },
        )
    }
}

当前效果（文本未实现环绕）：

结论先行 #

仅靠Row、Column这类基础组件无法实现你要的文本环绕效果，需要用自定义Layout或者第三方布局库来实现，BoxWithConstraints只能帮你获取父容器尺寸，没法直接处理文本流式环绕逻辑。

具体实现方案 #

1. 自定义Layout（最灵活，推荐）

自定义Layout可以精确控制文本和图片的测量与布局逻辑，核心步骤：

• 先测量图片的宽高，确定它占据的右侧空间
• 测量文本时，先按「屏幕总宽度 - 图片宽度」限制宽度，得到这部分文本的高度
• 如果文本总高度超过图片高度，把超出的部分文本重新按「屏幕总宽度」测量
• 布局时：图片放在右上角，前半段文本放在图片左侧，后半段文本放在图片下方并占满整宽

简化示例代码：

@Composable
fun TextWrapImageLayout(
    modifier: Modifier = Modifier,
    image: @Composable () -> Unit,
    text: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = {
            text()
            image()
        }
    ) { measurables, constraints ->
        // 测量图片
        val imagePlaceable = measurables[1].measure(constraints.copy(minWidth = 0, minHeight = 0))
        val imageWidth = imagePlaceable.width
        val imageHeight = imagePlaceable.height

        // 第一阶段：测量受图片宽度限制的文本
        val constrainedTextConstraints = constraints.copy(
            maxWidth = constraints.maxWidth - imageWidth
        )
        val textPlaceable = measurables[0].measure(constrainedTextConstraints)

        var totalHeight = maxOf(textPlaceable.height, imageHeight)
        var bottomTextPlaceable: Placeable? = null

        // 如果文本高度超过图片高度，拆分并测量下半部分文本
        if (textPlaceable.height > imageHeight) {
            // 实际需借助TextLayoutResult拆分文本，此处为简化示例
            val bottomTextConstraints = constraints.copy(maxWidth = constraints.maxWidth)
            bottomTextPlaceable = measurables[0].measure(bottomTextConstraints)
            totalHeight = imageHeight + bottomTextPlaceable.height
        }

        // 设置布局尺寸
        layout(constraints.maxWidth, totalHeight) {
            // 放置图片到右上角
            imagePlaceable.placeRelative(
                x = constraints.maxWidth - imageWidth,
                y = 0
            )

            // 放置上半段文本
            textPlaceable.placeRelative(x = 0, y = 0)

            // 放置下半段文本（如果存在）
            bottomTextPlaceable?.placeRelative(x = 0, y = imageHeight)
        }
    }
}

使用时，将Overview文本和KamelImage传入该组件即可。

2. 第三方库（快速实现）

可以用现成的Compose流式布局库，比如io.github.fornewid:flow-layout-compose，这类库封装了文本环绕逻辑，直接传入文本和图片就能快速实现效果，省去自定义Layout的复杂逻辑。

3. 临时折中方案（不推荐动态内容）

如果只是临时测试，可以手动把长文本拆成两部分：

• 第一部分文本高度匹配图片高度，放在Row左侧Column
• 第二部分文本放在Row下方的Column，占满整宽
  但这种方法适配性极差，文本内容或图片尺寸变化时需手动调整，仅适合固定内容场景。

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