文章目录
- Modifier修饰符-简介
- Modifier修饰符 - size
- Modifier修饰符 - background
- Modifier修饰符 - fillMaxSize
- Modifier修饰符 - border 和 padding
- Modifier修饰符 - offset
- 总结
Modifier修饰符-简介
Modifier通过链式调用方式为所有Compose组件设置样式(大小,背景色,边框,间隙,位移等等)
Modifier修饰符 - size
设置被修饰组件的大小
Column {//width 和 height 同时设置 60dpImage(painter = painterResource(id = R.drawable.ic_launcher_background),contentDescription = null,modifier = Modifier.size(60.dp))//width 设置 60dp 和 height 设置 100dpImage(painter = painterResource(id = R.drawable.ic_launcher_background),contentDescription = null,modifier = Modifier.size(width = 60.dp, height = 100.dp))
}
Modifier修饰符 - background
设置被修饰组件背景色
Column {Box(modifier = Modifier.size(60.dp).background(color = Color.Red)){Text(text = "纯色")}Spacer(modifier = Modifier.height(1.dp))Box(modifier = Modifier.size(60.dp).background(brush = GradientBrush)){Text(text = "渐变色")}
}val GradientBrush = Brush.verticalGradient(colors = listOf(Color.Red,Color.Yellow,Color.White)
)
Modifier修饰符 - fillMaxSize
设置组件高度或者宽度填充父空间
//填满整个父空间
Box(modifier = Modifier.fillMaxSize().background(Color.Red))
//高度填满父空间
Box(modifier = Modifier.fillMaxHeight().width(60.dp).background(Color.Gray))
//宽度填满父空间
Box(modifier = Modifier.fillMaxWidth().height(60.dp).background(Color.Black))
Modifier修饰符 - border 和 padding
border修饰组件的边框,padding修饰组件的间隙
Box(modifier = Modifier.padding(8.dp) //外边距.border(2.dp,Color.Red,shape = RoundedCornerShape(2.dp)) //边框.padding(10.dp) //内边距
){//留白组件Spacer(modifier = Modifier.size(width = 100.dp, height = 10.dp).background(Color.Red))
}
Modifier修饰符 - offset
移动被修饰组件的位置
Box(modifier = Modifier.size(100.dp).offset(x=200.dp,y=150.dp)
)
总结
这些都是常用到的Compose组件修饰符,可以修饰我们的界面。