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

zpgglvta  于 2023-01-24  发布在  Android
关注(0)|答案(2)|浏览(92)

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

下面是代码:

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)) {

                }
            }
yuvru6vn

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)) {

                        }
                    }
                }
mklgxw1f

mklgxw1f2#

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

相关问题