Jetpack compose 如何将卡片中的线圈图像表面与卡片底部对齐？

Question

我无法想出如何将Surface object 移动到卡片底部的解决方案（图像），并且可能从底部添加一些填充。

它应该是这样的：

这是代码：

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

                }
            }

Answer 1

修改后的代码如下：

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

                        }
                    }
                }

Answer 2

在卡片中使用 Box，将 Image 和 Surface 放入其中，并将 add.align(Alignment.BottomCenter) 添加到 Surface 的修饰符中。