Jetpack Compose 雙指拖拽實現(xiàn)詳解

更新時間：2022年11月17日 15:14:12 作者：九狼

這篇文章主要為大家介紹了Jetpack Compose 雙指拖拽實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

Modifier.offset

Compose遇到一個瀏覽圖片的功能，雙指放大和縮小

Modifier的offset可以偏移內容。偏移量可以是正的，也可以是非正的。應用偏移只會更改內容的位置，而不會影響其大小測量。

offset由于用戶交互而發(fā)生變化的偏移。它避免了在偏移量發(fā)生變化時進行重新編譯，還添加了一個圖形層，以防止在偏移量發(fā)生變化時對上下文進行不必要的重畫。

graphicsLayer

使內容繪制到繪制層中的元素。繪圖層可以與父層分開失效。當內容獨立于上面的任何內容進行更新時，應使用graphicsLayer，以最小化無效內容。

graphicsLayer可以用于對內容應用各種效果

縮放（scaleX、scaleY）
旋轉（rotationX、rotationY、rotationZ）
不透明度（alpha）
陰影（shadowElevation、shape）
剪裁（clip、shape）
以及使用Renderefect更改層的結果。

官方說，如果提供非零陰影高程，并且傳遞的形狀為凹面，則陰影將不會在小于10的Android版本上繪制。

還有小于1.0f的alpha值會將其內容隱式剪裁到其邊界。這是因為創(chuàng)建了一個中間合成層，以便在使用所需的alpha將內容繪制到目標之前，先將內容渲染到first中。該層的大小與配置該修改器的可組合對象的邊界一致，這些邊界之外的內容將被忽略。

Modifier.pointerInput

用于處理修改元素區(qū)域內的指針輸入。 PointerInputScope或AwaitPointerEventScope上的擴展函數(shù)可以定義為執(zhí)行更高級別的手勢檢測。指針輸入處理塊將被取消，并在指針輸入用不同的鍵1重新組合時重新啟動。

PointerInputScope.detectTransformGestures

可以用于旋轉、平移和縮放的手勢檢測器。。當發(fā)生任何旋轉、縮放或平移時，將調用OnGeture，以度為單位傳遞旋轉角度，以像素為單位放大比例因子并以偏移量平移。

邏輯解釋

定義4個變量

var angle by remember { mutableStateOf(0f) }//旋轉的角度
var zoom by remember { mutableStateOf(1f) }//縮放
var offsetX by remember { mutableStateOf(0f) }//X軸偏移量
var offsetY by remember { mutableStateOf(0f) }//X軸偏移量

offset

Modifier
    .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }

傳入graphicsLayer里面

.graphicsLayer(
    scaleX = zoom,
    scaleY = zoom,
    rotationZ = angle
)

監(jiān)聽手勢

接著就是要監(jiān)聽手勢，拿到手勢的滑動返回的值讓mutableStateOf告訴graphicsLayer刷新UI

.pointerInput(Unit) {
    detectTransformGestures(
        onGesture = { _, pan, gestureZoom, gestureRotate -&gt;
            angle += gestureRotate
            zoom *= gestureZoom
            offsetX += pan.x
            offsetY += pan.y
        }
    )
}

圖片的話加個Image就可以了，我在這里用背景色代替

 background(Color.Cyan)

完整代碼

@Composable
private fun TransformGestures() {
    var angle by remember { mutableStateOf(0f) }
    var zoom by remember { mutableStateOf(1f) }
    var offsetX by remember { mutableStateOf(0f) }
    var offsetY by remember { mutableStateOf(0f) }
    Box(
        Modifier
            .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
            .graphicsLayer(
                scaleX = zoom,
                scaleY = zoom,
                rotationZ = angle
            )
            .background(Color.Cyan)
            .pointerInput(Unit) {
                detectTransformGestures(
                    onGesture = { _, pan, gestureZoom, gestureRotate -&gt;
                        angle += gestureRotate
                        zoom *= gestureZoom
                        offsetX += pan.x
                        offsetY += pan.y
                    }
                )
            }
            .fillMaxSize()
    )
}