使用 Jetpack Compose 将文本字段标签与下划线的开头对齐

问题描述

默认情况下，Textfield 的标签不与下划线的起始位置对齐。标签文本前似乎有一些空白。

这是我的文本字段的样子：

我希望我的文本字段的标签与下划线的起始位置对齐。我如何实现这一目标？

解决方法

使用 1.0.0（使用 1.0.0-beta07 测试），TextField 遵循 Material 准则，并且没有内置参数来更改此行为。
您应该使用具有某些特定样式的 BasicTextField。

否则您可以使用 drawBehind 修饰符：

val interactionSource = remember { MutableInteractionSource() }
val isFocused by interactionSource.collectIsFocusedAsState()

val IndicatorUnfocusedWidth = 1.dp
val IndicatorFocusedWidth = 2.dp
val TextFieldPadding = 16.dp

val indicatorColor = if (isFocused) Color.Red else Color.Gray
val indicatorWidth = if (isFocused) IndicatorFocusedWidth else IndicatorUnfocusedWidth

TextField(
    value = text,onValueChange = {
        text = it },label={Text("Label")},interactionSource = interactionSource,modifier = Modifier
        .drawBehind {
            val strokeWidth = indicatorWidth.value * density
            val y = size.height - strokeWidth / 2
            drawLine(
                indicatorColor,Offset(TextFieldPadding.toPx(),y),Offset(size.width - TextFieldPadding.toPx(),strokeWidth
            )
        },colors = TextFieldDefaults.textFieldColors(
        backgroundColor = Color.Transparent,focusedIndicatorColor =  Transparent,unfocusedIndicatorColor = Transparent,disabledIndicatorColor = Transparent
    )
)