"Jetpack Compose Series Learning"-12 Modifier - Modifier

Modifier

You should be familiar with the modifier Modifier. This modifier is used in the previous Column, Row, Box, and Text. It is an ordered and immutable collection of modifier elements, which is used to add decoration and behavior to Compose UI elements. , such as background, padding, click events, etc., or set a single line for Text, set various click states for Button and other behaviors.

Modifier is very powerful, and it can basically implement any operation you can think of, including scrolling, dragging, zooming, etc. It has many things, and we start from several commonly used modifier functions.

padding

Modifier can modify the padding, which is padding, such as:

Text("程序员", modifier = Modifier.padding(20.dp))
复制代码

You can see Modifier to add padding, just call the padding method and pass in the corresponding margin value. Let's take a look at how the source code of padding is defined:

@Stable
fun Modifier.padding(
    start: Dp = 0.dp,
    top: Dp = 0.dp,
    end: Dp = 0.dp,
    bottom: Dp = 0.dp
)

@Stable
fun Modifier.padding(
    horizontal: Dp = 0.dp,
    vertical: Dp = 0.dp
)

@Stable
fun Modifier.padding(all: Dp)
复制代码

We can see that there are many ways to set padding, you can set one side separately, you can also set horizontal and vertical, and you can set all of them uniformly. The above example code defaults all padding to the top, bottom, left, and right:

Set the size of the control

How did we set the size in our previous example code? In Android View, you can directly write the width and height in the xml layout, or you can adapt or fill the parent layout:

<TextView
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:gravity="center"
    android:text="Text1"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Text2"/>
<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="Text3"/>
复制代码

Then in Compose, it is also useful in the previous example, such as filling the parent layout:

Text("程序员", modifier = Modifier.fillMaxSize())
复制代码

Or you can just fill the width or height:

Text("程序员", modifier = Modifier.fillMaxWidth()) // 充满宽
Text("程序员", modifier = Modifier.fillMaxHeight()) // 充满高
复制代码

When you do nothing, it is the default adaptive size like Wrap_content in Android View. If we want to set a fixed value size, we can do this:

Text("程序员", modifier = Modifier.size(100.dp)) // 宽高都是100dp
Text("程序员", modifier = Modifier.size(width = 100.dp, height = 80.dp)) // 宽100dp 高80dp
复制代码

If you want the size of the child layout to be the same as the parent control Box, but without affecting the size of the Box, we can use the matchParentSize modifier. matchParentSize is only available in Box scope, meaning it only applies to immediate children of Box composables. Let's look at an example, the inner Spacer gets its own size from its parent control Box, which in turn gets its own size from the Text it contains:

Box {
    Spacer(modifier = Modifier.matchParentSize().background(Color.Red))
    Text("程序员", fontSize = 30.sp)
}
复制代码

Weight modifier in Row and Column

Linear layout in Android View also often uses weight. In Compose, we use weight like this:

Row(
    Modifier
        .fillMaxSize()
        .padding(10.dp)) {
    Box(modifier = Modifier.weight(2f).height(50.dp).background(Color.Blue))
    Box(modifier = Modifier.weight(1f).height(50.dp).background(Color.Red))
}
复制代码

可以看出，宽度蓝色：红色是2：1，正好是我们设置的对应weight的比例大小。

控件添加点击事件

Android中我们通过控件view.setOnClickListener来设置点击事件，Compose中Modifier可以设置点击事件：

Row(
    Modifier
        .fillMaxSize()
        .padding(10.dp)) {
    Box(modifier = Modifier.weight(2f).height(50.dp).background(Color.Blue))
    Box(modifier = Modifier.weight(1f).height(50.dp).background(Color.Red).clickable {
        Log.e("LM" , "点击了Box")
    })
}

// 点击红色Box后可以在控制台看到日志：
// 2022-04-04 15:08:52.793 19862-19862/com.carey.compose E/LM: 点击了Box
复制代码

控件添加圆角

Android View中实现圆角我们都是定义shape.xml，或者通过自定义控件通过canvas等去实现。但是在Compose中还是很容易的。用Modifier.shadow:

@Suppress("UnnecessaryComposedModifier")
@Stable
fun Modifier.shadow(
    elevation: Dp, // 阴影的高度
    shape: Shape = RectangleShape, // shape
    clip: Boolean = elevation > 0.dp // 是否裁剪其内容
) // 省略...
复制代码

我们看到它只有三个参数，第一个参数是设置阴影的高度，类型为Dp，直接设置即可；第二个参数是shape，想设置圆角的话，通过它即可实现；第三个参数是clip，是否裁剪其内容，默认根据阴影高度来判断，如：

Box(contentAlignment = Alignment.Center) {
        Image(painter = painterResource(id = R.drawable.small),
//            modifier = Modifier.size(150.dp).shadow(elevation = 10.dp, shape = MaterialTheme.shapes.medium),
            modifier = Modifier.size(150.dp).shadow(elevation = 10.dp, shape = RoundedCornerShape(18.dp)), // 指定圆角大小值
            contentDescription = ""
        )
    }
复制代码

如果不想要阴影，可以把elevation值设置成0，然后手动打开裁剪clip属性即可：

Box(contentAlignment = Alignment.Center) {
        Image(painter = painterResource(id = R.drawable.small),
//            modifier = Modifier.size(150.dp).shadow(elevation = 10.dp, shape = MaterialTheme.shapes.medium),
            modifier = Modifier.size(150.dp).shadow(elevation = 0.dp, shape = RoundedCornerShape(18.dp), clip = true),
            contentDescription = ""
        )
    }
复制代码

Modifier.shadow不只可以给Image设置圆角，其它可组合项也可以设置圆角。后期我们会介绍复杂的控件等。