如何解决使用 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
)
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。