Jetpack?Compose實(shí)現(xiàn)點(diǎn)擊事件click的多種方法
Compose中添加click有多種方法,本文做一個(gè)簡單總結(jié)
Modifier.clickable
這是最常見也是最簡單的方式,如下所示
Box( modifier = Modifier.clickable { // 處理點(diǎn)擊事件 } )
當(dāng)點(diǎn)擊發(fā)生時(shí),除了可以相應(yīng)事假處理,也會觸發(fā)水波紋(Ripple)等主題效果。
需要注意,對于 Button 類的 Composable ,不推薦使用 Modifier.clickable,應(yīng)該使用其自帶的 onClick 參數(shù),雖然其內(nèi)部在調(diào)用 Modifier.clickable 之外還有一些額外處理
Button ( onClick = { // 處理點(diǎn)擊事件 }) { //... }
Modifier.combinedClickable
在單擊事件之外,同時(shí)可以處理雙擊,長按等點(diǎn)擊事件
Box( modifier = Modifier .combinedClickable( onClick = { // 單擊 }, onDoubleClick = { // 雙擊 }, onLongClick = { // 長按 } ) )
與 Modifier.clickable 一樣, 點(diǎn)擊會觸發(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)可以處理點(diǎn)擊各種事件。類似的還有 detectDragGestures
可以處理拖動(dòng)事件。
detectTapGestures 中除了相應(yīng)事件,還能通過 offset
獲知當(dāng)前點(diǎn)擊位置,如下:
detectTapGestures( onTap = { val x = it.x val y = it.y }, )
此外,當(dāng)發(fā)生 onPress
事件時(shí),還可以獲取手指離開時(shí)的回調(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)手指離開時(shí),繼續(xù)執(zhí)行。
tryAwaitRelease 返回一個(gè) bool 值:true 表示手指在當(dāng)前區(qū)域內(nèi)抬起,false 表示手指移出了當(dāng)前區(qū)域。類似于傳統(tǒng)視圖的 UP 和 CANCEL 事件。
可見,pointerInput 對事件可以更精細(xì)的管理。
ViewConfiguration
如果想對事件進(jìn)一步精細(xì)化控制,比如設(shè)置點(diǎn)擊最小間隔、長按超時(shí)等,可以使用 ViewConfiguration 進(jìn)行配置,目前可以設(shè)置的項(xiàng)目如下:
可見,ViewConfiguration 的配置主要影響 combinedClickable 和 pointerInput。
通過 LocalViewConfiguration
可以獲得全局默認(rèn)的 ViewConfiguration。我們可以通過繼承和重寫的方式,在默認(rèn)配置基礎(chǔ)上實(shí)現(xiàn)自定義的 ViewConfiguration 。然后同樣借助 CompositionLocal 實(shí)現(xiàn)其內(nèi)部局部 UI 的自定義配置。
下面的例子展示如何自定義長按超時(shí)時(shí)間:
// 自定義 ViewConfiguration class CustomViewConfiguration( private val defaultViewConfiguration: ViewConfiguration //傳入默認(rèn)配置 ) : ViewConfiguration by defaultViewConfiguration { // 自定義長按超時(shí)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ū)域的最小尺寸。這個(gè)挺實(shí)用,可以解決界面上一些小尺寸控件比艱難點(diǎn)觸的問題。 因此,通過設(shè)置,有可能 Composable 中 pointerInput
可以相應(yīng)事件的區(qū)域大于其實(shí)際渲染的區(qū)域。此時(shí)取得的 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) }
可以做個(gè)實(shí)驗(yàn),如果將其設(shè)置為 0.dp,則永遠(yuǎn)不會獲得負(fù)數(shù)的 offset 。當(dāng)然我們不推薦這么做,會造成難點(diǎn)觸的情況出現(xiàn)。
到此這篇關(guān)于Jetpack Compose實(shí)現(xiàn)點(diǎn)擊事件click的多種方法的文章就介紹到這了,更多相關(guān)Jetpack Compose click內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android開發(fā)之滑動(dòng)數(shù)值選擇器NumberPicker用法示例
這篇文章主要介紹了Android開發(fā)之滑動(dòng)數(shù)值選擇器NumberPicker用法,結(jié)合實(shí)例形式分析了Android滑動(dòng)數(shù)值選擇器NumberPicker的功能、相關(guān)函數(shù)、事件監(jiān)聽、界面布局等操作技巧,需要的朋友可以參考下2019-03-03如何正確實(shí)現(xiàn)Android啟動(dòng)屏畫面的方法(避免白屏)
本篇文章主要介紹了如何正確實(shí)現(xiàn)Android啟動(dòng)屏畫面的方法(避免白屏),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02Android中l(wèi)istview和imageview實(shí)現(xiàn)條目單選效果
這篇文章主要為大家詳細(xì)介紹了Android中l(wèi)istview和imageview實(shí)現(xiàn)條目單選效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02Android富文本實(shí)現(xiàn)的幾種方式匯總
由于項(xiàng)目中需要使用到富文本顯示和編輯,索性整理下,這篇文章主要給大家介紹了關(guān)于Android富文本實(shí)現(xiàn)的幾種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05Android實(shí)現(xiàn)圖片的高斯模糊(兩種方式)
本文給大家分享兩種實(shí)現(xiàn)圖片的高斯模糊效果,非常不錯(cuò),具有參考借鑒價(jià)值,對android圖片高斯模糊效果感興趣的朋友一起看看吧2017-03-03Android自定義View實(shí)現(xiàn)拖動(dòng)自動(dòng)吸邊效果
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)拖動(dòng)自動(dòng)吸邊效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06Android 倒計(jì)時(shí)控件 CountDownView的實(shí)例代碼詳解
這篇文章主要介紹了Android 倒計(jì)時(shí)控件 CountDownView的實(shí)例代碼,代碼簡單易懂,非常不錯(cuò),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06Android 實(shí)現(xiàn)永久保存數(shù)據(jù)的方法詳解
本篇文章是對Android實(shí)現(xiàn)永久保存數(shù)據(jù)的方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06