Jetpack Compose中OutlinedTextField设置背景色无效果如何解决？

问题原因 #

Jetpack Compose 1.0.x版本中，OutlinedTextField的backgroundColor配置项仅对填充式TextField生效，描边输入框默认强制使用透明背景，手动赋值也不会触发渲染。

解决方案 #

直接给OutlinedTextField的modifier添加background属性时，同时传入你配置的CircleShape参数即可，这样背景只会在你指定的圆形范围内渲染，不会出现矩形背景的问题。

修改后的核心代码如下：

OutlinedTextField(
    value = viewModel.query.value,
    onValueChange = { viewModel.updateQuery(it) },
    modifier = Modifier
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .navigationBarsWithImePadding()
        // 新增这行，指定背景色和对应形状
        .background(color = Color.White, shape = CircleShape),
    keyboardOptions = KeyboardOptions(
        capitalization = KeyboardCapitalization.Characters,
        autoCorrect = false,
        keyboardType = KeyboardType.Text,
        imeAction = ImeAction.None
    ),
    shape = CircleShape,
    // 这里的backgroundColor配置可以删除，不会生效
    colors = TextFieldDefaults.textFieldColors(),
    placeholder = { Text(stringResource(id = R.string.search_input_placeholder)) },
    maxLines = 1,
    singleLine = true
)

补充说明 #

• 注意background修饰符传入的shape要和OutlinedTextField本身配置的shape保持一致，就能保证背景和描边完全对齐，不会出现错位
• 该方案兼容Compose 1.0.4版本，无需升级依赖即可生效

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