Based on the API

Fun TextField(Value: String, // text, can also pass TextFieldValue onValueChange: (TextFieldValue) -> Unit, // text change callback modifier: // Modifiers enabled: Boolean = true, // is available, equivalent to the Android enable attribute readOnly: Boolean = false, // Whether it is read-only textStyle: textStyle = LocalTextStyle. Current, // The word format can be used with SpanStyle and ParagraphStyle Label: @Composable (() -> Unit)? Placeholder: @composable (() -> Unit)? LeadingIcon: @composable (() -> Unit)? TrailingIcon: @composable (() -> Unit)? IsError: Boolean = false, isError: Boolean = false, isError: Boolean = false, isError: Boolean = false, isError: Boolean = false, isError: Boolean VisualTransformation = VisualTransformation. None, / / can be simply understood as the inputType EditText keyboardOptions: KeyboardOptions = keyboardoptions. Default, // Define the function of the return key on the soft keyboard, which can be defined as return/search keyboardActions: KeyboardActions = KeyboardActions(), // press the return key callback on the soft keyboard singleLine: Boolean = false, // whether to display maxLines in a singleLine: Int = Int.MAX_VALUE, // Maximum number of rows interactionSource: MutableInteractionSource = remember {MutableInteractionSource()}, // represents an interaction flow emitted by a component: shape Shape = MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize), / / define the shape of the text box) (do not include the background colors: TextFieldColors = TextFieldDefaults. TextFieldColors () / / used to define a word, the cursor in the different state of color)Copy the code

Basic usage

Let’s simply achieve a search text box, the left search button, click on the prompt input keyword, the right clear button, click on the clear content, the general effect is as follows:

The code for Compose is as follows:

@Composable fun TextFieldDemo(context: Context) {// define an observable text, Var text by remember {mutableStateOf("")} TextField(value = text, / / display text onValueChange = {text =} it, / / text changes, was assigned to the text label = {text (text = "Input")}, / / label is Input / / head icon, Set to Search for leadingIcon = @composable {Image(imageVector = icons.fillet. Search, // Search icon contentDescription = null, Click = mysql.clickable {totoast. MakeText (context, "search $text", totoast.LENGTH_SHORT).show()}) }, // The tail icon, TrailingIcon = @composable {Image(imageVector = icons.filled.Clear, // Clear icon contentDescription = null, Clickable {text = ""}) // Add click event to icon, Text}, placeholder = @composable {text (text = "This is placeholder")}, placeholder = Composable;Copy the code

The effect is as follows:

Now let’s add two lines of code:

IsError = true, / / display error message visualTransformation = PasswordVisualTransformation (), // Display as ciphertext keyboardOptions = keyboardOptions (imeAction = imeAction.search), // define the enter key as Search // define the click Search event for the enter key, KeyboardActions = keyboardActions (onSearch = {totoast. MakeText (context, "search $text", Toast.length_short).show()}) singleLine = true.length_short (LENGTH_SHORT).show()}) singleLine = trueCopy the code

And here’s what happens:

We see that text and underline are red, indicating error, text is displayed as ciphertext, enter key becomes search, of course, enter key can also be defined as other types, such as :Go, Next, Done, etc., you can try.

Now let’s add the shape. Let’s add a line like this:

Shape = RoundedCornerShape(16.dp) // Specifies a rounded rectangleCopy the code

The effect is as follows:

We can hide the underscore by specifying colors to be transparent, as follows:

/ / specify the underline Color colors = TextFieldDefaults textFieldColors (focusedIndicatorColor = Color Transparent, / / a focus of Color, Transparent unfocusedIndicatorColor = color.green, // No focus Color, errorIndicatorColor = color.red, // Error Color, Red disabledIndicatorColor = color.gray // Color when unavailable, Gray)Copy the code

We have to modify

IsError = false, // No error message is displayedCopy the code

Otherwise the underlining will always be red. Ok, let’s look at the effect:

As you can see, when there is no focus, the underscore is green, but when there is focus, it is not visible (because it is transparent). If you want to remove the underscore, you can directly set the underscore color to transparent in all states. As for the color of the underscore when it is incorrect and unavailable, you can try to see the effect for yourself.

extension

1 Outline text field

OutlinedTextField has its own outline, that is, only provides stroke, can easily achieve the product and UI view of the effect, let’s write a simple demo:

@Composable
fun OutlinedTextFieldDemo() {
    var text by remember { mutableStateOf("") }
    OutlinedTextField(value = text,
        label = { Text(text = "Input something") },
        onValueChange = { text = it })
}
Copy the code

The API is the same as TextField, but the style is different. The effect is as follows:

2 BasicTextField

BasicTextField can be used to edit text in response to hardware or software disks. It can be customized with cursor, border, etc., but it has no placeholder and label properties. The API is as follows:

Fun BasicTextField(value: String, // text, can also pass TextFieldValue onValueChange: (String) -> Unit, // text change callback modifier: // Modifiers enabled: Boolean = true, // Whether it is available readOnly: Boolean = false, // Whether it is read-only textStyle: TextStyle = textstyle.default, // keyboardOptions: KeyboardOptions = keyboardoptions. Default, // Define the function of the return key on the soft keyboard, which can be defined as return/search keyboardActions: KeyboardActions = keyboardactions.default, // press the return key callback on the soft keyboard singleLine: Boolean = false, // whether it is a singleLine maxLines: Int = Int.MAX_VALUE, // MAX_VALUE VisualTransformation = VisualTransformation. None, / / can be simply understood as the inputType EditText onTextLayout: (TextLayoutResult) -> Unit = {}, // Layout change callback interactionSource: MutableInteractionSource = remember {MutableInteractionSource()}, // represents an interaction flow emitted by a component cursorBrush: Brush = SolidColor(color.black), // Emphasis!! DecorationBox: @Composable (innerTextField:) @composable () -> Unit = Composable () -> Unit = Composable () @composable {innerTextField -> innerTextField()})Copy the code

Let’s write a little demo of that:

@Composable
fun BasicTextFieldDemo() {
    var text by remember { mutableStateOf("hello") }
    BasicTextField(
        value = text,
        onValueChange = { text = it },
    )
}
Copy the code

The display effect is as follows:

Just a hello… There is no border, if you start with an empty value, you can’t even see the words, it’s just blank, that’s Basic, that’s Basic, now let’s add a background, let’s add:

Modifier = Modifier. Background (color.green, RoundedCornerShape(8.dp)) // Add a Green backgroundCopy the code

The effect is as follows:

It’s a green background… Let’s try adding a text box and add the following code

DecorationBox = @composable {innerTextField -> decorationBox = @composable {innerTextField -> (modifier = modifier. Size (width = 100.dp,)); Height = 50.dp)) {drawCircle(color = color.red, style = Stroke(width = 1F))}Copy the code

We draw a circle, and then we call innerTextField() to draw the original text. It looks like this:

conclusion

If you want to fully customize your text field, you can use BasicTextField;

If you want to use outline text field, use OutlinedTextField;

If you want to use a solid TextField, use TextField;

TextField and OutlinedTextField have the same API except that one is solid and the other is hollow, while BasicTextField is completely custom.

Code address:Gitee.com/lloydfinch/…