我想在卡片底部放置文本,并用半透明颜色模糊文本区域。
这就是我到目前为止所拥有的。
我想要实现的设计是这样的。(带有卡片特定部分的收集区)
这是我的代码:
@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 之Column
类Row
的东西。Box
所以取而代之的是一棵这样的树
- Card
- Box
- Image
- Box
- Text
你可以这样试试
- Card
- Box
- Box
- Image
- Box
- Text
其次,至于 Jetpack-Compose 中的模糊,您可以参考这个答案。但 API 本身仅适用于 Android 12 及更高版本。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句