快捷導(dǎo)航

Jetpack?Compose實現(xiàn)點擊事件click的多種方法

更新時間：2024年02月11日 12:00:19 作者：fundroid

這篇文章主要介紹了Jetpack?Compose實現(xiàn)點擊事件的多種方法,Jetpack?Compose是一款基于Kotlin的聲明式UI工具包,可以方便地創(chuàng)建漂亮的用戶界面,下面我們就來看看Jetpack?Compose添加點擊事件都可以怎么實現(xiàn)

Modifier.clickable

這是最常見也是最簡單的方式，如下所示

Box(
    modifier = Modifier.clickable {
        // 處理點擊事件
    }
)

當(dāng)點擊發(fā)生時，除了可以相應(yīng)事假處理，也會觸發(fā)水波紋（Ripple）等主題效果。

需要注意，對于 Button 類的 Composable ，不推薦使用 Modifier.clickable，應(yīng)該使用其自帶的 onClick 參數(shù)，雖然其內(nèi)部在調(diào)用 Modifier.clickable 之外還有一些額外處理

Button (
	onClick = {
	 	// 處理點擊事件
	}) {
	//...
}

Modifier.combinedClickable

在單擊事件之外，同時可以處理雙擊，長按等點擊事件

Box(
    modifier = Modifier
        .combinedClickable(
            onClick = {
                // 單擊
            },
            onDoubleClick = {
                // 雙擊
            },
            onLongClick = {
                // 長按
            }
        )
)

與 Modifier.clickable 一樣，點擊會觸發(fā)水波紋效果。

Modifier.pointerInput

pointerInput 是 Compose 中處理所有手勢事件的入口，類似傳統(tǒng)視圖的 onTouch 。在這里可以識別 click 手勢，而且相應(yīng)優(yōu)先級高于 clickable，但是不會觸發(fā)水波紋之類的效果

Box(
    modifier = Modifier
        .pointerInput(Unit) {
            detectTapGestures(
                onDoubleTap = {
                },
                onLongPress = {
                },
                onPress = {
                },
                onTap = {
                }
            )
        },
)

如上，detectTapGestures 內(nèi)可以處理點擊各種事件。類似的還有 detectDragGestures 可以處理拖動事件。

detectTapGestures 中除了相應(yīng)事件，還能通過 offset 獲知當(dāng)前點擊位置，如下：

detectTapGestures(
    onTap = {
        val x = it.x
        val y = it.y
    },
)

此外，當(dāng)發(fā)生 onPress 事件時，還可以獲取手指離開時的回調(diào)

var pressing by remember { mutableStateOf(false) }
Box(
    modifier = Modifier
        .pointerInput(Unit) {
            detectTapGestures(
                onPress = {
                    // 按下
                    pressing = true
                    val isCanceled = tryAwaitRelease()
                    // 離開
                    pressing = false
                },
            )
        },
)

OnPress 期間，調(diào)用 tryAwaitRelease 會掛起當(dāng)前函數(shù)，當(dāng)手指離開時，繼續(xù)執(zhí)行。

tryAwaitRelease 返回一個 bool 值：true 表示手指在當(dāng)前區(qū)域內(nèi)抬起，false 表示手指移出了當(dāng)前區(qū)域。類似于傳統(tǒng)視圖的 UP 和 CANCEL 事件。

可見，pointerInput 對事件可以更精細(xì)的管理。

ViewConfiguration

如果想對事件進(jìn)一步精細(xì)化控制，比如設(shè)置點擊最小間隔、長按超時等，可以使用 ViewConfiguration 進(jìn)行配置，目前可以設(shè)置的項目如下：

可見，ViewConfiguration 的配置主要影響 combinedClickable 和 pointerInput。

通過 LocalViewConfiguration 可以獲得全局默認(rèn)的 ViewConfiguration。我們可以通過繼承和重寫的方式，在默認(rèn)配置基礎(chǔ)上實現(xiàn)自定義的 ViewConfiguration 。然后同樣借助 CompositionLocal 實現(xiàn)其內(nèi)部局部 UI 的自定義配置。

下面的例子展示如何自定義長按超時時間：

// 自定義 ViewConfiguration
class CustomViewConfiguration(
    private val defaultViewConfiguration: ViewConfiguration //傳入默認(rèn)配置
) : ViewConfiguration by defaultViewConfiguration {
    // 自定義長按超時3000ms
    override val longPressTimeoutMillis: Long = 3000
}
@Composable
fun Sample() {
    // 獲取全局默認(rèn) ViewConfiguration
    val defaultViewConfiguration = LocalViewConfiguration.current
	// 基于默認(rèn)配置創(chuàng)建自定義 CustomViewConfiguration
    val viewConfiguration = remember {
        CustomViewConfiguration(defaultViewConfiguration)
    }
    CompositionLocalProvider(
        LocalViewConfiguration provides viewConfiguration
    ) {
        // 內(nèi)部的事件配置都受到 CustomViewConfiguration 影響
        Box(
            modifier = Modifier
                .combinedClickable(
                    onLongClick = {
                        // ...
                    },
                )
        )
    }
}

值得一提的是 ViewConfiguration.minimumTouchTargetSize 用來設(shè)置手勢可響應(yīng)區(qū)域的最小尺寸。這個挺實用，可以解決界面上一些小尺寸控件比艱難點觸的問題。因此，通過設(shè)置，有可能 Composable 中 pointerInput 可以相應(yīng)事件的區(qū)域大于其實際渲染的區(qū)域。此時取得的 offset 值可能是負(fù)數(shù)，亦可能超過 Compose 的 size。

minimumTouchTargetSize 默認(rèn)值是 48.dp，所以如果我們開發(fā)中獲取了負(fù)數(shù) offset 值也不驚奇。

class CustomViewConfiguration(
    private val defaultViewConfiguration: ViewConfiguration
) : ViewConfiguration by defaultViewConfiguration {
    override val minimumTouchTargetSize: DpSize = DpSize(0.dp, 0.dp)
}

可以做個實驗，如果將其設(shè)置為 0.dp，則永遠(yuǎn)不會獲得負(fù)數(shù)的 offset 。當(dāng)然我們不推薦這么做，會造成難點觸的情況出現(xiàn)。

到此這篇關(guān)于Jetpack Compose實現(xiàn)點擊事件click的多種方法的文章就介紹到這了,更多相關(guān)Jetpack Compose click內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: