删除喷气背包上的默认填充 撰写文本字段

Question

我想在 Jetpack Compose 中自定义可组合的文本字段。我正在尝试在下图中实现结果，但不知何故 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并取得了我想要的结果:)

@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()
        }
    )
}

Answer 2

在最新的alpha版本（androidx.compose.material：material：1.2.0-alpha04）中，他们公开了TextFieldDefaults.TextFieldDecorationBox。

这是在材料 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 附带的其余功能。

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

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

Answer 3

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

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

从 1.2.0-alpha04 开始，使 BasicTextField 看起来像 TextField 或 OutlinedTextField 要容易得多。您可以复制 TextField 的源代码，这非常短，因为大部分逻辑都移到了 TextFieldDefaults.TextFieldDecorationBox 中，并将所需的填充值传递给 TextFieldDefaults.TextFieldDecorationBox 的 contentPadding 参数。