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

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

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

Modifier.offset

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

Modifier的offset可以偏移內(nèi)容。偏移量可以是正的，也可以是非正的。應(yīng)用偏移只會(huì)更改內(nèi)容的位置，而不會(huì)影響其大小測(cè)量。

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

graphicsLayer

使內(nèi)容繪制到繪制層中的元素。繪圖層可以與父層分開失效。當(dāng)內(nèi)容獨(dú)立于上面的任何內(nèi)容進(jìn)行更新時(shí)，應(yīng)使用graphicsLayer，以最小化無效內(nèi)容。

graphicsLayer可以用于對(duì)內(nèi)容應(yīng)用各種效果

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

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

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

Modifier.pointerInput

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

PointerInputScope.detectTransformGestures

可以用于旋轉(zhuǎn)、平移和縮放的手勢(shì)檢測(cè)器。。當(dāng)發(fā)生任何旋轉(zhuǎn)、縮放或平移時(shí)，將調(diào)用OnGeture，以度為單位傳遞旋轉(zhuǎn)角度，以像素為單位放大比例因子并以偏移量平移。

邏輯解釋

定義4個(gè)變量

var angle by remember { mutableStateOf(0f) }//旋轉(zhuǎn)的角度
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)聽手勢(shì)

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

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

圖片的話加個(gè)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()
    )
}