JetpackCompose从入门到实战学习笔记2——Modifier的简单使用

JetpackCompose从入门到实战学习笔记2——Modifier的简单使用

1.Image的使用：

@Composable
fun Image(modifier: Modifier) {
    Row {
        Image(
            painterResource(id = R.mipmap.iv_pic),
            contentDescription = stringResource(R.string.description),
            modifier = modifier
                .size(60.dp)//宽和高同时设置成60
                .clip(CircleShape)//将图片裁剪成圆形
        )
        //设置间距
        Spacer(Modifier.width(20.dp))
        Image(
            painterResource(id = R.mipmap.iv_pic),
            contentDescription = stringResource(R.string.description),
            modifier = Modifier
                .size(width = 100.dp, height = 100.dp)
                .clip(CircleShape)
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.Image的效果如下：

3.Button的使用：

@Composable
fun Button(modifier: Modifier) {
    Row {
        Spacer(Modifier.width(200.dp))
        Text(
            text = stringResource(R.string.description),
            style = typography.bodySmall.copy(color = Color.White),
            textAlign = TextAlign.Center,
            modifier =
            Modifier
                .width(80.dp)
                .clickable(onClick = {})
                .shadow(3.dp, shape = backgroundShape)
                .clip(backgroundShape)
                .background(
                    brush = Brush.verticalGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Blue,
                        ),
                        startY = 0f,
                        endY = 80f
                    )
                )
                .padding(vertical = 10.dp)
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

4.Button的效果预览：

5.Background的使用:

@Composable
fun background(modifier: Modifier) {
    Row {
        Spacer(Modifier.width(300.dp))
        Box(
            modifier = modifier
                .size(100.dp)
                .background(color = Color.Red)
        )
        {
            Text(text = "纯色", modifier.align(Alignment.Center))
        }
        Spacer(Modifier.width(40.dp))
        Box(
            modifier
                .size(150.dp)
                .background(brush = verticalGradientBrush)
        )
        {
            Text(text = "渐变色", modifier.align(Alignment.Center))
        }
    }
}

    //创建brush渐变色
    private val verticalGradientBrush = Brush.verticalGradient(
        colors = listOf(
            Color.Red,
            Color.Green,
            Color.Blue
        ),
    )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

6.Background的效果预览：

7.fillMaxSize：

@Composable
fun fillMaxSize(modifier: Modifier) {
    Box(
        modifier = modifier
            .fillMaxSize()//宽高同时铺满屏幕
            .background(Color.Red)
    )
    Box(
        modifier = modifier
            .fillMaxHeight()
            .width(60.dp)//高度铺满屏幕
            .background(Color.Blue)
    )
    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(60.dp)
            .background(Color.Green)
    )//宽度铺满屏幕
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

8.fillMaxSize的效果预览：

9.padding的使用：

@Composable
fun padding(modifier: Modifier) {
    Box(
        modifier = modifier
            .padding(8.dp)
            .border(2.dp, Color.Red, shape = RoundedCornerShape(2.dp))
            .padding(8.dp)

    )
      {
            Spacer(
                modifier = modifier
                    .size(width = 200.dp, height = 20.dp)
                    .background(Color.Red)
            )
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

10.padding的效果预览：

11.weightModifier的使用：

@Composable
fun weightModifierDemo(modifier : Modifier){
    Row {
        Spacer(Modifier.width(620.dp))//单个效果时设置为100，整体为620
        Column(
            modifier = Modifier
                .width(300.dp)
                .height(200.dp)
        ) {
            Box(
                modifier = modifier
                    .weight(1f)
                    .fillMaxWidth()
                    .background(Color.Green)
            )
            Box(
                modifier = modifier
                    .weight(1f)
                    .fillMaxWidth()
                    .background(Color.Blue)
            )
            Box(
                modifier = modifier
                    .weight(1f)
                    .fillMaxWidth()
                    .background(Color.Red)
            )
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

12.weightModifier的效果预览：

13.完整的效果如下：

14.demo的源码地址如下：

https://gitee.com/jackning_admin/compose-modifier-demo