android - 使用 Jetpack Compose 将文本字段标签与下划线的开头对齐
问题描述
默认情况下,Textfield 的标签与下划线的起始位置不对齐。标签文本之前似乎有一些空白区域。
这就是我的文本字段的样子:
我希望我的文本字段的标签与下划线的起始位置对齐。我如何实现这一目标?
解决方案
使用1.0.0
(用 测试1.0.0-beta07
)TextField
遵循材料指南,并且没有内置参数可以更改此行为。
您应该使用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
)
)
推荐阅读
- python - AttributeError:“numpy.ndarray”对象没有属性“pdf”
- tomcat - 我们可以将axis2文件夹放在另一个文件夹下,而不是直接放在webapps下吗?
- javascript - 纯粹使用 javascript 或 jquery 对动态生成的 html 进行分页
- pdf - 是否有任何库可以编辑 pdf 文件中的现有页脚?
- postgresql - 我如何将信息从我的 MicroService A 的 postgers DB 共享到 MicroService B
- c++ - 伺服没有正确移动
- databricks - Databricks 删除增量表?
- c# - CSharpScript:动态脚本参数名称
- wordpress - 如何更改 Wordpress 中的“/portfolio”标签?
- android - 使状态栏悬停在活动上时遇到问题