删除 jetpack 撰写文本字段上的默认填充

Question

我想TextField在 Jetpack Compose 中自定义可组合项。我试图实现下图中的结果，但不知何故TextField有一些默认填充，我找不到如何更改其值。我想删除默认填充并自定义它

（右边的图像是我实现的结果。我画了一个边框，这样你就可以看到它有填充，顺便说一句，下面的TextField只是Text可组合项，它们不是TextFields）

下面是我的TextField代码

TextField(
    value = "",
    onValueChange = {},
    modifier = Modifier
        .weight(1F)
        .padding(0.dp)
        .border(width = 1.dp, color = Color.Red),
    placeholder = {
        Text(
            "5555 5555 5555 5555", style = TextStyle(
                color = Color.Gray
            )
        )
    },
    colors = TextFieldDefaults.textFieldColors(
        backgroundColor = Color.Transparent,
        unfocusedIndicatorColor = Color.Transparent,
        focusedIndicatorColor = Color.Transparent
    ),
)

Answer 1

您可以使用BasicTextField，它是一个没有任何装饰的纯文本字段。请注意，它也没有占位符/提示，如果需要，您必须自己实现它们。

BasicTextField(value = "", onValueChange = {}, Modifier.fillMaxWidth())

从1.2.0-alpha04开始，让你的BasicTextField看起来像TextField或就容易多了OutlinedTextField。您可以复制 的源代码TextField（由于大部分逻辑已移至 ），因此源代码非常短TextFieldDefaults.TextFieldDecorationBox，并将所需的填充值传递到contentPadding的参数中TextFieldDefaults.TextFieldDecorationBox。

Answer 2

在最新的 alpha 版本 ( androidx.compose.material:material:1.2.0-alpha04 ) 中，他们暴露了TextFieldDefaults.TextFieldDecorationBox。

decorationBox这是材质实现中使用的可组合项的实现TextField。

您可以按如下方式使用它：

val interactionSource = remember { MutableInteractionSource() }
BasicTextField(
    value = value,
    onValueChange = onValueChange,
    modifier = modifier,
    visualTransformation = visualTransformation,
    interactionSource = interactionSource,
    enabled = enabled,
    singleLine = singleLine,
) { innerTextField ->
    TextFieldDefaults.TextFieldDecorationBox(
        value = value,
        visualTransformation = visualTransformation,
        innerTextField = innerTextField,
        singleLine = singleLine,
        enabled = enabled,
        interactionSource = interactionSource,
        contentPadding = PaddingValues(0.dp), // this is how you can remove the padding
    )
}

这将允许您删除填充，但仍然可以获得TextField.

MutableInteractionSource请记住对BasicTextField和 都使用相同的值TextFieldDefaults.TextFieldDecorationBox。

我上面链接的官方文档显示了更多示例（如果其用法）。

Answer 3

谢谢大家，我确实使用了 BasicTextField 并达到了我想要的结果:)

@Composable
fun BottomOutlineTextField(placeholder: String, value: String, onValueChange: (String) -> Unit) {

    BasicTextField(
        modifier = Modifier.fillMaxWidth(),
        value = value,
        onValueChange = onValueChange,
        textStyle = TextStyle(
            color = if (isSystemInDarkTheme()) Color(0xFF969EBD) else Color.Gray
        ),
        decorationBox = { innerTextField ->
            Row(modifier = Modifier.fillMaxWidth()) {
                if (value.isEmpty()) {
                    Text(
                        text = placeholder,
                        color = if (isSystemInDarkTheme()) Color(0xFF969EBD) else Color.Gray,
                        fontSize = 14.sp
                    )
                }
            }
            innerTextField()
        }
    )
}