博客

常用修饰符

1.Modifier.size

 Image(
                painter = painterResource(id = R.mipmap.head),
                contentDescription = null,
                modifier = Modifier
                    .size(60.dp)
                    .clip(CircleShape)
                    .background(color = Color.Gray)
            )

2.Modifier.background

（1）.纯色背景

Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(color = Color.Red)
            ) {
                Text(text = "纯色", Modifier.align(Alignment.Center))
            }

（2）.渐变色背景

Box(
                modifier = Modifier
                    .size(200.dp)
                    .background(brush = customBrush)
            ) {
                Text(text = "渐变色", Modifier.align(Alignment.Center))
            }


//Brush.verticalGradient 垂直方向渐变
//Brush.linearGradient  左上角到右下角方向渐变
//Brush.horizontalGradient 水平方向渐变
//Brush.radialGradient     环形圆圈形状从里到外渐变
//Brush.sweepGradient      环形渐变

val customBrush = Brush.radialGradient(
    colors = listOf(Color.Red, Color.Yellow, Color.Green, Color.Blue)
)

3.Modifier.fillMaxSize

   Box(modifier = Modifier.fillMaxWidth().background(Color.Yellow))
        Box(modifier = Modifier.fillMaxHeight().background(Color.Yellow))
        Box(modifier = Modifier.fillMaxSize().background(Color.Yellow))

4.Modifier.border() ,Modifier.padding

边框和边距

  //Border,padding
        Box(
            modifier = Modifier
                .padding(8.dp)//外间隙
                .border(width = 2.dp, Color.Red, RoundedCornerShape(2.dp))//边框
                .padding(8.dp)//内间隙
        ) {
            Spacer(
                modifier = Modifier
                    .size(width = 100.dp, height = 10.dp)
                    .background(Color.Red)
            )
        }

5.Modifier.offset 移动组件，根据偏移量x，y移动

    //offset
        //只显示移动后位置box
        Box(modifier = Modifier.size(100.dp).offset(x = 200.dp,y = 150.dp).background(Color.Red))
        //移动offset前设置了背景色和移动后设置了背景色，将显示两个不同颜色和不同位置box
        Box(modifier = Modifier.size(100.dp).background(Color.Red).offset{IntOffset(200.dp.roundToPx(),150.dp.roundToPx())}.background(Color.Blue))
        //只显示一个移动后box
        Box(modifier = Modifier
            .size(100.dp)
            .offset { IntOffset(200.dp.roundToPx(), 150.dp.roundToPx()) }
            .background(Color.Blue))

6.Modifier.matchParentSize()

只能在Box中使用的作用域限定修饰符，可以保证跟父组件尺寸相同，父组件是warpContent，效果是warpContent。

如果使用fillMaxSize设置，组件将被设置为父组件所允许的最大尺寸，会导致背景铺满整个屏幕。

7.Modifier.weight(1f)

设置权重，只能作用于Row和Column中效果于xml设置相同。