Description of android Compose Modifier

common modifiers

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). Solid color background

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

(2). Gradient color background

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

borders and margins

  //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 moves the component according to the 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()

The scope-limited modifier that can only be used in Box can guarantee the same size as the parent component. The parent component is warpContent, and the effect is warpContent.

If the fillMaxSize setting is used, the component will be set to the maximum size allowed by the parent component, causing the background to fill the entire screen.

7.Modifier.weight(1f)

Setting the weight can only be applied to Row and Column, and the effect is the same as the xml setting.