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

Modifier修饰符-简介

Modifier通过链式调用方式为所有Compose组件设置样式（大小，背景色，边框，间隙，位移等等）

Modifier修饰符 - size

设置被修饰组件的大小

Column {
   
    //width 和 height 同时设置 60dp
     Image(painter = painterResource(id = R.drawable.ic_launcher_background),
           contentDescription = null,
           modifier = Modifier.size(60.dp))

     //width 设置 60dp 和 height 设置 100dp
     Image(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组件修饰符，可以修饰我们的界面。