如何在 Androidx Compose Material 中删除 TextField 的指示线？答案

【问题标题】：How to remove indicator line of TextField in Androidx Compose Material?如何在 Androidx Compose Material 中删除 TextField 的指示线？
【发布时间】：2020-10-15 01:12:33
【问题描述】：

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

【问题讨论】：

你想达到什么目的？您是想将颜色从紫色更改为您想要的颜色，还是完全想移除闪烁线和其他颜色。
TextField 是 Compose UI 的可组合文本输入，遵循 Material Design 指南。 BaseTextField 是纯文本输入的基础，没有 Material Design 元素。从长远来看，尚不清楚他们将提供多少配置以允许TextField 偏离 Material Design。最终，社区将为不想要 ~100% Material Design 外观的项目创建更灵活的替代方案。
我想彻底删除这条线

标签： android android-textinputlayout android-jetpack-compose android-compose-textfield

【解决方案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")
            }
        )
    }
}

【讨论】：

【解决方案2】：

从 1.2.0-alpha04 开始，您可以使用 TextFieldDecorationBox 和 BasicTextField 来构建基于 Material Design 文本字段的自定义文本字段。

在您的情况下，您可以应用 indicatorLine 修饰符来定义 focusedIndicatorLineThickness 和 unfocusedIndicatorLineThickness 参数： p>

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

【讨论】：

【解决方案3】：

如果您使用TextField，您可以将activeColor 提供给Color.Transparent

注意：activeColor 不仅用于指示器，它还用于标签底部指示器和光标

例如：

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

根据文档，activeColor 是

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

如果你想使用自己的，可以试试BaseTextField

【讨论】：

我测试了这个解决方案，但它在我的 Compose 版本中不起作用
你用的是什么版本？
我更新到最新版本，它可以工作。不完全是因为没有选择TextField时该行仍然存在，但可以接受
@Trinity，为此我们应该使用inactiveColor，但问题是inactiveColor是文本字段处于焦点时输入文本或占位符的颜色，以及标签和底部指示器的颜色文本字段不在焦点上，因此如果我们将颜色设为透明，则文本将不可见。这是一个非常早期的阶段，所以稍后他们可能会对此 API 进行更多改进。

【解决方案4】：

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

将activeColor 和inactiveColor 设置为Color.Transparent 以便在TextField 下隐藏指示线，无论他处于何种状态。

如果只在Color.Transparent 中添加inactiveColor，则只有在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)
)

【讨论】：