Jetpack Compose Modifier 使用入门

使用效果

代码下面 没有分开写 但是注释分开了

  @Composable
    fun Decorated() {


        Surface(

            modifier = Modifier
                .padding(horizontal = 8.dp, vertical = 10.dp)
                .fillMaxWidth()
                .height(60.dp)
                .border(
                    1.5.dp,
                    Color.Gray,
                    shape = RoundedCornerShape(6.dp)
                ),
            //边框类型
            shape = MaterialTheme.shapes.medium,

            ) {


            Row(
                modifier = Modifier
                    .padding(vertical = 5.dp, horizontal = 4.dp)
                    .fillMaxWidth(),
            ) {


                //图片  下面图片的设置可以学到新东西 小技能--bord
                Image(
                    painterResource(id = R.drawable.bg_iamge),
                    contentDescription = "头像",
                    modifier = Modifier
                        .size(50.dp)
                        .clip(CircleShape)
                        .border(
                            shape = CircleShape,
                            border = BorderStroke(
                                width = 2.dp,
                                brush = Brush.linearGradient(
                                    colors = listOf(
                                        Color(R.color.teal_700),
                                        Color(R.color.teal_200),
                                        Color(R.color.purple_200),
                                        Color(R.color.black)
                                    ),
                                    start = Offset(0f, 0f),
                                    end = Offset(100f, 100f)
                                )
                            )

                        )
                        .border(
                            shape = CircleShape,
                            border = BorderStroke(4.dp, SolidColor(Color.White))
                        ),

                    contentScale = ContentScale.Crop,
                )

                //中间文字
                Spacer(modifier = Modifier.padding(3.dp))
                Column(
                    modifier = Modifier
                        .weight(1f)
                        .padding(vertical = 5.dp),

                    ) {
                    Text(
                        text = "昵称",
                        color = Color.Black,
                        style = TextStyle(
                            fontWeight = FontWeight.Bold,
                            fontSize = 16.sp,
                            letterSpacing = 0.15.sp
                        )
                    )
                    Text(
                        text = "描述文字",
                        color = Color.Black.copy(alpha = 0.75f),
                        maxLines = 1,
                        style = TextStyle( // here
                            fontWeight = FontWeight.Normal,
                            fontSize = 14.sp,
                            letterSpacing = 0.25.sp
                        )
                    )
                }

                //文字按钮 ---text 默认不会居中--需要用个东西包裹
                //虽然有Compose提供了专门的Button实现按钮，使用Text同样可以实现按钮，而且可定制性更高。
                val backgroundShape: Shape = RoundedCornerShape(4.dp)
                IconButton(onClick = { /*TODO*/ }, Modifier.padding(end = 8.dp)) {
                    Text(
                        text = "Follow",
                        style = typography.body1.copy(color = Color.White),
                        textAlign = TextAlign.Center,
                        modifier = Modifier
                            .width(80.dp)
                            .clickable(onClick = {
                                showToast("提交了")
                            })
                            .shadow(3.dp, shape = backgroundShape)
                            .clip(backgroundShape)
                            .background(

                                brush = Brush.verticalGradient(
                                    colors = listOf(Color.Red, Color.Red),
                                    startY = 0f,
                                    endY = 80f
                                )
                            )
                            .padding(6.dp)
                            .align(Alignment.Top),

                        )
                }


            }


        }


    }
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

主要是参考下面的链接：
Jetpack Compose Modifier 使用入门