Jetpack Compose Compose for the first time

directory

• Hello,Jetpack Compose!
• Jetpack Compose(2) : Layout
• Jetpack Compose Compose for the first time

Modifier

Modifier Elements Decorates or adds actions to an ordered, immutable collection of Compose UI elements. For example, background, fill, and click event listeners decorate lines, text, or buttons or add actions to them.

The Modifier, as its name says, provides Compose component modifiers, including but not limited to style modifications, event listeners, and other modifiers.

An orderly

Note the official description of the word “ordered”, because the Modifier is used in a chained manner, so the order in which the attributes are defined affects the UI display. Such as:

@Composable
fun RoundButton(a) {
    Box(
        modifier = Modifier
            .width(300.dp)
            .height(90.dp)
            .background(Color(0xFF3ADF00), shape = RoundedCornerShape(50))
            .padding(20.dp),
        contentAlignment = Alignment.Center){
        Text(text = "RoundButton",color = Color.White)
    }
}
Copy the code

Due to thebackgroundinpaddingBefore, soModifierWill first giveBoxSet the background and then set the margins, as shown below:By the same token,backgroundwithpaddingOrder substitutions, the effect is as follows:

By looking at the Modifier source code can be found, in the process of our chain bit by bit overlay attributes,Modifier will create a CombinedModifier will old and new attributes together, synthesis of a separate Modifier, It is equivalent to the set of parts to be modified layer after layer of Modifier, which is the reason why the Modifier is orderly.

The scalable

Take the Modifier.padding() source code as an example:

@Stable
fun Modifier.padding(all: Dp) =
    this.then(
        PaddingModifier(
            start = all,
            top = all,
            end = all,
            bottom = all,
            rtlAware = true,
            inspectorInfo = debugInspectorInfo {
                name = "padding"
                value = all
            }
        )
    )
Copy the code

As you can see, the padding() is an extension function of Modifier that calls the Modifier’s THEN () function, and that then() needs to receive a Modifier object, which is PaddingModifier.

So of course we can also add extension functions for the Modifier, passing in our custom Modifier to achieve certain effects, such as the following properties we will often configure for different components:

modifier = Modifier
    .width(300.dp)
    .height(90.dp)
    .padding(20.dp)
    .background(Color(0xFF3ADF00), RoundedCornerShape(50))
Copy the code

To make it easier to call, we can add an extension method to the Modifier:

@Stable
fun Modifier.buttonDefault(a) = this.then(
    width(300.dp)
        .height(90.dp)
        .padding(20.dp)
        .background(Color(0xFF3ADF00), RoundedCornerShape(50)))Copy the code

So in the component, we just need to use it like this.

modifier = Modifier.buttonDefault()
Copy the code

Modifier properties

The Modifier configurable properties are numerous and miscellaneous, and are not listed here. For details, go to Andrid Developer and check out some common properties listed by functional category

Width & height

spacing

draw

Background & Border

behavior

Second, 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 1.

• Android developers
• Jetpack Compose – Modifier entry