Modifier

一个用于修饰元素样式和行为的类，它属于compose开发中最重要的东西之一

调用顺序的不同效果

Text("test", Modifier.background(Color.Red).padding(20.dp)) //先设置背景色，再向四周撑开20dp。（文字区域+四周的20dp有底色）
Text("test", Modifier.padding(20.dp).background(Color.Red)) //先撑开，再设置底色（只有文字区域有底色）

常用方法

Modifier.size(width = 100.dp, height = 100.dp)
Modifier.size(100.dp) //w=100, h=100
Modifier.size(DpSize(width = 100.dp, height = 200.dp))

//设置偏移
Modifier.offset(150.dp, 180.dp)
Modifier.offset {
    IntOffset(150, 180)
}

//设置透明度
Modifier.alpha(.5f)


Modifier.fillMaxWidth() //宽度撑满全部
Modifier.fillMaxWidth(.5f) //50%
Modifier.fillMaxHeight()
Modifier.fillMaxHeight(.5f)
Modifier.fillMaxSize() //宽高占满
Modifier.fillMaxSize(.8f) //宽高都占80%



//占据主轴空间的比例/权重。(只能在Row和Column中使用)
Column {
    // 总的空间为2+1=3f
    Button(modifier = Modifier.weight(1f)) // 占3/1
    Button(modifier = Modifier.weight(2f)) // 占3/2
}
//fill为false时，自身保持最小尺寸。默认为true
Modifier.weight(2f, fill = false)



//预测容器大小并设置偏移、层级
Modifier.layout { measurable, constraints ->
            val placeable = measurable.measure(constraints) //预测大小
            layout(placeable.width, placeable.height) { //实际大小（此处不修改大小，保持原样）
                placeable.place(0, 0, 2.1f)            // 方式1:设置相对偏移和zIndex
                placeable.place(IntOffset(20,0), 2.1f) // 方式2:设置相对对偏移和zIndex
            }
        }



//内容大小变化时自带动画效果，只有大小变化时才有平滑效果，其它如颜色等变化时是没有的
Modifier.animateContentSize(animationSpec = spring(.3f, 800f))


Modifier.compose {}


//大小自适应内容
Modifier.wrapContentSize(
    align = Alignment.BottomEnd, // 内容位于父容器的右下角
    unbounded = true // 不受父容器限制。为false则会被父容器限制在屏幕内
)

scroll

val scroll = rememberScrollState()

        scroll.value //Int类型，当前滚动条位置
        scroll.maxValue //最大位置
        scroll.scrollTo() //挂起函数，无动画滚到到某位置
        scroll.animateScrollTo(100, tween()) //挂起函数，动画滚到到某位置

Modifier
.horizontalScroll(scroll, enabled = true) //横向滚动
.verticalScroll(scroll, enabled = true) //纵向滚动


//Modifier.scrollable还没弄懂。。，按照例子写没有效果

图像修饰

飞机票

pointerInput

侦听手势、点击等动作。所有的数值都是相对的，每一次变化都是相对于上一次变化的偏移

        Modifier..pointerInput(Unit) {
            
            //检测纵向拖动手势
            detectVerticalDragGestures { _, dragAmount : Float ->
                println("vertical $dragAmount")
            }

            //检测水平拖动手势
            detectHorizontalDragGestures(
                onHorizontalDrag = { _, dragAmount : Float ->
                    println("horizontal $dragAmount")
                }
            )

            //长按后检测拖动手势
            detectDragGesturesAfterLongPress { _, dragAmount ->
                println(dragAmount)
            }
            
            //检测点击手势
            detectTapGestures(onDoubleTap = {
                println("双击事件")
            }, onLongPress = {
                //长按事件
            },onPress = {offset ->
                println("onPress")
                awaitRelease() //等待弹起 也就是等待点击结束
                println("onRelease")
                scope.launch {
                    animatedOffset.animateTo(
                        offset,
                        animationSpec = spring(stiffness = Spring.StiffnessLow)
                    )
                }
            }, onTap = { offset ->
                println("tap")
                scope.launch {
                    animatedOffset.animateTo(
                        offset,
                        animationSpec = spring(stiffness = Spring.StiffnessLow)
                    )
                }
            })
        }

detectTransformGestures

多指的操作

    var scale by remember { mutableStateOf(1f) } // 缩放比例
    var rotation by remember { mutableStateOf(0f) } // 旋转角度
    var offset by remember { mutableStateOf(Offset.Zero) } // 平移位置
    Box(
        Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                detectTransformGestures { _, pan, zoom, rotationChange ->
                    scale *= zoom // 缩放
                    rotation += rotationChange // 旋转
                    offset += pan // 平移
                }
            }
            .graphicsLayer(
                scaleX = scale,
                scaleY = scale,
                rotationZ = rotation,
                translationX = offset.x,
                translationY = offset.y
            )
            .background(Color.Cyan)
    )

padding

//上下左右都是10dp
Modifier.padding(10.dp)
//只有上面10dp,还有其它三个start/end/bottom
Modifier.padding(top = 10.dp)
//水平10dp，也就是左右。还有vertical垂直
Modifier.padding(horizontal = 10.dp)
//PaddingValues同时支持上面三种方式
padding(paddingValues = PaddingValues())


Text("test", Modifier.background(Color.Red).padding(20.dp))