Jetpack 撰写如何模糊文本区域并将其排列到卡片底部

阿卜杜勒·费尔塔 |

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

这就是我到目前为止所拥有的。

我想要实现的设计是这样的。(带有卡片特定部分的收集区)

这是我的代码:

@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)
        }

    }
}

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

阿克塞尔布赖恩

首先, Card 不能定位自己的孩子(当有多个孩子时)。因此,您需要在卡本身内部使用 , , 或 else 之ColumnRow的东西。Box所以取而代之的是一棵这样的树

- Card
  - Box
    - Image
  - Box
    - Text

你可以这样试试

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章