如何去除Androidx Compose Material中TextField的指示线？

Question

我想删除 TextField 的紫色线/指示器（参见下图）。 这是可能的还是我应该创建自己的自定义 TextField 来实现这一目标？

Answer 1

这已在最近的 Jetpack Compose UI Beta 版本 1.0.0-beta01 中进行了更改，现在您可以通过

TextFieldDefaults 具有所需的颜色。

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

图片：

或者如果您想根据您的 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")
            }
        )
    }
}

编辑：2023 年 5 月 31 日

在最新稳定版本 1.4.7 中，

TextFieldDefaults.textFieldColors

已弃用，因此现在我们可以使用 TextField 中的

TextFieldDefaults.colors

更改默认颜色。

 colors = TextFieldDefaults.colors(
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                cursorColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f),
                focusedContainerColor = Color.White,
                unfocusedContainerColor = Color.White,
            )

Answer 2

从

1.2.0-alpha04

开始，您可以将

TextFieldDecorationBox

与

BasicTextField

一起使用来构建基于 Material Design 文本字段的自定义文本字段。

在您的情况下，您可以应用

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

定义这些属性：

• focusedIndicatorColor

• unfocusedIndicatorColor

• disabledIndicatorColor

类似：

    TextField(
        ....
        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = .....,
            focusedIndicatorColor =  Transparent,
            unfocusedIndicatorColor = Transparent)
    )

Answer 3

如果您使用

TextField

，您可以将

activeColor

给

Color.Transparent

注意：

activeColor

不仅适用于指示器，还适用于标签底部指示器和光标

例如：

    var text: String by mutableStateOf("")
    TextField(value = text, onValueChange = {
        text = it
    }, activeColor = Color.Transparent)

根据文件，

activeColor

是

activeColor 标签、底部指示器和光标的颜色 当文本字段处于焦点时

如果您想使用自己的可以尝试

BaseTextField

Answer 4

实际上（版本 alpha 7）这是我发现的删除 Divider 最简单的版本。

将

activeColor

和

inactiveColor

设置为

Color.Transparent

，以便隐藏 TextField 下的指示线，无论其状态如何。

如果只在

inactiveColor

上添加

Color.Transparent

，只有当 TextField 没有聚焦时，该线才会不可见

添加

textStyle = TextStyle(color = Color.White)

以显示颜色，无论 TextField 是否获得焦点。

此解决方案将删除该线，但也会删除光标指示器。目前它不是最好的，但它也是 Compose 上实际的 alpha 版本。

TextField(
    value = MyValue,
    onValueChange = { },
    textStyle = TextStyle(color = Color.White),
    activeColor = Color.Transparent,
    inactiveColor = Color.Transparent,
    shape = RoundedCornerShape(20)
)

Answer 5

如果您使用

BasicTextField

和

TextFieldDefaults.DecorationBox

作为装饰器框，则将空函数 (

{}

) 传递到

container

的

TextFieldDefaults.DecoratorBox

。

TextFieldDefaults.DecorationBox(
            value = value,
            visualTransformation = visualTransformation,
            innerTextField = it,
            label = label,
            supportingText = supportingText,
            shape = shape,
            singleLine = singleLine,
            enabled = enabled,
            isError = isError,
            interactionSource = interactionSource,
            colors = colors,
            container = {}
        )