前言

JetPack Compose (后續簡稱compose) release版已經出來了三四個月了,雖然沒正式版之前也學過幾次,但一直沒有機會用,在加上api的變更,導致之前學的都忘完了,現在終于有機會寫一點(將原有項目的簡單頁面用compose重寫),發現了一些compose的優勢和劣勢:

優勢:

1.超容易封裝和組合,相對于原生自定義組合view,compose組合一個view簡直不要太簡單,只需要一個方法就能搞定,封裝也更簡便好用(組合vs繼承)

2.跨平臺,目前kotlin的跨平臺,compose ui是其中重大的一步,雖然目前跨平臺還不是正式版,平臺支持的也不全,但未來可期

3.響應式ui,響應式是未來的ui范式,如果吃透的話不管是開發效率還是bug出現幾率都可以大幅減少

4.互操作性,compose和kotlin一樣,都保持了優良的互操作性,這樣不管是推廣還是項目過度都能更平滑,這樣不僅新項目可以用,老項目也可以在某個頁面或某個布局位置使用compose,這么菜大佬的文章很好的講了這一點:?Jetpack Compose和View的互操作性 - 圣騎士wind - 博客園 (cnblogs.com)

5.代碼即時預覽,雖然目前不是很完善,只支持String之類的修改即時預覽,但是未來應該會有長足的進步.(即時預覽:不止是在Preview處,另一個地方是如果你跑在設備上,你在代碼處修改,設備上也會即時修改)

6.動態內容,比如你可以在compose中使用 if 或者 for 等進行流程控制,這在xml view體系中基本是不可能的

7.理論性能更好,因為compose使用了部分內容重組和并行執行,并且沒有xml加載和解析,所以性能理論上會更好,但目前大部分還是不如原生,但現在才1.0.1,有很多優化空間

8.如果你使用flutter可以很輕松的學會,并且比flutter更簡潔,語言更好用

劣勢:

1.學習成本高,學習曲線稍微陡峭,需要顛覆之前的view體系的view,動畫,手勢和三方庫之類的,需要一定勇氣

2.代碼要求較高,需要以函數式的要求來寫compose代碼,要求compose代碼冪等,無副作用,保持方法快速

3.嵌套地獄,可以通過抽方法解決(當然比flutter好點)

4.目前view組件比較基礎,很多需要自行封裝

5.現存資料較少,不過以后應該會慢慢多起來

正文

我就懶得寫各種api怎么用了,網上很多,官網也有,只寫一些可能需要自定義的東西

1.防止重復點擊

compose實現點擊事件很簡單,如下

Text(text = "", modifier = Modifier.clickable {//點擊回調})

但是實現防止重復點擊可能會麻煩些,如下:

const val VIEW_CLICK_INTERVAL_TIME = 800//View的click方法的兩次點擊間隔時間/*** 防止重復點擊(有的人可能會手抖連點兩次,造成奇怪的bug)*/ @Composable inline fun Modifier.click(time: Int = VIEW_CLICK_INTERVAL_TIME,enabled: Boolean = true,//中間這三個是clickable自帶的參數onClickLabel: String? = null,role: Role? = null,crossinline onClick: () -> Unit ): Modifier {var lastClickTime = remember { 0L }//使用remember函數記錄上次點擊的時間return clickable(enabled, onClickLabel, role) {val currentTimeMillis = System.currentTimeMillis()if (currentTimeMillis - time >= lastClickTime) {//判斷點擊間隔,如果在間隔內則不回調onClick()lastClickTime = currentTimeMillis}} }//使用如下,api基本沒有區別:Text(text = "", modifier = Modifier.click {//點擊回調})

2.Button的防止重復點擊

Button的點擊事件如下:

Button(onClick = {//點擊回調}) {}

可以看出onClick參數是一個()->Unit,所以我們只需要返回一個可以過濾重復點擊的()->Unit即可,如下所示:

/*** 防止重復點擊,比如用在Button時直接傳入onClick函數*/ @Composable inline fun composeClick(time: Int = VIEW_CLICK_INTERVAL_TIME,crossinline onClick: () -> Unit ): () -> Unit {var lastClickTime = remember { 0L }//使用remember函數記錄上次點擊的時間return {val currentTimeMillis = System.currentTimeMillis()if (currentTimeMillis - time >= lastClickTime) {//判斷點擊間隔,如果在間隔內則不回調onClick()lastClickTime = currentTimeMillis}} }使用如下:Button(onClick = composeClick {//點擊回調}) {}

3.雙擊

雙擊可以使用compose的基礎觸摸api:

/*** 雙擊事件*/ fun Modifier.doubleClick(onDoubleClick: (Offset) -> Unit): Modifier =//處理手勢反饋pointerInput(this) {//處理基礎手勢反饋detectTapGestures(onDoubleTap = onDoubleClick//雙擊時回調 // onPress = {}//按下時回調 // onLongPress = {}//長按時回調 // onTap = {}//輕觸時回調(按下并抬起))})}使用方式:Text(text = "", modifier = Modifier.doubleClick {//雙擊回調})

4.長按

長按也可以使用compose的基礎觸摸api:

/*** 長按事件*/ fun Modifier.longClick(onLongClick: (Offset) -> Unit): Modifier =pointerInput(this) {detectTapGestures(onLongPress = onLongClick)}使用如下:Text(text = "", modifier = Modifier.longClick {//雙擊回調})

5.全局觸摸隱藏鍵盤

全局觸摸自動隱藏鍵盤也是用到了基礎觸摸api,并使用我們常用的鍵盤工具類(可自行搜索),代碼如下:

/*** 在有鍵盤的頁面,設置在root compose上,點擊別處可以自動隱藏鍵盤*/ fun Modifier.autoCloseKeyboard(view: View): Modifier =pointerInput(this) {detectTapGestures(onPress = {KeyBoardUtil.hideKeyboard(view)//調用鍵盤工具類來隱藏鍵盤})}使用如下:Text(text = "", modifier = Modifier.autoCloseKeyboard(getRootViewGroup()))

結語

以后有好用的新東西在寫這個系列吧,畢竟目前用的不多

官方自定義view教學的視頻:?2021 Google 開發者大會，加入我們 Develop as One!

end

總結

以上是生活随笔為你收集整理的Compose 手势事件:防止重复点击,双击,长按,全局触摸隐藏键盘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。