如何移除带圆角边框的OutlinedTextField的角落白色背景?
移除Compose Material3 OutlinedTextField的方形白色背景
我正在尝试创建一个带圆角的OutlinedTextField,但背景仍能看到方形的白色区域,如何移除这个白色背景?

以下是我的可组合函数:
@OptIn(ExperimentalMaterial3Api::class) @Composable fun EmailEntry( modifier: Modifier = Modifier, isValidEmail: Boolean, onEmailChange: (String) -> Unit ) { var emailValue by remember { mutableStateOf("") } OutlinedTextField( modifier = modifier.background( shape = RoundedCornerShape(10.dp), color = MaterialTheme.colorScheme.backgroundInputEntry ), singleLine = true, value = emailValue, onValueChange = { newInput -> emailValue = newInput onEmailChange(newInput) }, placeholder = { Text(text = "Email address", color = MaterialTheme.colorScheme.placeholderEntry) }, trailingIcon = { if (isValidEmail) { Image( painter = painterResource(id = R.drawable.tick), contentDescription = "Valid email tick" ) } }, colors = TextFieldDefaults.outlinedTextFieldColors( focusedBorderColor = MaterialTheme.colorScheme.focusedInputEntryBorder, unfocusedBorderColor = Color.Transparent), shape = RoundedCornerShape(10.dp) ) }
预览代码:
@Composable @Preview(showBackground = true) fun PreviewEmailEntryValidEmail() { Surface { EmailEntry( isValidEmail = true, onEmailChange = { email -> Log.d("EMAIL_ENTRY", email) } ) } }
问题出在OutlinedTextField内部默认带有白色容器背景,仅在modifier上设置背景无法覆盖组件本身的容器色。只需在TextFieldDefaults.outlinedTextFieldColors中添加containerColor参数,将其设置为你自定义的背景色即可:
修改后的colors配置:
colors = TextFieldDefaults.outlinedTextFieldColors( focusedBorderColor = MaterialTheme.colorScheme.focusedInputEntryBorder, unfocusedBorderColor = Color.Transparent, containerColor = MaterialTheme.colorScheme.backgroundInputEntry // 添加该行覆盖默认白色背景 ),
保留modifier上的background设置可确保圆角裁剪生效,这样就能完全移除方形白色背景,实现带圆角的自定义背景输入框。
内容的提问来源于stack exchange,提问作者ant2009
相关产品推荐
相关产品推荐

