ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Compose | UI组件(一) | Modifier修饰符

2026/9/10 10:55:39 拓冰建站 浏览量
Compose | UI组件(一) | Modifier修饰符

文章目录

  • 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组件修饰符,可以修饰我们的界面。