Составная карта с высотой не закруглена тенью

Если вам интересно, как сделать тени закругленными, измените Card(), чтобы он имел shape = RoundedCornerShape(16.dp).

По умолчанию Card использует форму RoundedCornerShape(12.dp), что придает ему закругленные углы, которые вы видите. Та же форма применяется и к тени, когда вы устанавливаете elevation, поэтому сама тень уже округлена на 12.dp.

Если тень не полностью видна, это потому, что для ее рисования недостаточно места. Родительский элемент Box имеет нижнее отступ 22.dp, а Card смещен на 20.dp по оси Y, оставляя только 2.dp внизу для тени, чего недостаточно для возвышения 8.dp.

Чтобы исправить это, просто увеличьте нижний отступ родительского элемента Box, чтобы у тени было достаточно места для отображения. Вот обновленный код.

@Composable
fun HotelImageCard(
    modifier: Modifier = Modifier
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 30.dp)
    ) {
        Box(
            modifier = modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(16.dp))
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(250.dp)
                    .background(Color.Gray)
            )

            Text(
                modifier = Modifier
                    .align(Alignment.TopCenter)
                    .background(color = Color.Blue)
                    .fillMaxWidth(),
                color = Color.White,
                textAlign = TextAlign.Center,
                text = "Top 11 Gourmet/Cuisine hotels in Bali"
            )

            Text(
                modifier = Modifier
                    .align(Alignment.BottomStart)
                    .padding(start = 16.dp, bottom = 16.dp),
                color = Color.White,
                text = "1/5"
            )
        }

        Text(
            modifier = Modifier
                .align(Alignment.BottomStart)
                .offset(y = 26.dp),
            color = Color.Gray,
            fontSize = 10.sp,
            text = "Sponsored"
        )

        Card(
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .offset(y = 20.dp)
                .padding(end = 16.dp),
            colors = CardDefaults.cardColors(containerColor = Color.White),
            elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
        ) {
            Column(
                modifier = Modifier
                    .padding(top = 8.dp, end = 16.dp, bottom = 4.dp, start = 16.dp),
                horizontalAlignment = Alignment.End
            ) {
                Text(
                    color = Color.Red,
                    fontWeight = FontWeight.SemiBold,
                    fontSize = 18.sp,
                    text = "$ 61,569"
                )

                Text(
                    color = Color.Gray,
                    fontSize = 10.sp,
                    text = "1 night with taxes"
                )
            }
        }
    }
}

Вот карта с красной тенью для лучшей видимости, благодаря которой закругленная тень четко выделяется. Я использовал RoundedCornerShape(12.dp) для тени, так как по умолчанию она соответствует форме, примененной к Card для обрезки. Код ниже предназначен только для проверки, поэтому не стесняйтесь его игнорировать. Я использую graphicsLayer для тени, так как именно это Card использует для визуализации тени.

@Composable
fun HotelImageCard(
    modifier: Modifier = Modifier
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 30.dp)
    ) {
        Box(
            modifier = modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(16.dp))
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(250.dp)
                    .background(Color.Gray)
            )

            Text(
                modifier = Modifier
                    .align(Alignment.TopCenter)
                    .background(color = Color.Blue)
                    .fillMaxWidth(),
                color = Color.White,
                textAlign = TextAlign.Center,
                text = "Top 11 Gourmet/Cuisine hotels in Bali"
            )

            Text(
                modifier = Modifier
                    .align(Alignment.BottomStart)
                    .padding(start = 16.dp, bottom = 16.dp),
                color = Color.White,
                text = "1/5"
            )
        }

        Text(
            modifier = Modifier
                .align(Alignment.BottomStart)
                .offset(y = 26.dp),
            color = Color.Gray,
            fontSize = 10.sp,
            text = "Sponsored"
        )

        Card(
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .offset(y = 20.dp)
                .padding(end = 16.dp)
                .graphicsLayer{
                    shadowElevation = 8.dp.toPx()
                    shape = RoundedCornerShape(12.dp)
                    clip = false
                    spotShadowColor = Color.Red
                },
            colors = CardDefaults.cardColors(containerColor = Color.White),
//            elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
        ) {
            Column(
                modifier = Modifier
                    .padding(top = 8.dp, end = 16.dp, bottom = 4.dp, start = 16.dp),
                horizontalAlignment = Alignment.End
            ) {
                Text(
                    color = Color.Red,
                    fontWeight = FontWeight.SemiBold,
                    fontSize = 18.sp,
                    text = "$ 61,569"
                )

                Text(
                    color = Color.Gray,
                    fontSize = 10.sp,
                    text = "1 night with taxes"
                )
            }
        }
    }
}

В предоставленном вами коде нет ничего плохого, и в таких случаях вы не всегда можете исправить тень, добавив отступы, поскольку могут потребоваться строгие требования.

В данном конкретном случае похоже, что тень обрезается контейнером. Я часто наблюдаю такое поведение, когда LazyColumn вместо этого обрезает размер контента, обрезая его.

В этом случае вам нужно убедиться, что ваш ленивый контейнер занимает все пространство, которое, как ожидается, будет использовано, когда оно заполнится. В базовом сценарии это просто Modifier.fillMaxSize():

LazyColumn(
    modifier = Modifier
        .fillMaxSize()
) {
    items(1) {
        HotelImageCard()
    }
}