0

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

这就是我的文本字段的样子:

我的文本字段

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

4

1 回答 1

2

使用1.0.0(用 测试1.0.0-beta07TextField遵循材料指南,并且没有内置参数可以更改此行为。
您应该使用BasicTextField带有一些特定样式的 a 。

否则,您可以使用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(), y),
                strokeWidth
            )
        },
    colors = TextFieldDefaults.textFieldColors(
        backgroundColor = Color.Transparent,
        focusedIndicatorColor =  Transparent,
        unfocusedIndicatorColor = Transparent,
        disabledIndicatorColor = Transparent
    )
)

在此处输入图像描述

于 2021-05-31T08:42:56.083 回答