android Jetpack如何将卡中线圈图像上方的表面与卡底部对齐？

zpgglvta 于 2023-01-24 发布在 Android

关注(0)|答案(2)|浏览(94)

我不能想出一个解决方案，如何移动 * 表面 * 对象到底部的卡（图像），也许添加一些填充从底部。
它应该是这样的：

下面是代码：

Card(modifier = Modifier
                .fillMaxSize()
                .padding(8.dp),
                shape = RoundedCornerShape(12.dp),
                elevation = 4.dp,
                border = BorderStroke(2.dp, AppColors.mMain)) {

                AsyncImage(model = ImageRequest.Builder(LocalContext.current)
                    .data(it.background_image)
                    .crossfade(true)
                    .build(),
                    contentDescription = "Game Image")

                Surface(modifier = Modifier.fillMaxWidth()
                    .height(50.dp)
                    .padding(start = 35.dp, end = 35.dp),
                color = AppColors.mMain,
                    border = BorderStroke(2.dp, Color.Black),
                shape = RoundedCornerShape(12.dp)) {

                }
            }

android

来源：https://stackoverflow.com/questions/75090018/jetpack-compose-how-to-align-surface-over-coil-image-in-card-to-the-bottom-of-th

2条答案

按热度按时间

yuvru6vn1#

修改后的代码如下：

Card(modifier = Modifier
                    .fillMaxSize()
                    .padding(8.dp),
                    shape = RoundedCornerShape(12.dp),
                    elevation = 4.dp,
                    border = BorderStroke(2.dp, AppColors.mMain)
                ) {
                    Box {
                        AsyncImage(model = ImageRequest.Builder(LocalContext.current)
                            .data(it.background_image)
                            .crossfade(true)
                            .build(),
                            contentDescription = "Game Image")
                        Surface(modifier = Modifier.fillMaxWidth()
                            .height(50.dp)
                            .align(Alignment.BottomCenter)
                            .padding(start = 35.dp, end = 35.dp, bottom = 15.dp),
                            color = AppColors.mMain,
                            border = BorderStroke(2.dp, Color.Black),
                            shape = RoundedCornerShape(12.dp)) {

                        }
                    }
                }

赞(0）回复(0）举报 2023-01-24

mklgxw1f2#

在你的卡片中使用盒子，把图像和表面放在里面，然后在表面的修饰符中添加.align（对齐.底部居中）。

赞(0）回复(0）举报 2023-01-24