如何在Compose中为文本添加可绘制对象？

Question

就像在XML中我们经常将drawable添加到TextView中，那么在Jetpack Compose的Text中，android:drawableLeft和android:drawableRight的等效内容是什么？除了使用Row { Image() Text() }之外，是否有更简单的方法来实现这一点？

- Rajeev Shetty

Answer 1

据我所知，直到rc01版本，Compose都没有提供这个功能。但是，我可以使用ConstraintLayout来实现类似的效果。

@Composable
fun DrawableWrapper(
    modifier: Modifier = Modifier,
    @DrawableRes drawableTop: Int? = null,
    @DrawableRes drawableStart: Int? = null,
    @DrawableRes drawableBottom: Int? = null,
    @DrawableRes drawableEnd: Int? = null,
    content: @Composable () -> Unit,
) {
    ConstraintLayout(modifier) {
        val (refImgStart, refImgTop, refImgBottom, refImgEnd, refContent) = createRefs()
        Box(Modifier.constrainAs(refContent) {
            top.linkTo(drawableTop?.let { refImgTop.bottom } ?: parent.top)
            bottom.linkTo(drawableBottom?.let { refImgBottom.top } ?: parent.bottom)
            start.linkTo(drawableStart?.let { refImgStart.end } ?: parent.start)
            end.linkTo(drawableEnd?.let { refImgEnd.start } ?: parent.end)
        }) {
            content()
        }
        drawableTop?.let {
            Image(
                painter = painterResource(id = it),
                contentDescription = null,
                Modifier.constrainAs(refImgTop) {
                    top.linkTo(parent.top)
                    start.linkTo(refContent.start)
                    end.linkTo(refContent.end)
                }
            )
        }
        drawableStart?.let {
            Image(
                painter = painterResource(id = it),
                contentDescription = null,
                Modifier.constrainAs(refImgStart) {
                    top.linkTo(refContent.top)
                    bottom.linkTo(refContent.bottom)
                    start.linkTo(parent.start)
                }
            )
        }
        drawableBottom?.let {
            Image(
                painter = painterResource(id = it),
                contentDescription = null,
                Modifier.constrainAs(refImgBottom) {
                    bottom.linkTo(parent.bottom)
                    start.linkTo(refContent.start)
                    end.linkTo(refContent.end)
                }
            )
        }
        drawableEnd?.let {
            Image(
                painter = painterResource(id = it),
                contentDescription = null,
                Modifier.constrainAs(refImgEnd) {
                    top.linkTo(refContent.top)
                    bottom.linkTo(refContent.bottom)
                    end.linkTo(parent.end)
                }
            )
        }
    }
}

那么您可以使用以下方法：

DrawableWrapper(
    drawableTop = R.drawable.ic_android_orange,
    drawableStart = R.drawable.ic_android_orange,
    drawableBottom = R.drawable.ic_android_orange,
    drawableEnd = R.drawable.ic_android_orange,
) {
    Text(text = "A long Text ALL")
}

以下是结果：

- nglauber

---

这个约束布局没有接受修饰符的构造函数。有其他解决方案吗？ - Fahad-Android

如果我们提供文本和图像作为参数，并提供另一个参数来指定图像的位置，那么这个函数将更加灵活。这还可以减少代码重复。 - Farid