Jetpack Compose 中的图像渐变

Question

这是我的组件：

@Composable
fun Cover(
    name: String,
    imageRes: Int,
    modifier: Modifier = Modifier.padding(16.dp, 8.dp)
) {
    Box(modifier) {
        Card(
            shape = RoundedCornerShape(4.dp),
            backgroundColor = MaterialTheme.colors.secondary,
            elevation = 4.dp
        ) {
            Stack {
                Image(
                    imageResource(imageRes),
                    modifier = Modifier
                        .gravity(Alignment.Center)
                        .aspectRatio(2f),
                    contentScale = ContentScale.Crop,
                )

                Text(
                    text = name,
                    modifier = Modifier
                        .gravity(Alignment.BottomStart)
                        .padding(8.dp),
                    style = MaterialTheme.typography.h6
                )
            }
        }
    }
}

这是它的外观：

我想在上面Image和后面显示一个暗渐变，Text以便文本易于阅读。我想我将不得不使用LinearGradient或RadialGradient但由于缺乏文档我无法做到。

编辑：这就是我想要做的，但使用 Jetpack Compose。

Answer 1

你可以使用类似的东西：

var sizeImage by remember { mutableStateOf(IntSize.Zero) }

val gradient = Brush.verticalGradient(
    colors = listOf(Color.Transparent, Color.Black),
    startY = sizeImage.height.toFloat()/3,  // 1/3
    endY = sizeImage.height.toFloat()
)

Box(){
    Image(painter = painterResource(id = R.drawable.banner),
        contentDescription = "",
    modifier = Modifier.onGloballyPositioned {
        sizeImage = it.size
    })
    Box(modifier = Modifier.matchParentSize().background(gradient))
}

原来的：

后：

Image()您还可以使用修改器将渐变应用于.drawWithCache，并onDrawWithContent允许开发人员在布局内容之前或之后进行绘制。

  Image(painter = painterResource(id = R.drawable.conero),
      contentDescription = "",
      modifier = Modifier.drawWithCache {
          val gradient = Brush.verticalGradient(
              colors = listOf(Color.Transparent, Color.Black),
              startY = size.height/3,
              endY = size.height
          )
          onDrawWithContent {
              drawContent()
              drawRect(gradient,blendMode = BlendMode.Multiply)
          }
      }
  )

Answer 2

撰写版本1.2.1截至2022-08-22

import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun Cover(
    name: String,
    @DrawableRes imageRes: Int,
    modifier: Modifier = Modifier
) {
    Box(modifier.padding(16.dp, 8.dp)) {
        Card(shape = RoundedCornerShape(4.dp)) {
            Box {
                Image(
                    painter = painterResource(imageRes),
                    contentDescription = "image: $name",
                    modifier = Modifier
                        .align(Alignment.Center),
                    contentScale = ContentScale.Crop
                )
                Text(
                    text = name,
                    modifier = Modifier
                        .align(Alignment.BottomStart)
                        .fillMaxWidth()
                        .background(
                            Brush.verticalGradient(
                                0F to Color.Transparent,
                                .5F to Color.Black.copy(alpha = 0.5F),
                                1F to Color.Black.copy(alpha = 0.8F)
                            )
                        )
                        .padding(start = 8.dp, end = 8.dp, bottom = 8.dp, top = 24.dp),
                    color = Color.White
                )
            }
        }
    }
}

@Preview
@Composable
fun ComicsPreview() {
    Cover(
        "Comics",
        R.drawable.comics
    )
}

@vitor-ramos的更新答案

1.0.0-alpha09

import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.AmbientDensity
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.unit.dp
import tech.abd3lraouf.learn.compose.kombose.ui.theme.typography

@Composable
fun Cover(
    name: String,
    @DrawableRes imageRes: Int,
    modifier: Modifier = Modifier
) {
    val image = imageResource(imageRes)
    val density = AmbientDensity.current.density
    val width = remember { mutableStateOf(0f) }
    val height = remember { mutableStateOf(0f) }
    Box(
        modifier
            .padding(16.dp, 8.dp)
    ) {
        Card(
            shape = RoundedCornerShape(4.dp),
            backgroundColor = MaterialTheme.colors.secondary,
            elevation = 4.dp
        ) {
            Box {
                Image(
                    image,
                    modifier = Modifier
                        .align(Alignment.Center)
                        .aspectRatio(2f)
                        .onGloballyPositioned {
                            width.value = it.size.width / density
                            height.value = it.size.height / density
                        },
                    contentScale = ContentScale.Crop,
                )
                Column(
                    Modifier
                        .size(width.value.dp, height.value.dp)
                        .background(
                            Brush.verticalGradient(
                                listOf(Color.Transparent, Color.Black),
                                image.height * 0.6F,
                                image.height * 1F
                            )
                        )
                ) {}
                Text(
                    text = name,
                    modifier = Modifier
                        .align(Alignment.BottomStart)
                        .padding(8.dp),
                    style = typography.body2,
                    color = Color.White
                )
            }
        }
    }
}

另外，请注意渐变如何绘制其高度的控制。

输出

Answer 3

哇，那个花了几个小时；）

您可以使用Modifier.background一个VerticalGradient。我使用 Column 来保存修饰符并进行计算以获得图像大小，但您的解决方案可能会有所不同，您可以以不同的方式计算或存储大小，并将修饰符放在其他地方。我在代码中留下了两个 TODO，以便您可以调整渐变。

@Composable
fun Cover(
    name: String,
    imageRes: Int,
    modifier: Modifier = Modifier.padding(16.dp, 8.dp)
) {
    val density = DensityAmbient.current.density
    val width = remember { mutableStateOf(0f) }
    val height = remember { mutableStateOf(0f) }
    Box(modifier) {
        Card(
            shape = RoundedCornerShape(4.dp),
            backgroundColor = MaterialTheme.colors.secondary,
            elevation = 4.dp
        ) {
            Stack {
                Image(
                    imageResource(imageRes),
                    modifier = Modifier
                        .gravity(Alignment.Center)
                        .aspectRatio(2f)
                        .onPositioned {
                            width.value = it.size.width / density
                            height.value = it.size.height / density
                        },
                    contentScale = ContentScale.Crop,
                )
                Column(
                    Modifier.size(width.value.dp, height.value.dp)
                        .background(
                            VerticalGradient(
                                listOf(Color.Transparent, Color.Black),
                                0f,  // TODO: set start
                                500f,  // TODO: set end
                            )
                        )
                ) {}
                Text(
                    text = name,
                    modifier = Modifier.gravity(Alignment.BottomStart)
                        .padding(8.dp),
                    style = typography.h6,
                )
            }
        }
    }
}

这是我的样本的样子：

Answer 4

你也可以尝试这个方法

Image(
  painterResource(R.drawable.something),
  null,
  Modifier
  .drawWithCache {
    onDrawWithContent {
      drawContent()
      drawRect(Brush.verticalGradient(
        0.5f to Color.White.copy(alpha=0F), 
        1F to Color.White
      ))
    }
  },
)