Jetpack Compose 如何删除 EditText/TextField 下划线并保持光标？

如何解决Jetpack Compose 如何删除 EditText/TextField 下划线并保持光标？

您好，我需要删除 TextField 中的下划线，因为当 TextField 为圆形时它看起来很难看。我已经将 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))
            },)

解决方法

使用 1.0.0（使用 1.0.0-beta08 测试）您可以定义这些属性：

• 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
        )
    )

,

如果您不需要 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
                        )
                    }
                }
            }
        }
    }
}