如何解决Jetpack撰写:自定义TextField设计
通常,Jetpack Compose中的大多数组件似乎都很容易定制。
但是,TextField
不能说相同。例如,说我想做这样的事情:
有人会认为只包装BaseTextField
就可以了。但是,看来BaseTextField
组件中有错误,而我有opened an issue。此错误将不允许用户在已经将焦点从文本字段移开之后再对其进行聚焦,直到重新渲染组件为止。
为此,我尝试自定义OutlinedTextField
和TextField
组件,但是无法自定义它们,使其看起来如上图所示。不是因为光标颜色使用了activeColor
属性,我才可以使它起作用。
创建类似于上面的可用文本字段的合适解决方法是什么?
解决方法
使用 1.0.0-beta06
,您可以使用以下内容:
TextField(
value = text,onValueChange = { /*...*/},label = { Text("") },shape = RoundedCornerShape(8.dp),trailingIcon = { Icon(Icons.Filled.Add,"") },colors = TextFieldDefaults.textFieldColors(
backgroundColor = ....,focusedIndicatorColor = Color.Transparent,unfocusedIndicatorColor = .....)
)
,
通过这个例子你可以学到很多东西。使用 1.0.0,您可以这样做:
Column {
var textState by remember { mutableStateOf("") }
val maxLength = 110
val lightBlue = Color(0xffd8e6ff)
val blue = Color(0xff76a9ff)
Text(
text = "Caption",modifier = Modifier
.fillMaxWidth()
.padding(bottom = 4.dp),textAlign = TextAlign.Start,color = blue
)
TextField(
modifier = Modifier.fillMaxWidth(),value = textState,colors = TextFieldDefaults.textFieldColors(
backgroundColor = lightBlue,cursorColor = Color.Black,disabledLabelColor = lightBlue,focusedIndicatorColor = Color.Transparent,unfocusedIndicatorColor = Color.Transparent
),onValueChange = {
if (it.length <= maxLength) textState = it
},singleLine = true,trailingIcon = {
if (textState.isNotEmpty()) {
IconButton(onClick = { textState = "" }) {
Icon(
imageVector = Icons.Outlined.Close,contentDescription = null
)
}
}
}
)
Text(
text = "${textState.length} / $maxLength",modifier = Modifier
.fillMaxWidth()
.padding(top = 4.dp),textAlign = TextAlign.End,color = blue
)
}
,
好吧,在解决issue I mentioned之前,选择是:
- 回滚到撰写版本
1.0.0-alpha04
(在alpha05
中引入了问题) - 为
TextField
或OutlinedTextField
添加边框,如下所示:TextField( value = myValue,onValueChange = myOnChange,modifier = Modifier.clip(myShape).border(5.dp,myColor) )
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。