TextField with hint text in jetpack compose
You can create hintTextField
in jetpackCompose
like below code:
@Composable
fun HintEditText(hintText: @Composable() () -> Unit) {
val state = state { "" } // The unary plus is no longer needed. +state{""}
val inputField = @Composable {
TextField(
value = state.value,
onValueChange = { state.value = it }
)
}
if (state.value.isNotEmpty()) {
inputField()
} else {
Layout(inputField, hintText) { measurable, constraints ->
val inputfieldPlacable = measurable[inputField].first().measure(constraints)
val hintTextPlacable = measurable[hintText].first().measure(constraints)
layout(inputfieldPlacable.width, inputfieldPlacable.height) {
inputfieldPlacable.place(0.ipx, 0.ipx)
hintTextPlacable.place(0.ipx, 0.ipx)
} }
}
}
Call @Compose
function like below:
HintEditText @Composable {
Text(
text = "Enter Email",
style = TextStyle(
color = Color.White,
fontSize = 18.sp
)
)
}
With 1.0.0-alpha01
you can use something like:
var text by remember { mutableStateOf(TextFieldValue("text")) }
OutlinedTextField(
value = text,
onValueChange = {
text = it
},
label = { Text("Label") }
)
or
TextField(
value = text,
onValueChange = {
text = it
},
label = { Text("Label") }
)