Jetpack Compose Modifier用法详解，Android开发手册

@Composable
fun preferredTest(){
Column(modifier = Modifier
.size(150.dp)
.background(Color.Red)){
Box(modifier = Modifier.preferredSize(40.dp).background(Color.Green))
Box(modifier = Modifier.padding(top = 4.dp).preferredSize(40.dp,20.dp).background(Color.Green))
Box(modifier = Modifier.padding(top = 4.dp).preferredWidth(40.dp).height(20.dp).background(Color.Green))
Box(modifier = Modifier.padding(top = 4.dp).width(20.dp).preferredHeight(40.dp).background(Color.Green))
}
}

• widthIn(最小宽度，最大宽度) 设置自身的最小，最大宽度
• heightIn(最小高度，最大高度) 设置自身的最小，最大高度

@Preview()
@Composable
fun preferredTest(){
Column(modifier = Modifier
.size(300.dp)
.background(Color.Red)){
Text(text = “测试测试测试”, modifier = Modifier.sizeIn(40.dp,40.dp,100.dp,100.dp))
Text(text = “测试测试,测试测试,测试测试”, modifier = Modifier.sizeIn(40.dp,40.dp,100.dp,100.dp))
Text(text = “测试”, modifier = Modifier.widthIn(20.dp,100.dp))
Text(text = “测试,测试,测试”, modifier = Modifier.widthIn(20.dp,100.dp))
Text(text = “测试”, modifier = Modifier.heightIn(20.dp,100.dp))
Text(text = “测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试”, modifier = Modifier.heightIn(20.dp,100.dp))
}
}

• preferredWidthIn(最小宽度，最大宽度) 设置初始最小和最大宽度
• preferredHeightIn(最小高度，最大高度) 设置初始最小和最大高度

@Preview()
@Composable
fun preferredTest(){
Column(modifier = Modifier
.size(300.dp)
.background(Color.Red)){
Text(text = “测试测试”, modifier = Modifier.preferredSizeIn(40.dp,40.dp,100.dp,100.dp))
Text(text = “测试测试,测试测试,测试测试”, modifier = Modifier.preferredSizeIn(40.dp,40.dp,100.dp,100.dp))
Text(text = “测试”, modifier = Modifier.preferredWidthIn(20.dp,100.dp))
Text(text = “测试,测试,测试”, modifier = Modifier.preferredWidthIn(20.dp,100.dp))
Text(text = “测试”, modifier = Modifier.preferredHeightIn(20.dp,100.dp))
Text(text = “测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试”, modifier = Modifier.preferredHeightIn(20.dp,100.dp))
}
}

@Composable
fun MatchParentSizeComposable() {
Box {
Spacer(Modifier.matchParentSize().background(Color.Green))
Text(“Hello World”)
}
}

@Preview()
@Composable
fun paddingFromBaseLineTest(){
Box(Modifier.background(Color.Yellow)) {
Text(text = “Hi there”,Modifier.paddingFromBaseline(top = 40.dp,bottom = 20.dp))
}
}

• offset(x,y) 设置偏移量. x是相对于x轴上的偏移，y是相对于y轴上的偏移。
• absoluteOffset(x,y)设置偏移量

@Preview()
@Composable
fun offsetTest(){
Column(Modifier.background(Color.Yellow).size(width = 150.dp, height = 70.dp)) {
Text(text = “Hi here”,Modifier.offset(x=10.dp,y = 20.dp))
Text(text = “Hi here two”,Modifier.absoluteOffset(x=10.dp,y = 20.dp))
}
}

offset 修饰符根据布局方向水平应用。在从左到右的上下文中，正 offset 会将元素向右移，而在从右到左的上下文中，它会将元素向左移，如果您需要设置偏移量，而不考虑布局方向，请参阅 absoluteOffset 修饰符，其中，正偏移值始终将元素向右移

@Preview()
@Composable
fun alignTest() {
Row(Modifier.width(210.dp).height(100.dp)) {
Box(Modifier.align(alignment = Alignment.CenterVertically).width(20.dp).height(50.dp).background(Color.Blue))
}
}

@Preview()
@Composable
fun FlexibleComposable() {
Row(Modifier.width(210.dp)) {
Box(Modifier.weight(2f).height(50.dp).background(Color.Blue))
Box(Modifier.weight(1f).height(50.dp).background(Color.Red))
}
}

• aspectRatio 按照宽高比例进行设置，比如宽设置了80dp，ratio是2f，那么高自动会为40

@Preview()
@Composable
fun modifierAspectRadioTest(){
Box(modifier = Modifier.width(80.dp).aspectRatio(ratio = 2f, matchHeightConstraintsFirst = false).background(Color.Yellow))
}

• border 设置边框。比如在column里面设置个圆角的矩形，border的第一个参数是边框的宽度，第二个是颜色，第三个是shape。

@Preview()
@Composable
fun borderTest(){
Column(modifier = Modifier.size(200.dp),horizontalAlignment= Alignment.CenterHorizontally,verticalArrangement = Arrangement.Center) {
Box(modifier = Modifier.size(30.dp).border(width = 1.dp,color = Color.Blue,shape = RoundedCornerShape(4.dp)).background(Color.Yellow)) {}
}
}

• clickable 设置事件。可以设置点击，长按，双击等事件。举个简单的例子。Column点击的时候提示toast

@Composable
fun tabItem(){
val context = ContextAmbient.current
Column(modifier = Modifier.clickable(
enabled = true,
onClickLabel = “点击的lable”,
onClick = {
Toast.makeText(context, “点击了”, Toast.LENGTH_SHORT).show()
},
onLongClickLabel = “长按的lable”,
onLongClick = {
Toast.makeText(context, “长按了”, Toast.LENGTH_SHORT).show()
},
onDoubleClick = {
Toast.makeText(context, “双击了”, Toast.LENGTH_SHORT).show()
}
)){
Icon(vectorResource(id = R.drawable.ic_launcher_background))
Text(text = “哈哈哈”)
}
}

• alpha 设置不透明度，范围是从0-1。
• rotate 设置视频围绕其中心点旋转的角度
• scale 设置视图的缩放比例
• clip(shape) 设置裁剪。根据传入的shape，可以裁剪成对应的图行。比如头像裁剪成圆角的例子
• shadow 绘制阴影效果,第一个参数是阴影大佬，第二个是shape

@Preview()
@Composable
fun clipTest(){
val image = imageResource(id = R.drawable.icon_head)
val imageModifier = Modifier
.size(40.dp)
.alpha(0.5f) //设置透明度
.scale(0.5f) //设置缩放
.rotate(90f) //设置旋转角度
.clip(RoundedCornerShape(8.dp))
Column{
Image(bitmap = image, modifier = imageModifier, contentScale = ContentScale.Crop)
Box(modifier = Modifier.size(50.dp).shadow(elevation=2.dp,shape = CircleShape).clip(CircleShape).background(Color.Yellow))
}
}

// 首先我们定义一个Student类
class Student(var name:String=“”){}

@Composable
fun studentRowItem(student:Student){
Text(text = student.name,modifier = Modifier
.fillMaxHeight()
.width(60.dp),fontSize = 14.sp,textAlign = TextAlign.Center)

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级安卓工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Android移动开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注Android）

最后

如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。谢谢。

最后文末放上一个福利：GitHub地址

PS：我GitHub中有大量高阶Android学习视频资料和面试资料包~

觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。谢谢。

[外链图片转存中…(img-HZ8XsP5U-1711055566803)]

最后文末放上一个福利：GitHub地址

PS：我GitHub中有大量高阶Android学习视频资料和面试资料包~

欢迎大家一起交流讨论啊~