如何在Jetpack Compose Material3中设置TextField背景透明?
Jetpack Compose Material3 TextField 背景透明设置方案
你通过Modifier.background(Color.Transparent)设置透明没用,是因为Material3的TextField自身内置了容器背景,这个背景的控制权不在Modifier的background上,而是要通过TextField的colors参数来配置。
正确的实现代码如下:
TextField( value = userNameValue.value, onValueChange = { userNameValue.value = it }, modifier = Modifier.fillMaxWidth(), label = { Text("Names") }, colors = TextFieldDefaults.colors( // 聚焦状态下的容器背景设为透明 focusedContainerColor = Color.Transparent, // 未聚焦状态下的容器背景设为透明 unfocusedContainerColor = Color.Transparent, // 可选:禁用状态也需要透明的话添加这行 disabledContainerColor = Color.Transparent ) )
如果还需要隐藏TextField底部的输入指示器,可以在TextFieldDefaults.colors里继续添加:
focusedIndicatorColor = Color.TransparentunfocusedIndicatorColor = Color.Transparent
这样就能让TextField完全呈现透明样式了。
内容的提问来源于stack exchange,提问作者Ashwin
相关产品推荐
相关产品推荐

