Jetpack Compose Modifier 使用入门

最新推荐文章于 2024-03-02 14:40:23 发布

Time is precious

最新推荐文章于 2024-03-02 14:40:23 发布

阅读量136

点赞数

分类专栏： Jetpack Compose 文章标签： composer Jetpack Compose Modifier

本文链接：https://blog.csdn.net/sinat_41890480/article/details/126272444

版权

Jetpack Compose 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用效果

在这里插入图片描述
代码下面没有分开写但是注释分开了

  @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),

                        )
                }


            }


        }


    }

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