Jetpack Compose 无法将搜索栏背景颜色设置为白色
jetpack compose can't set search bar background color to white
我有一个带有文本字段的搜索栏,当我尝试将背景颜色设置为白色时,它带有灰色,但我可以将其设置为其他颜色,只有白色不起作用,如果我将 Textfiled 更改为 BasicTexfield,它工作正常但不能设置图标顶部开始
@Composable
fun DoctorListScreen(
navController: NavController,
viewModel: DoctorListViewModel = hiltViewModel()
) {
Surface(
color = Color.White,
modifier = Modifier.fillMaxSize(1f)
) {
Column {
Spacer(modifier = Modifier.padding(top = 15.dp))
SearchBar(
hint = "Klinik ara..", modifier = Modifier
.fillMaxWidth()
.padding(15.dp)
) {
}
CheckGender(modifier = Modifier.padding(15.dp))
}
}
}
@Composable
fun SearchBar(
modifier: Modifier = Modifier,
hint: String = "",
onSearch: (String) -> Unit = {},
) {
var text by remember {
mutableStateOf("")
}
var isHintDisplayed by remember {
mutableStateOf(hint != "")
}
Box(modifier = modifier) {
TextField(value = text, onValueChange = {
text = it
onSearch(it)
}, leadingIcon = {
Icon(painter = painterResource(id = R.drawable.search), contentDescription = null)
}, maxLines = 1,
singleLine = true,
modifier = Modifier
.fillMaxWidth()
.shadow(5.dp, shape = RoundedCornerShape(10.dp))
.background(Color.White, shape = RoundedCornerShape(10.dp))
.onFocusChanged {
isHintDisplayed = it.isFocused != true && text.isEmpty()
})
if (isHintDisplayed) {
Text(
text = hint,
color = Color.LightGray,
modifier = Modifier.padding(horizontal = 50.dp, vertical = 16.dp)
)
}
}
}
看起来像:
背景和条形颜色都是白色,但看起来不同
在您的文本字段中添加此行:
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.White)
删除背景修饰符:
//background(Color.White, shape = RoundedCornerShape(10.dp))
并使用:
TextField(
/* .... */
shape = RoundedCornerShape(10.dp),
colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.White),
)
我有一个带有文本字段的搜索栏,当我尝试将背景颜色设置为白色时,它带有灰色,但我可以将其设置为其他颜色,只有白色不起作用,如果我将 Textfiled 更改为 BasicTexfield,它工作正常但不能设置图标顶部开始
@Composable
fun DoctorListScreen(
navController: NavController,
viewModel: DoctorListViewModel = hiltViewModel()
) {
Surface(
color = Color.White,
modifier = Modifier.fillMaxSize(1f)
) {
Column {
Spacer(modifier = Modifier.padding(top = 15.dp))
SearchBar(
hint = "Klinik ara..", modifier = Modifier
.fillMaxWidth()
.padding(15.dp)
) {
}
CheckGender(modifier = Modifier.padding(15.dp))
}
}
}
@Composable
fun SearchBar(
modifier: Modifier = Modifier,
hint: String = "",
onSearch: (String) -> Unit = {},
) {
var text by remember {
mutableStateOf("")
}
var isHintDisplayed by remember {
mutableStateOf(hint != "")
}
Box(modifier = modifier) {
TextField(value = text, onValueChange = {
text = it
onSearch(it)
}, leadingIcon = {
Icon(painter = painterResource(id = R.drawable.search), contentDescription = null)
}, maxLines = 1,
singleLine = true,
modifier = Modifier
.fillMaxWidth()
.shadow(5.dp, shape = RoundedCornerShape(10.dp))
.background(Color.White, shape = RoundedCornerShape(10.dp))
.onFocusChanged {
isHintDisplayed = it.isFocused != true && text.isEmpty()
})
if (isHintDisplayed) {
Text(
text = hint,
color = Color.LightGray,
modifier = Modifier.padding(horizontal = 50.dp, vertical = 16.dp)
)
}
}
}
看起来像:
背景和条形颜色都是白色,但看起来不同
在您的文本字段中添加此行:
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.White)
删除背景修饰符:
//background(Color.White, shape = RoundedCornerShape(10.dp))
并使用:
TextField(
/* .... */
shape = RoundedCornerShape(10.dp),
colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.White),
)