删除 jetpack compose 文本字段上的默认填充答案

【问题标题】：remove default padding on jetpack compose textfield删除 jetpack compose 文本字段上的默认填充
【发布时间】：2021-07-31 07:38:06
【问题描述】：

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

（右边的图像是我实现的结果。我画了一个边框，以便您可以看到它有填充，顺便说一句，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
    ),
)

【问题讨论】：

标签： android kotlin android-jetpack-compose

【解决方案1】：

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

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

【讨论】：

有什么想法为什么BasicTextFields onValueChange 会发送一个陈旧的值？
@azizbekian 我怀疑它与BasicTextField 有关，因为任何其他TextField 无论如何都在下面使用它。我建议您创建一个单独的问题，详细说明您的问题。

【解决方案2】：

谢谢大家，我确实使用了 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()
        }
    )
}

【讨论】：

恭喜
那你不应该把菲利普的答案标记为正确答案吗？
这个解决方案很好，但是出现了另一个问题，焦点底部指示器没有出现。

【解决方案3】：

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

这是在材料TextField 实现中使用的decorationBox 可组合的实现。

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

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。

我上面链接的官方文档显示了更多使用示例。

【讨论】：

【解决方案4】：

您可以将 TextField 放入 Box 并应用修饰符，例如

Box(
        modifier = Modifier.background(
            shape = RoundedCornerShape(percent = 10),
            color = colorBackgroundGray
        )
    ) {
        TextField(
            value = text,
            onValueChange = onValueChange,
            modifier = Modifier.fillMaxWidth().padding(8.dp, 0.dp, 0.dp, 0.dp)...
}

【讨论】：

【解决方案5】：

其实这是与生俱来的，它遵循物质准则。如果您想禁用它，另一种方法是显式设置 TextField 的高度，并将其与文本的字体大小匹配。这样它只会延伸到文本。另一种方法是查看 TextField 的来源。您可以复制源代码并进行修改以满足您的要求。前者听起来很容易解决，但后者也没什么大不了的。这是可行的，并且是根据您的需要自定义行为的推荐做法。另外，作为旁注，我认为禁用该填充不是一个好主意。它被添加到设计指南中，因为拥有它似乎非常明智和自然。有时，我们在考虑某些设计时会发现它们很有吸引力，但在实施时它们并不那么好。

【讨论】：