手势学习

1. 点击手势

@Composable
fun ClickableSample() {

    val number = remember {
        mutableStateOf(0)
    }

    Text(
        text = number.value.toString(),
        textAlign = TextAlign.Center,
        modifier = Modifier
            .wrapContentSize()
            .clickable {
                number.value++
            }
            .background(Color.LightGray)
            .padding(horizontal = 50.dp, vertical = 40.dp)
    )

}

@Composable
fun ClickableSample() {

    val number = remember {
        mutableStateOf(0)
    }

    Text(
        text = number.value.toString(),
        textAlign = TextAlign.Center,
        modifier = Modifier
            .wrapContentSize()
//            .clickable {
//                number.value++
//            }
            .pointerInput(Unit){
                detectTapGestures(
                    onPress = { number.value =1 },//按
                    onDoubleTap = { number.value=9 },//双击
                    onLongPress = {number.value=10},//长按
                    onTap = {number.value = 3}//按下松开

                )
            }
            .background(Color.LightGray)
            .padding(horizontal = 50.dp, vertical = 40.dp)
    )

}

2. 滚动修饰符

内部改变状态 

// 滚动修饰符
@Composable
fun ScrollBoxes(){
    Column(
        Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .verticalScroll(rememberScrollState())
    ) {
        //从零开始的
        repeat(10){
            Text(text = "ite, $it",Modifier.padding(2.dp))
        }
    }

外部改变状态

//借助ScrollState,您可以更改滚动位置或获取当前状态
@Composable
fun ScrollBoxesSmooth() {
    val state = rememberScrollState()
    // 设置一个较慢的动画过渡时间
    val animationSpec = TweenSpec<Float>(durationMillis = 1000)
    LaunchedEffect(Unit) {
        //慢慢滚动变成100
            state.animateScrollTo(300,animationSpec)
    }

    Column(
        Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .verticalScroll(state)
    ) {
        //从零开始的
        repeat(10) {
            Text(text = "item $it", Modifier.padding(2.dp))
        }
    }
}

3.可滚动修饰符 

//可滚动的修饰符
//scrollable 修饰符与滚动修饰符不同，区别在于scrollable 可检测滚动手势，但不会便宜其内容.
@Composable
fun ScrollableSample(){

    val offset = remember {
        mutableStateOf(0f)
    }
    Box(modifier =
    Modifier
        .size(150.dp)
        .scrollable(
            orientation = Orientation.Vertical,
            state = rememberScrollableState { delta ->
                offset.value += delta//像素为单位
                delta
            }
        )
        .background(Color.LightGray),
        contentAlignment = Alignment.Center
    ){
            Text(text =offset.value.toString() )
    }


}

 4. 嵌套滚动

//嵌套滚动
@Composable
fun NestedScrollSample(){
    val  gradient = Brush.verticalGradient(
        0f to Color.Gray,1000f to Color.White
    )
    Box(modifier = Modifier
        .background(Color.LightGray)
        .verticalScroll(rememberScrollState())
        .padding(32.dp)){
        Column {
            repeat(6){
                Box(modifier = Modifier
                    .height(128.dp)
                    .verticalScroll(rememberScrollState())){
                    Text(text = "Scroll here",
                        modifier = Modifier
                            .border(12.dp, Color.DarkGray)
                            .background(brush = gradient)
                            .padding(24.dp)
                            .height(150.dp))//Text 高度大于外部容器Box的高度
                }
            }
        }
    }
}

 5.拖动

//拖动
@Composable
fun DraggableSample() {

    var offsetX by remember { mutableStateOf(0f) }
    var offsetY by remember { mutableStateOf(0f) }
    Box(modifier = Modifier
        .draggable(
            orientation = Orientation.Horizontal,
            state = rememberDraggableState {
                offsetX += it
            }
        ) .draggable(
            orientation = Orientation.Vertical,
            state = rememberDraggableState {
                offsetY += it
            }
        )
        .offset(x = offsetX.dp, y = offsetY.dp)
        .background(Color.Yellow)){
        Text(
            text = "Drag me!", textAlign = TextAlign.Center, modifier = Modifier.padding(30.dp)
        )
    }
}

//拖动 如果您需要控制整个拖动手势,请考虑改为通过pointerInput修饰符使用拖动手势检测器
@Composable
fun DraggableWhereYouWantSample() {

    Box(modifier = Modifier.fillMaxSize()) {

        var offsetX by remember { mutableStateOf(0f) }
        var offsetY by remember { mutableStateOf(0f) }
        Box(modifier = Modifier
            .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
            .background(Color.Blue)
            .size(50.dp)
            .pointerInput(Unit){
                //拖动的手势
                detectDragGestures { change, dragAmount ->

                    offsetX+=dragAmount.x
                    offsetY+=dragAmount.y

                }
            }.align(Alignment.BottomEnd)
        )

    }

}

6.滑动

新版本被废弃了

7.多点触控 

//多点触控:平移 缩放 旋转
@Composable
fun TransformableSample(){

    var scale by remember {
        mutableStateOf(1f)//缩放
    }
    var rotation by remember {
        mutableStateOf(0f)//旋转
    }
    var offset by remember {
        mutableStateOf(Offset.Zero)//平移
    }
    val state = rememberTransformableState{zoomChange//缩放
                                           , panChange//平移
                                           , rotationChange//旋转
        ->
        scale*=zoomChange
        rotation+=rotationChange
        offset+=panChange
    }
    Box(modifier = Modifier
        .graphicsLayer(
            scaleX = scale,
            scaleY = scale,
            rotationZ = rotation,
            translationX = offset.x,
            translationY = offset.y
        )
        .transformable(state =  state)
        .background(Color.Blue)
        .size(100.dp,200.dp))
}