嗨,我需要删除文本字段中的下划线,因为当文本字段是圆形时,它看起来很难看。我已将 activeColor 设置为透明,但光标不会显示(因为它是透明的)。如何删除下划线/activeColor并保留光标?
这是我的圆形文本字段代码:
@Composable
fun SearchBar(value: String) {
// we are creating a variable for
// getting a value of our text field.
val inputvalue = remember { mutableStateOf(TextFieldValue()) }
TextField(
// below line is used to get
// value of text field,
value = inputvalue.value,
// below line is used to get value in text field
// on value change in text field.
onValueChange = { inputvalue.value = it },
// below line is used to add placeholder
// for our text field.
placeholder = { Text(text = "Firmanavn") },
// modifier is use to add padding
// to our text field, and a circular border
modifier = Modifier.padding(all = 16.dp).fillMaxWidth().border(1.dp, Color.LightGray, CircleShape),
shape = CircleShape,
// keyboard options is used to modify
// the keyboard for text field.
keyboardOptions = KeyboardOptions(
// below line is use for capitalization
// inside our text field.
capitalization = KeyboardCapitalization.None,
// below line is to enable auto
// correct in our keyboard.
autoCorrect = true,
// below line is used to specify our
// type of keyboard such as text, number, phone.
keyboardType = KeyboardType.Text,
),
// below line is use to specify
// styling for our text field value.
textStyle = TextStyle(color = Color.Black,
// below line is used to add font
// size for our text field
fontSize = TextUnit.Companion.Sp(value = 15),
// below line is use to change font family.
fontFamily = FontFamily.SansSerif),
// below line is use to give
// max lines for our text field.
maxLines = 1,
// active color is use to change
// color when text field is focused.
activeColor = Color.Gray,
// single line boolean is use to avoid
// textfield entering in multiple lines.
singleLine = true,
// inactive color is use to change
// color when text field is not focused.
inactiveColor = Color.Transparent,
backgroundColor = colorResource(id = R.color.white_light),
// trailing icons is use to add
// icon to the end of tet field.
trailingIcon = {
Icon(Icons.Filled.Search, tint = colorResource(id = R.color.purple_700))
},
)
您可以定义这些属性来应用透明颜色:
focusedIndicatorColor
unfocusedIndicatorColor
disabledIndicatorColor
类似:
TextField(
//..
colors = TextFieldDefaults.textFieldColors(
textColor = Color.Gray,
disabledTextColor = Color.Transparent,
backgroundColor = Color.White,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent
)
)
从 1.2.0 开始,您还可以将新的
OutlinedTextFieldDecorationBox
与 BasicTextField
一起使用来自定义边框或指示线。
val interactionSource = remember { MutableInteractionSource() }
val enabled = true
val singleLine = true
val colors = TextFieldDefaults.outlinedTextFieldColors()
BasicTextField(
value = value,
onValueChange = onValueChange,
modifier = modifier,
// internal implementation of the BasicTextField will dispatch focus events
interactionSource = interactionSource,
enabled = enabled,
singleLine = singleLine
) {
TextFieldDefaults.OutlinedTextFieldDecorationBox(
value = value,
visualTransformation = VisualTransformation.None,
innerTextField = it,
// same interaction source as the one passed to BasicTextField to read focus state
// for text field styling
interactionSource = interactionSource,
enabled = enabled,
singleLine = singleLine,
// update border thickness and shape
border = {
TextFieldDefaults.BorderBox(
enabled = enabled,
isError = false,
colors = colors,
interactionSource = interactionSource,
shape = CircleShape,
unfocusedBorderThickness = 1.dp,
focusedBorderThickness = 1.dp
)
}
)
}
您还可以使用
TextFieldDecorationBox
应用 indicatorLine
修饰符来指定 focusedIndicatorLineThickness
和 unfocusedIndicatorLineThickness
值:
val colors = TextFieldDefaults.textFieldColors(
backgroundColor = White,
focusedIndicatorColor = Gray)
BasicTextField(
modifier = Modifier
.border(1.dp, Color.LightGray, CircleShape)
.indicatorLine(
enabled = enabled,
isError = false,
colors = colors,
interactionSource = interactionSource,
focusedIndicatorLineThickness = 0.dp,
unfocusedIndicatorLineThickness = 0.dp
)
.background(colors.backgroundColor(enabled).value, CircleShape),
) {
TextFieldDecorationBox(
//...
colors = colors
)
}
如果您不需要 TextField 参数/功能(例如折叠标签、占位符等),您可以使用一层 Text / BasicTextField 来创建 SearchField (这是根据 issue FilledTextField: can't remove Bottom Indicator 的建议解决方法):
@Composable
fun Search(
hint: String,
endIcon: ImageVector? = Icons.Default.Cancel,
onValueChanged: (String) -> Unit,
) {
var textValue by remember { mutableStateOf(TextFieldValue()) }
Surface(
shape = RoundedCornerShape(50),
color = searchFieldColor
) {
Box(
modifier = Modifier
.preferredHeight(40.dp)
.padding(start = 16.dp, end = 12.dp),
contentAlignment = Alignment.CenterStart
)
{
if (textValue.text.isEmpty()) {
Text(
text = "Search...",
style = MaterialTheme.typography.body1.copy(color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium)),
)
}
Row(
verticalAlignment = Alignment.CenterVertically
) {
BasicTextField(
modifier = Modifier.weight(1f),
value = textValue,
onValueChange = { textValue = it; onValueChanged(textValue.text) },
singleLine = true,
cursorColor = YourColor,
)
endIcon?.let {
AnimatedVisibility(
visible = textValue.text.isNotEmpty(),
enter = fadeIn(),
exit = fadeOut()
) {
Image(
modifier = Modifier
.preferredSize(24.dp)
.clickable(
onClick = { textValue = TextFieldValue() },
indication = null
),
imageVector = endIcon,
colorFilter = iconColor
)
}
}
}
}
}
}
我认为最好的解决方案是使用 OutlinedTextField 组件,并尝试使其与您的设计相同,而不是使用已弃用的 TextFieldDefaults.textFieldColors。
OutlinedTextField(
value = searchText,
onValueChange = { searchText = it },
label = { Text("Search") },
modifier = Modifier
.fillMaxWidth()
.padding(8.dp),
keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Search),
keyboardActions = KeyboardActions(onSearch = { onSearch(searchText) }),
shape = MaterialTheme.shapes.large,
leadingIcon = {
Icon(
imageVector = Icons.Filled.Search,
contentDescription = "Search Icon"
)
},
)