[英]How to change TextField's indicator width in Jetpack Compose?
I've been wondering if there is a way to change TextField's indicator (underline) width.我一直想知道是否有办法更改 TextField 的指示符(下划线)宽度。
There isn't a parameter to achieve it since TextField
follows the Material guidelines.没有实现它的参数,因为
TextField
遵循 Material 指南。
You can use a custom modifier to draw a line at the bottom of the TextField
:您可以使用自定义修饰符在
TextField
的底部画一条线:
fun Modifier.drawCustomIndicatorLine(
indicatorBorder: BorderStroke,
indicatorPadding : Dp = 0.dp
): Modifier {
val strokeWidthDp = indicatorBorder.width
return drawWithContent {
drawContent()
if (strokeWidthDp == Dp.Hairline) return@drawWithContent
val strokeWidth = strokeWidthDp.value * density
val y = size.height - strokeWidth / 2
drawLine(
indicatorBorder.brush,
Offset((indicatorPadding).toPx(), y),
Offset(size.width - indicatorPadding.toPx(), y),
strokeWidth
)
}
}
Then use it and apply a Transparent
color to hide the default Indicator.然后使用它并应用
Transparent
颜色来隐藏默认指示器。
Something like:就像是:
val interactionSource = remember { MutableInteractionSource() }
val isFocused by interactionSource.collectIsFocusedAsState()
val indicatorColor = if (isFocused) Color.Red else Teal200
TextField(
value = text,
onValueChange = { text = it },
interactionSource = interactionSource,
modifier = Modifier.drawCustomIndicatorLine(
indicatorBorder = BorderStroke(1.dp,indicatorColor),
indicatorPadding = 10.dp
),
shape = RoundedCornerShape(8.dp),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.LightGray,
cursorColor = Color.Black,
focusedIndicatorColor = Transparent,
unfocusedIndicatorColor = Transparent,
disabledIndicatorColor = Transparent
)
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.