我想删除文本字段的紫色线条/指示符(见下图)。这是可能的,还是我应该创建自己的自定义文本字段来实现这一点?
a2mppw5e1#
在最近的Jetpack合成UI Beta版本1.0.0-beta 01中已对此进行了更改,现在您可以通过
文本字段默认值具有所需颜色。
colors = TextFieldDefaults.textFieldColors( focusedIndicatorColor = Color.Transparent, disabledIndicatorColor = Color.Transparent, unfocusedIndicatorColor = Color.Transparent, backgroundColor = Color.LightGray, )
范例
TextField( value = searchText, onValueChange = { Log.d(HOME_COMPONENT, it) }, label = { Text(text = "Search") }, shape = RoundedCornerShape(10.dp), leadingIcon = { Image( painter = painterResource(id = R.drawable.ic_search), contentDescription = "search" ) }, colors = TextFieldDefaults.textFieldColors( focusedIndicatorColor = Color.Transparent, disabledIndicatorColor = Color.Transparent, unfocusedIndicatorColor = Color.Transparent, backgroundColor = Color.LightGray, ) )
图像:x1c 0d1x或者,如果要根据UI/UX自定义组件,请使用BasicTextField
@Composable fun ToolbarComponent() { var searchText by remember { mutableStateOf("") } Row( modifier = Modifier .padding(16.dp) .fillMaxWidth(), verticalAlignment = Alignment.CenterVertically ) { Icon( painter = painterResource(id = R.drawable.ic_search), contentDescription = "search", modifier = Modifier.size(20.dp), tint = iconTintColor ) Spacer(modifier = Modifier.size(16.dp)) BasicTextField( value = searchText, onValueChange = { searchText = it }, modifier = Modifier .background(shape = RoundedCornerShape(10.dp), color = Color.LightGray) .fillMaxWidth() .padding(16.dp), decorationBox = { Text(text = "Search") } ) } }
ie3xauqp2#
从1.2.0-alpha04开始,您可以将**TextFieldDecorationBox与BasicTextField一起使用,以基于Material Design文本字段构建自定义文本字段。在您的情况下,可以应用indicatorLine修改器来定义focusedIndicatorLineThickness和unfocusedIndicatorLineThickness**参数:
1.2.0-alpha04
TextFieldDecorationBox
BasicTextField
indicatorLine
focusedIndicatorLineThickness
unfocusedIndicatorLineThickness
var text by remember { mutableStateOf("") } val singleLine = true val enabled = true val interactionSource = remember { MutableInteractionSource() } BasicTextField( value = text, onValueChange = { text = it }, modifier = Modifier .indicatorLine(enabled, false, interactionSource, TextFieldDefaults.textFieldColors(), focusedIndicatorLineThickness = 0.dp, unfocusedIndicatorLineThickness = 0.dp ) .background( TextFieldDefaults.textFieldColors().backgroundColor(enabled).value, TextFieldDefaults.TextFieldShape ) .width(TextFieldDefaults.MinWidth), singleLine = singleLine, interactionSource = interactionSource ) { innerTextField -> TextFieldDecorationBox( value = text, innerTextField = innerTextField, enabled = enabled, singleLine = singleLine, visualTransformation = VisualTransformation.None, interactionSource = interactionSource, label = { Text("Label") } ) }
否则,您可以使用TextField定义以下属性:
TextField
比如:
TextField( .... colors = TextFieldDefaults.textFieldColors( backgroundColor = ....., focusedIndicatorColor = Transparent, unfocusedIndicatorColor = Transparent) )
pengsaosao3#
如果在中使用TextField,则可以将activeColor赋予Color.Transparent注:activeColor不仅用于指示器,还用于标签底部指示器和光标例如:
activeColor
Color.Transparent
var text: String by mutableStateOf("") TextField(value = text, onValueChange = { text = it }, activeColor = Color.Transparent)
根据文档,activeColor为active当文本字段处于焦点时,为标签、底部指示器和光标的颜色着色如果您想使用自己的,可以尝试BaseTextField
BaseTextField
5ktev3wc4#
实际上(版本阿尔法7)这是最简单的版本,我发现删除分隔符。将activeColor和inactiveColor设置为Color.Transparent,以便隐藏TextField下的指示行,无论其状态如何。如果仅将inactiveColor添加到Color.Transparent,则该行仅在TextField未获得焦点时才不可见添加textStyle = TextStyle(color = Color.White)以显示颜色,无论TextField是否获得焦点。这个解决方案将删除线,但也光标指示器。这不是最好的时刻,但它也是阿尔法实际上的组成。
inactiveColor
textStyle = TextStyle(color = Color.White)
TextField( value = MyValue, onValueChange = { }, textStyle = TextStyle(color = Color.White), activeColor = Color.Transparent, inactiveColor = Color.Transparent, shape = RoundedCornerShape(20) )
mo49yndu5#
可以如下所示设置TextField的颜色
colors = TextFieldDefaults.textFieldColors( unfocusedIndicatorColor = Color.Transparent, focusedIndicatorColor = Color.Transparent )
5条答案
按热度按时间a2mppw5e1#
在最近的Jetpack合成UI Beta版本1.0.0-beta 01中已对此进行了更改,现在您可以通过
文本字段默认值具有所需颜色。
范例
图像:x1c 0d1x
或者,如果要根据UI/UX自定义组件,请使用BasicTextField
ie3xauqp2#
从
1.2.0-alpha04
开始,您可以将**TextFieldDecorationBox
与BasicTextField
一起使用,以基于Material Design文本字段构建自定义文本字段。在您的情况下,可以应用
indicatorLine
修改器来定义focusedIndicatorLineThickness
和unfocusedIndicatorLineThickness
**参数:否则,您可以使用
TextField
定义以下属性:比如:
pengsaosao3#
如果在中使用
TextField
,则可以将activeColor
赋予Color.Transparent
注:
activeColor
不仅用于指示器,还用于标签底部指示器和光标例如:
根据文档,
activeColor
为active当文本字段处于焦点时,为标签、底部指示器和光标的颜色着色
如果您想使用自己的,可以尝试
BaseTextField
5ktev3wc4#
实际上(版本阿尔法7)这是最简单的版本,我发现删除分隔符。
将
activeColor
和inactiveColor
设置为Color.Transparent
,以便隐藏TextField下的指示行,无论其状态如何。如果仅将
inactiveColor
添加到Color.Transparent
,则该行仅在TextField未获得焦点时才不可见添加
textStyle = TextStyle(color = Color.White)
以显示颜色,无论TextField是否获得焦点。这个解决方案将删除线,但也光标指示器。这不是最好的时刻,但它也是阿尔法实际上的组成。
mo49yndu5#
可以如下所示设置TextField的颜色