Jetpack Compose阴影异常：如何移除TextField外的矩形背景？

问题出在你使用的shadow修饰符未指定形状，默认会生成矩形阴影，后续的background虽设置了圆角，但阴影的矩形边缘会在角落外侧显现出来。

修复步骤： #

• 给shadow修饰符添加shape参数，与background保持一致的RoundedCornerShape(10.dp)

修改后的代码： #

@Composable
fun MyTextField() {
    var text by remember { mutableStateOf("") }

    Box(
        modifier = Modifier
            .padding(15.dp)
            .shadow(5.dp, shape = RoundedCornerShape(10.dp)) // 添加shape参数匹配圆角
            .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
            ),
        )
    }
}

调整后阴影会跟随圆角形状生成，角落外侧的矩形背景就会消失。

内容的提问来源于stack exchange，提问作者nasibeyyubov