如何在jetpack compose中将drawable设置为图像背景？

Question

如何将可绘制资源设置为ImageJetpack 撰写的背景？

对应视图XML代码

<androidx.appcompat.widget.AppCompatImageView
    android:background="@drawable/drawable_black_circle"
    android:src="@drawable/app_logo"
    ... 
/>

我当前的代码，

Image(
    painter = painterResource(id = R.drawable.app_logo),
    contentDescription = null,
    modifier = Modifier
        .height(160.dp)
        .width(160.dp)
        .padding(32.dp),
)

Modifier.background()让我可以选择使用颜色作为背景。
同样寻找一种使用可绘制资源作为背景的方法。

注意：
寻找一种在图像中包含背景的方法。
不希望将图像包含在另一个具有背景的可组合项中。

Answer 1

在jetpack compose中设置背景图像

fun MainViews(){
  Box(
    modifier = with (Modifier){
      fillMaxSize()
        .paint(
           // Replace with your image id 
           painterResource(id = R.drawable.image),
           contentScale = ContentScale.FillBounds) 

})
{
  // Add more views here!
  Text("Hello Stack!")
}}

注意：我在 Android 手机上编写了这段代码，也许你遇到了一些语法错误

Answer 2

通过Jetpack compose，可以使用形状轻松绘制圆形背景或任何形状解决方案1：

Image(painterResource(id = R.drawable.avatar1), contentDescription = null,
        modifier = Modifier.size(160.dp).background(
            color = Color.Black,
            shape = CircleShape
        )
            )

解决方案 2：如果您想使用背景图片，可以使用：

修改器.paint

对于你的情况：

Image(
    painter = painterResource(id = R.drawable.app_logo),
    contentDescription = null,
    modifier = Modifier
        .height(160.dp)
        .width(160.dp)
        .paint(
            painter = painterResource(R.drawable.drawable_black_circle),
            contentScale = ContentScale.FillWidth
        )
        .padding(32.dp),
)

对于其他布局，我们也可以这样做。这是 ConstraintLayout 的示例

ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .paint(painterResource(id = R.drawable.ic_background_detail), contentScale = ContentScale.FillWidth)
    ) {

    }
  

Answer 3

您可以在一个中放置两张图像Box，因此主图像将位于背景之上。

如果您要广泛使用此类视图，您可以创建自己的可组合项，可以像这样简单地使用：

ImageWithBackground(
    painter = painterResource(id = R.drawable.app_logo),
    backgroundDrawableResId = R.drawable.background,
    contentDescription = "",
    modifier = Modifier
        .height(160.dp)
        .width(160.dp)
        .padding(32.dp),
)

可组合：

@Composable
fun ImageWithBackground(
    painter: Painter,
    @DrawableRes backgroundDrawableResId: Int,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
) {
    Box(
        modifier = modifier
    ) {
        Image(
            painter = painterResource(backgroundDrawableResId),
            contentDescription = null,
            modifier = Modifier
                .matchParentSize()
        )
        Image(
            painter = painter,
            contentDescription = contentDescription,
            alignment = alignment,
            contentScale = contentScale,
            alpha = alpha,
            colorFilter = colorFilter,
            modifier = Modifier
                .matchParentSize()
        )
    }
}