Jetpack Compose：OutlinedTextField 中没有背景

Question

我的 Compose 布局中有两层：一层用于实际内容，上面一层是盒子包装 OutlinedTextField 用于搜索查询。

示例代码如下：

// Placeholder for layout content
Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = stringResource(id = R.string.lorem_ipsum),
        color = Color.Gray
    )
}

// Overlaying Box with OutlinedTextField
Box(modifier = Modifier
    .padding(start = 16.dp, end = 16.dp, bottom = 16.dp, top = 64.dp)
) {
    OutlinedTextField(
        value = viewModel.query.value,
        onValueChange = { viewModel.updateQuery(it) },
        modifier = Modifier
            .fillMaxWidth()
            .align(Alignment.BottomCenter)
            .navigationBarsWithImePadding(),
        keyboardOptions = KeyboardOptions(
            capitalization = KeyboardCapitalization.Characters,
            autoCorrect = false,
            keyboardType = KeyboardType.Text,
            imeAction = ImeAction.None
        ),
        shape = CircleShape,
        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = Color.White
        ),
        placeholder = { Text(stringResource(id = R.string.search_input_placeholder)) },
        maxLines = 1,
        singleLine = true
    )
}

虽然我在设置

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

在 OutlinedTextField 中，背景保持透明，如以下屏幕截图所示：

在 OutlinedTextField's 修饰符上添加背景颜色会给整行一个矩形背景，这也不是想要的结果。

OutlinedTextField 及其 CircleShape 应该只有形状内部的背景。我怎样才能做到这一点？

我正在使用 Jetpack Compose 版本 1.0.4。

Answer 1

原因

不幸的是，在 1.0.4 版本中，OutlinedTextField 会忽略 backgroundColor 即使您指定它，因此您可以删除 colors 参数。

将在 1.1.0 中添加对它的支持：
https://android-review.googlesource.com/c/platform/frameworks/support/+/1741240
它已经存在于 1.1.0-alpha06 中，因此您可以根据需要使用它。您的原始代码应该会在该版本上产生预期的结果。

解决方案

为了达到你想要的效果（在 1.1.0 发布之前）你可以简单地添加一个具有相同形状的背景修饰符：

.background(Color.White, CircleShape)

由于修饰符的顺序很重要，您应该在应用所有填充后添加它（navigationBarsWithImePadding 在您的情况下）。像那样：

modifier = Modifier
  .fillMaxWidth()
  .align(Alignment.BottomCenter)
  .navigationBarsWithImePadding()
  .background(Color.White, CircleShape),

注意：另请注意，您不能使用此方法使用 label 参数，因为 TextField 和 label 将是高于轮廓形状，这两个形状的尺寸不再匹配。

结果

完整代码：

// Placeholder for layout content
Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = stringResource(id = R.string.lorem_ipsum),
        color = Color.Gray
    )
}

// Overlaying Box with OutlinedTextField
Box(modifier = Modifier
    .padding(start = 16.dp, end = 16.dp, bottom = 16.dp, top = 64.dp)
) {
    OutlinedTextField(
        value = viewModel.query.value,
        onValueChange = { viewModel.updateQuery(it) },
        modifier = Modifier
            .fillMaxWidth()
            .align(Alignment.BottomCenter)
            .navigationBarsWithImePadding()
            .background(Color.White, CircleShape),
        keyboardOptions = KeyboardOptions(
            capitalization = KeyboardCapitalization.Characters,
            autoCorrect = false,
            keyboardType = KeyboardType.Text,
            imeAction = ImeAction.None
        ),
        shape = CircleShape,
        placeholder = { Text(stringResource(id = R.string.search_input_placeholder)) },
        maxLines = 1,
        singleLine = true
    )
}

最终结果如何：

Jetpack Compose：OutlinedTextField 中没有背景

Jetpack Compose: No background in OutlinedTextField

android

android-jetpack

android-jetpack-compose

原因

解决方案

结果