Compose Modifier

padding(边距)

* 在设置size之前设置相当于外边距
* 在设置size之后设置相当于内边距，组件大小不变
* 设置背景,对应背景来说，在它之前设置的也相当于外边距
* 同理点击区域的大小也一样的

background(背景)

Color 单色 或者 Brush 多色混合   https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/graphics/Brush
你想设置背景图片？
你可以使用drawBehind

drawBehind(在组件背后绘制)

这是一个绘制背景的例子
val bgImg = LocalContext.current.getDrawable(R.mipmap.bg)
Modifier.drawBehind {
            bgImg?.updateBounds(0, 0, size.width.toInt(), size.height.toInt())
            bgImg?.draw(drawContext.canvas.nativeCanvas)
        }

clickable(点击事件)

Modifier.clickable设置完点击事件后有默认波纹，可以indication=null取消波纹，还通过监听interactionSource自定义Compose点击事件

@Composable
fun ImageButton(painter: Painter,onClick:()->Unit){
    //创建interactionSource
    val interactionSource = remember { MutableInteractionSource() }
    //获取点击的状态 是否按下
    val pressState = interactionSource.collectIsPressedAsState()
    Image(
        painter = painter,
        modifier = Modifier
            .clickable(
                indication = null,
                interactionSource = interactionSource,
                onClick = onClick
            ),
        alpha = if(pressState.value) 0.3f else 1f,
        contentDescription = null)
}

size(布局大小)

animateContentSize( 为其自己的大小改变设置动画)

@Composable
private fun CardContent(name: String) {
    var expanded by remember { mutableStateOf(false) }

    Row(
        modifier = Modifier
            .padding(12.dp)
            .animateContentSize(
                animationSpec = spring(
                    dampingRatio = Spring.DampingRatioMediumBouncy,
                    stiffness = Spring.StiffnessLow
                ),
                finishedListener = { _: IntSize, _: IntSize ->
                    expanded = !expanded
                }
            )
    ) {
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(12.dp)
        ) {
            Text(text = "Hello, ")
            Text(
                text = name,
                style = MaterialTheme.typography.h4.copy(
                    fontWeight = FontWeight.ExtraBold
                )
            )
            if (expanded) {
                Text(
                    text = ("Composem ipsum color sit lazy, " +
                        "padding theme elit, sed do bouncy. ").repeat(4),
                )
            }
        }
        IconButton(onClick = { expanded = !expanded }) {
            Icon(
                imageVector = if (expanded) Filled.ExpandLess else Filled.ExpandMore,
                contentDescription = if (expanded) {
                    stringResource(R.string.show_less)
                } else {
                    stringResource(R.string.show_more)
                }

            )
        }
    }
}