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 的修飾符中。