android - jetpack compose shadow 奇怪的行为

Question

我正在尝试构建一个带阴影的文本字段

这是我取得的结果。

但是如果你放大图片你会看到白色文本框下有一些矩形背景(请看文本框外面的角，有背景)

我怎样才能删除那个背景？

@Composable
fun MyTextField() {

    var text by remember {
        mutableStateOf("")
    }

    Box(
        modifier = Modifier
            .padding(15.dp)
            .shadow(5.dp)
            .background(color = Color.White, shape = RoundedCornerShape(10.dp))
            .fillMaxWidth()
            .height(50.dp),
        contentAlignment = Alignment.Center,
    ) {
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text(text = "Phone number", color = Color.Gray, fontSize = 14.sp) },
            modifier = Modifier
                .fillMaxSize()
                .background(color = Color.Transparent, shape = RoundedCornerShape(10.dp)),

            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent
            ),
        )
    }


}

Answer 1

默认情况下，shadow 修饰符使用 RectangleShape，这是您出现问题的原因:

将相同的形状应用于阴影和背景修饰符:

val shape = RoundedCornerShape(10.dp)

Box(
    modifier = Modifier
        .padding(15.dp)
        .shadow(
            elevation = 5.dp,
            shape = shape
        )
        .background(color = Color.White, shape = shape)
        .fillMaxWidth()
        .height(50.dp),

    contentAlignment = Alignment.Center,
)