喷气背包组成阴影奇怪的行为

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修饰符使用 a RectangleShape，这是您问题的原因：

对和修饰符应用相同的形状：shadowbackground

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