Jetpack compose 如何模糊文本区域并将其与卡片底部对齐

Question

我想在卡片底部放置文本，并用半透明颜色模糊文本区域。

这是我目前所拥有的。

我要实现的设计是这样的。（收集区与卡片特定部分）

这是我的代码：

@Composable
fun CollectionCardArea(
    collection: Collection,
    cardWidth: Dp
) {
    Card(
        modifier = Modifier
            .width(cardWidth)
            .padding(start = 2.dp, end = 25.dp, bottom = 5.dp, top = 0.dp)
            .clickable { },
        shape = RoundedCornerShape(6),
        elevation = 4.dp
    ) {
        Box(modifier = Modifier
            .fillMaxSize(),
        ) {
            Image(
                painter = rememberImagePainter(
                    data = collection.image
                ),
                contentDescription = collection.name,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxSize()
            )
        }
        Box(modifier = Modifier
            .fillMaxWidth()
            .height(20.dp)
            .background(Color.Transparent)
        ) {
            Text(text = collection.name, color = Color.White)
        }

    }
}

问题是我找不到将文本与屏幕底部对齐的方法。
另外，我不知道如何模糊文本区域。

Answer 1

首先，Card无法定位自己的child（当有多个children时）。所以你需要使用 Column、Row、Box 之类的东西，或者在卡片本身内部。所以而不是像这样的树

- Card
  - Box
    - Image
  - Box
    - Text

你可以这样试试

- Card
  - Box
    - Box
      - Image
    - Box
      - Text

其次，Jetpack-Compose中的模糊可以参考这个。但是 API 本身仅适用于 Android 12 及更高版本。

Jetpack compose 如何模糊文本区域并将其与卡片底部对齐

Jetpack compose how to blur text area and line it to the bottom of a card

android

kotlin

android-jetpack-compose