jetpack compose 無法將搜索欄背景顏色設置為白色

Question

當我嘗試將背景顏色設置為白色時，我有一個帶有文本字段的搜索欄，它帶有灰色，但是如果我將 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)
        )
    }
}
}

它的樣子：

背景和條形顏色都是白色，但看起來不同

Answer 1

在您的文本字段中添加這一行：

colors = TextFieldDefaults.textFieldColors(
    backgroundColor = Color.White)

Answer 2

移除背景修飾符：

//background(Color.White, shape = RoundedCornerShape(10.dp))

並使用：

 TextField(
         /* .... */
        shape = RoundedCornerShape(10.dp),
        colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.White),
 )