如何解决如何创建带下划线的 TextField,没有任何背景或边框?
我正在尝试创建一个 TextField,在 Jetpack 中使用下划线组合,但没有任何其他边框或背景。我该怎么做?
这是我目前使用的代码:
val query = remember {mutableStateOf("")}
TextField(
value = query.value,onValueChange = { newValue -> query.value = newValue },label={Text("Dummy",color = colorResource(id = R.color.fade_green))},textStyle = TextStyle(
textAlign = TextAlign.Start,color = colorResource(id = R.color.fade_green),fontFamily = FontFamily(Font(R.font.poppins_regular)),fontSize = 14.sp,),modifier = Modifier
.padding(start = 30.dp).border(0.dp,Color.Red),colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent
)
)
解决方法
使用 1.0.0-beta04
,您可以只使用:
var text by remember { mutableStateOf(TextFieldValue("")) }
TextField(
value = text,onValueChange = {
text = it
},label = { Text("label") },colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,//Color of indicator = underbar
focusedIndicatorColor = ....,unfocusedIndicatorColor = ....,disabledIndicatorColor = ....
)
)
如果您想更改 indicatorWidth
当前没有内置参数。
您可以使用 .drawBehind
修饰符来画一条线。类似的东西:
val interactionSource = remember { MutableInteractionSource() }
val isFocused by interactionSource.collectIsFocusedAsState()
val indicatorColor = if (isFocused) Color.Red else Color.Gray
val indicatorWidth = 4.dp
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(0f,y),Offset(size.width,strokeWidth
)
},focusedIndicatorColor = Transparent,unfocusedIndicatorColor = Transparent,disabledIndicatorColor = Transparent
)
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。