Jetpack Compose:Modifier 修饰符
Modifier 可以通过链式调用的写法来为组件应用一系列的样式,每个基础的 Composable 组件都有一个 modifier 属性。
Ⅰ.常用修饰符
本章节记录一些常用的预置 Modifier 修饰符,对所有 Composable 组件通用。
1.Modifier.size
size
修饰符用来设置组件大小,代码如下所示:
Row {
Image(
painterResource(id = R.drawable.t),
contentDescription = null,
modifier = Modifier
// 单独设置宽高
.size(
width = 120.dp, height = 120.dp
)
.clip(CircleShape)
)
Image(
painterResource(id = R.drawable.t),
contentDescription = null,
modifier = Modifier
// 统一设置宽高
.size(80.dp)
.clip(CircleShape)
)
}
2.Modifier.background
background
修饰符用来给修饰组件添加背景色,可以设置纯色和渐变色背景。
Row {
Box (
modifier = Modifier
.padding(10.dp)
// 纯色背景
.background(color = Color.Red)
.padding(10.dp)
) {
Text(text = "纯色背景")
}
// 创建渐变色
val verticalGradientBrush = Brush.verticalGradient(
colors = listOf(
Color.Red,
Color.Yellow,
Color.Blue
)
)
Box (
modifier = Modifier
.padding(10.dp)
// 渐变色背景
.background(brush = verticalGradientBrush)
.padding(10.dp)
) {
Text(text = "渐变背景")
}
}
3.Modifier.fillMaxXXX
fillMaxXXX
系列修饰符用来让组件在宽高上填满父空间
Row {
Box (
modifier = Modifier
.background(Color.Red)
// 填满整个父空间
.fillMaxSize()
) {
Text(
text = "填满整个父空间",
modifier = Modifier.align(Alignment.Center),
color = Color.White
)
}
}
Row {
Box (
modifier = Modifier
.background(Color.Gray)
// 高度填满整个父空间
.fillMaxHeight()
) {
Text(
text = "高度填满整个父空间",
modifier = Modifier.align(Alignment.Center),
color = Color.White
)
}
}
Row {
Box (
modifier = Modifier
.padding(0.dp)
.background(Color.Blue)
// 宽度填满整个父空间
.fillMaxWidth()
.padding(10.dp)
) {
Text(
text = "宽度填满整个父空间",
modifier = Modifier.align(Alignment.Center),
color = Color.White
)
}
}
4. Modifier.border
border
修饰符用来为组件添加边框,边框可以指定颜色、粗细、以及形状。
Row {
Box (
modifier = Modifier
.padding(0.dp)
// 设置边框
.border(5.dp, Color.Red, shape = RoundedCornerShape(2.dp))
.background(Color.Blue)
.fillMaxWidth()
.padding(10.dp)
) {
Text(
text = "宽度填满整个父空间",
modifier = Modifier.align(Alignment.Center),
color = Color.White
)
}
}
5.Modifier.padding
padding
修饰符可以用来给组件添加外边距和内边距,padding
根据在不同位置发挥不同作用,体现了 Modifier 链式调用的特点。0
Row {
Box (
modifier = Modifier
// 外边距
.padding(20.dp)
.border(2.dp, Color.Blue, shape = RoundedCornerShape(20.dp))
// 内边距
.padding(10.dp)
) {
Text("边距")
}
}
6.Modifier.offset
offset
修饰符用来移动组件的位置。
Row {
Box (
modifier = Modifier
.size(100.dp)
.background(Color.Red)
)
Box (
modifier = Modifier
.size(100.dp)
// 因为 Modifier 是链式调用,所以应先移动再设置设置背景色
.offset(x = 150.dp, y = 75.dp)
.background(Color.Blue)
)
}