如何在 Androidx Compose Material 中移除 TextField 的指示器线？

Question

如何在 Androidx Compose Material 中移除 TextField 的指示器线？

androidandroid-textinputlayoutandroid-jetpack-composeandroid-compose-textfield

14

我想要移除TextField中的紫色线/指示器（参见以下图像）。这是可能的吗，还是我需要创建自己的自定义TextField来实现？

- Agna JirKon Rx

你想要实现什么目标？你是想将紫色改为你想要的颜色，还是完全删除闪烁线和其他内容？ - CodeRED Innovations

2

TextField 是Compose UI的文本输入组合，遵循Material Design指南。 BaseTextField是纯文本输入的基础，没有Material Design元素。从长远来看，目前还不清楚它们将提供多少配置，允许TextField偏离Material Design。最终，社区将创建更灵活的替代方案，适用于不想要近乎100％Material Design外观的项目。 - CommonsWare

我想完全删除这行代码。 - Agna JirKon Rx

4个回答

6

从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 定义这些属性：

focusedIndicatorColor （聚焦时的指示器颜色）
unfocusedIndicatorColor （未聚焦时的指示器颜色）
disabledIndicatorColor （禁用时的指示器颜色）

类似以下代码：

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

- Gabriele Mariotti

1

类似问题：如何去除当前单词下方的下划线，就像上面的“indicator”单词下方的那个一样？这是操作系统的行为吗？ - undefined

1

实际上（版本 alpha 7），这是我找到的最容易删除分隔符的版本。

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

- Kevin ABRIOUX

1

如果您使用TextField，您可以将activeColor设置为Color.Transparent。

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

例如：

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

根据文档，activeColor 是指当文本字段处于焦点状态时标签、底部指示器和光标的颜色。

如果您想使用自己的颜色，可以尝试使用 BaseTextField。

- Muthukrishnan Rajendran

我测试了这个解决方案，但在我的Compose版本中没有起作用。 - Agna JirKon Rx

你使用的版本是什么？ - Muthukrishnan Rajendran

我更新到最新版本后它可以工作了。虽然当TextField未被选中时，该行仍然存在，但这是可以接受的。 - Agna JirKon Rx

1

@Trinity，针对此问题，我们应该使用inactiveColor，但问题在于，inactiveColor是输入文本或占位符处于焦点时的颜色，以及标签和底部指示器在文本字段不在焦点时的颜色。因此，如果我们将颜色设置为透明，则文本将不可见。这只是一个很早的阶段，所以后面他们可能会在此API上进行更多改进。 - Muthukrishnan Rajendran

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vikas kumar · Accepted Answer

这在最近的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已被弃用，现在我们可以使用TextFieldDefaults.colors来更改TextField的默认颜色。


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