I want to create a Jetpack Compose TextField like this:

when is unfocusing:

when is focusing:

how can I create this?

CodePudding user response：

Use an OutlinedTextField. It has a "label" parameter that can be placed inside the text field's container:

OutlinedTextField Docs

CodePudding user response：

I used a solution for that:

@Composable
fun InputTextField(
    labelText: String,
    modifier: Modifier = Modifier,
    dividerColor: Color,
    dividerThickness: Dp = 1.dp,
    spacer: Dp,
    textStyle: TextStyle
) {
    var value by remember { mutableStateOf(TextFieldValue("")) }
    val dividerState = remember {
        mutableStateOf(true)
    }
    BasicTextField(
        value = value,
        onValueChange = { value = it },
        modifier = modifier
            .onFocusChanged {
                dividerState.value = !it.isFocused
            },
        decorationBox = { innerTextField ->
            var mainModifier: Modifier = modifier
            if (!dividerState.value){
                mainModifier = Modifier
                    .fillMaxWidth()
                    .border(
                        width = 1.dp,
                        shape = AppShapes.small,
                        color = AppColor.brandColor.BLUE_DE_FRANCE
                    )
                    .padding(8.dp)
            }

            Column(
                modifier = mainModifier,
                content = {
                    Text(text = labelText, style = textStyle)
                    Spacer(modifier = Modifier.size(spacer))
                    innerTextField()
                    if (dividerState.value) {
                        Divider(
                            thickness = dividerThickness, color = dividerColor,
                            modifier = mainModifier
                        )
                    }
                }
            )
        }
    )
}