directory

  • Hello,Jetpack Compose!
  • Jetpack Compose(2) : Layout
  • Jetpack Compose Compose for the first time
  • First introduction to Jetpack Compose(4) : Theme
  • Jetpack Compose(5) : component-text
  • Introduction to Jetpack Compose(6) : Component -Text Fields

A, TextFiled

fun TextField(
    // text, and another constructor can be passed in to TextFieldValue
    value: String.// Content change callback listener
    onValueChange: (TextFieldValue) - >Unit./ / modifier
    modifier: Modifier = Modifier, 
    // Whether it is available
    enabled: Boolean = true.// Whether it is read-only
    readOnly: Boolean = false.// Text style
    textStyle: TextStyle = LocalTextStyle.current, 
    // Tag (an auxiliary prompt copy)
    label: @Composable(() - >Unit)? = null.// Content placeholder, similar to hint, displayed when the component is in focus
    placeholder: @Composable(() - >Unit)? = null.// The header icon
    leadingIcon: @Composable(() - >Unit)? = null.// The tail icon
    trailingIcon: @Composable(() - >Unit)? = null.// Specifies whether there is an error in the current text input. If there is an error, the text and wireframe will be displayed in red to indicate it
    isError: Boolean = false./ / input value style, such as show the password (PasswordVisualTransformation ())
    visualTransformation: VisualTransformation = VisualTransformation.None,
    // Define the function of the return key on the soft keyboard, such as return/search, etc
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    // Press the action callback on the soft keyboard
    keyboardActions: KeyboardActions = KeyboardActions().// Whether to display in a single line
    singleLine: Boolean = false.// Maximum number of rows
    maxLines: Int = Int.MAX_VALUE, 
    // Represents an interaction flow emitted by the component
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 
    // Define the shape of this text box (without background)
    shape: Shape = MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize), 
    // Define the color of text, cursor, etc in different states
    colors: TextFieldColors = TextFieldDefaults.textFieldColors() 
)
Copy the code

1.1. Management state

Note: As mentioned in the Compose programming idea, previous Android layouts typically used functions such as findViewById() to traverse the tree when the page data changed, and call methods such as setText(String) to change the data. This will lead to a gradual increase in maintenance and reading costs over time, which I believe many partners have experienced. Compose will only redraw when the page data changes. The official description is as follows:

The Android view hierarchy has long been represented as a tree of interface widgets. Because the state of the application changes due to factors such as user interaction, the interface hierarchy needs to be updated to display the current data. The most common way to update an interface is to traverse the tree using functions like findViewById(), And change the node by calling button.settext (String), container.addChild(View), or img.setimageBitmap (Bitmap). These methods change the internal state of the widget. Manipulating views manually increases the likelihood of errors. If a piece of data is rendered in more than one location, it’s easy to forget to update a view that displays it. In addition, it is easy to create an abnormal state when two updates collide in unexpected ways. For example, an update might try to set the value of a node that has just been removed from the interface. In general, software maintenance complexity increases with the number of views that need to be updated. In the past few years, the industry has moved toward declarative interface models that greatly simplify the engineering associated with building and updating interfaces. The technique works by conceptually regenerating the entire screen from scratch, then only making the necessary changes. This approach avoids the complexity of manually updating the stateful view hierarchy. Compose is a declarative interface framework. One problem with regenerating an entire screen is that it can be costly in terms of time, computing power and battery usage. To mitigate this cost, Compose intelligently chooses which parts of the interface to redraw at any given time. This has an impact on the way you design interface components, as described in the reorganization.

Compose doesn’t update automatically every second of the day. Instead, Compose must be aware of the new state in order to update accordingly. TextField is not updated by itself, but is updated when its value parameter changes. This causes us to record the value changed by value in TextFiled’s input listener, and then point that value to TextFiled’s value. Such as:

// Entering a value on the soft keyboard triggers onValueChange listener, but the TextField value does not change
@Composable
fun inputPhone(a){
    TextField(value = "", onValueChange = {})
}
Copy the code

So what you do is you write down the value that you’re listening to, and then you point that value to value, and TextField knows that value has changed, and it’s going to redraw the UI. If you want to know more about it, you can go to the official document – Management status.

@Composable
fun inputPhone(a){
    var phone by rememberSaveable { mutableStateOf("") }

    TextField(value = phone, onValueChange = {
        phone = it
    })
}
Copy the code

1.2. Usage Examples

@Composable
fun inputPhone(a) {
    var phone by rememberSaveable { mutableStateOf("") }

    TextField(
        modifier = Modifier.background(Color.Cyan).fillMaxWidth(),
        value = phone,
        label = { Text(text = "Phone") },
        placeholder = { Text(text = "Input your phone number please.") },
        leadingIcon = {
            Icon(imageVector = Icons.Filled.Phone, contentDescription = null)
        },
        trailingIcon  = {
            Icon(imageVector = Icons.Filled.Clear, contentDescription = null,Modifier.clickable {
                // Empty the contents and change the value of phone
                phone = ""
            })
        },
        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next,keyboardType = KeyboardType.Phone),
        singleLine = true,
        onValueChange = {
            phone = it
        })
}
Copy the code

Second, the OutlinedTextField

The construction parameters of OutlinedTextField are exactly the same as TextFiled. Just like its name, it provides an outer border for the input field, so the only difference between OutlinedTextField and TextFiled is their appearance.

Third, BasicTextField

A BasicTextField is more like an EditText in XML because it is just a plain input box without all the trappings. The structure-configurable parameters are roughly the same as TextFiled. The unique parameters are listed below.

fun BasicTextField(...// Layout change callback
    onTextLayout: (TextLayoutResult) - >Unit = {},
    // brush/brush?
    cursorBrush: Brush = SolidColor(Color.Black).// Define the trim box
    decorationBox: @Composable (innerTextField: @Composable() - >Unit) - >Unit = 
    @Composable { innerTextField -> innerTextField() }
)

Copy the code

Four, the last

A good memory is better than a bad pen. Jetpack Compose series is my own study notes for the first time, which can not only deepen the knowledge consolidation, but also exercise my writing skills. The content in this article is for reference only, if you have any questions, please leave a comment.

Reference 4.1.

  • Android developers