如何创建一个带下划线的文本框，没有任何背景或边框？

Question

如何创建一个带下划线的文本框，没有任何背景或边框？

androidandroid-jetpack-composeandroid-compose-textfield

5

我想在Jetpack Compose中创建一个带下划线但没有其他边框或背景的TextField。我该如何做到这一点？

这是我目前正在使用的代码：

val query = remember {mutableStateOf("")}
        TextField(
        value = query.value,
            onValueChange = { newValue -> query.value = newValue },
            label={Text("Dummy", color = colorResource(id = R.color.fade_green))},
            textStyle = TextStyle(
                textAlign = TextAlign.Start,
                color = colorResource(id = R.color.fade_green),
                fontFamily = FontFamily(Font(R.font.poppins_regular)),
                fontSize = 14.sp,
            ),
            modifier = Modifier
                .padding(start = 30.dp).border(0.dp, Color.Red),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent
            )
            )

- Sparsh Dutta

1个回答

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

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

- Gabriele Mariotti · Accepted Answer

从版本 1.2.0 开始，您可以使用 BasicTextField + TextFieldDecorationBox。

类似于以下内容：

    BasicTextField(
        value = text,
        onValueChange = {text = it},
        interactionSource = interactionSource,
        textStyle = mergedTextStyle,
        enabled = enabled,
        singleLine = true,
        modifier = Modifier
            .background(
                color = White,  //Background color
                shape = TextFieldDefaults.TextFieldShape
            )
            .indicatorLine(
                enabled = enabled,
                isError = false,
                interactionSource = interactionSource,
                colors = colors,
                focusedIndicatorLineThickness =  2.dp, //width of the indicator
                unfocusedIndicatorLineThickness = 2.dp
            )
        ) {

            TextFieldDefaults.TextFieldDecorationBox(
                value = text,
                enabled = enabled,
                singleLine = true,
                innerTextField = it,
                visualTransformation = VisualTransformation.None,
                interactionSource = interactionSource,
                label = { Text("Label") },
            )

    }

使用版本 1.0.0，您可以只使用 colors 属性来定义一个 Color.Transparent 背景。

var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = {
        text = it
    },
    label = { Text("label") },
    colors = TextFieldDefaults.textFieldColors(
        backgroundColor = Color.Transparent,
        //Color of indicator = underbar
        focusedIndicatorColor = ....,
        unfocusedIndicatorColor = ....,
        disabledIndicatorColor = ....
    )
)

如果您想更改indicatorWidth，目前没有内置参数。

您可以使用.drawBehind修饰符绘制一条线。例如：

val interactionSource = remember { MutableInteractionSource() }
val isFocused by interactionSource.collectIsFocusedAsState()

val indicatorColor = if (isFocused) Color.Red else Color.Gray
val indicatorWidth = 4.dp

TextField(
    value = text,
    onValueChange = { 
       text = it },
    label={Text("Label")},
    interactionSource = interactionSource,
    modifier = Modifier
        .drawBehind {
            val strokeWidth = indicatorWidth.value * density
            val y = size.height - strokeWidth / 2
            drawLine(
                indicatorColor,
                Offset(0f, y),
                Offset(size.width, y),
                strokeWidth
            )
    },
    colors = TextFieldDefaults.textFieldColors(
        backgroundColor = Color.Transparent,
        focusedIndicatorColor =  Transparent,
        unfocusedIndicatorColor = Transparent,
        disabledIndicatorColor = Transparent
    )
)