如何删除Androidx合成素材中的TextField指示线?

lh80um4z  于 2023-01-19  发布在  Android
关注(0)|答案(5)|浏览(170)

我想删除文本字段的紫色线条/指示符(见下图)。这是可能的,还是我应该创建自己的自定义文本字段来实现这一点?

a2mppw5e

a2mppw5e1#

在最近的Jetpack合成UI Beta版本1.0.0-beta 01中已对此进行了更改,现在您可以通过

文本字段默认值具有所需颜色。

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

图像:x1c 0d1x
或者,如果要根据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")
            }
        )
    }
}

ie3xauqp

ie3xauqp2#

1.2.0-alpha04开始,您可以将**TextFieldDecorationBoxBasicTextField一起使用,以基于Material Design文本字段构建自定义文本字段。
在您的情况下,可以应用
indicatorLine修改器来定义focusedIndicatorLineThicknessunfocusedIndicatorLineThickness**参数:

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定义以下属性:

      • 一米七三**
      • 一米八米一x**
      • 一米九十一**

比如:

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

pengsaosao

pengsaosao3#

如果在中使用TextField,则可以将activeColor赋予Color.Transparent
注:activeColor不仅用于指示器,还用于标签底部指示器和光标
例如:

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

根据文档,activeColor
active当文本字段处于焦点时,为标签、底部指示器和光标的颜色着色
如果您想使用自己的,可以尝试BaseTextField

5ktev3wc

5ktev3wc4#

实际上(版本阿尔法7)这是最简单的版本,我发现删除分隔符。
activeColorinactiveColor设置为Color.Transparent,以便隐藏TextField下的指示行,无论其状态如何。
如果仅将inactiveColor添加到Color.Transparent,则该行仅在TextField未获得焦点时才不可见
添加textStyle = TextStyle(color = Color.White)以显示颜色,无论TextField是否获得焦点。
这个解决方案将删除线,但也光标指示器。这不是最好的时刻,但它也是阿尔法实际上的组成。

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

mo49yndu

mo49yndu5#

可以如下所示设置TextField的颜色

colors = TextFieldDefaults.textFieldColors(
                    unfocusedIndicatorColor = Color.Transparent,
                    focusedIndicatorColor = Color.Transparent
                )

相关问题