ArkUI動畫/交互事件開發常見問題(ArkTS)
焦點事件onBlur/onFocus回調無法觸發(API 9)
問題現象
焦點事件onBlur/onFocus回調無法觸發
解決措施
焦點事件默認情況下需要外接鍵盤的Tab鍵，或方向鍵觸發，點擊觸發焦點事件需要添加焦點控制屬性focusOnTouch。
參考鏈接
焦點控制
scroll里面套一個grid，如何禁用grid的滑動事件(API 9)
可以通過onScrollFrameBegin事件和scrollBy方法實現容器嵌套滾動。
參考鏈接
容器嵌套滾動樣例
如何實現一個組件不停地旋轉(API 9)
可以通過屬性動畫的方式實現。
列表目前無法鍵盤上下滑動，是否能力不支持(API 9)
解決措施
有以下兩種方案：
-
需要在列表子項中添加focusable(true)進行獲焦。
-
在每個item的外層嵌套一個可獲焦組件，例如Button。
鍵盤移動焦點對象按下enter，為什么不會觸發點擊事件(API 9)
組件的內置的點擊事件和開發者自定義的onClick點擊事件默認會和空格鍵綁定，并非與enter鍵綁定（UX規格）。
多層組件嵌套button，如何阻止事件傳遞(API 9)
可以通過將button組件綁定參數stopPropagation來控制冒泡傳遞。
使用router或Navigator實現頁面跳轉時，如何關閉頁面間轉場動效(API 9)
-
參考頁面間轉場示例在當前頁面和目標頁面中定義pageTransition方法。
-
將頁面入場組件PageTransitionEnter和頁面退場組件PageTransitionExit的動效參數duration都設置為0。
在容器組件嵌套的場景下，如何解決手勢拖拽事件出現錯亂的問題(API 9)
PanGesture用于觸發拖動手勢事件，滑動的最小距離distance默認為5vp時拖動手勢識別成功。可以將distance值設為1，使拖動更靈敏，避免造成事件錯亂。
參考鏈接
PanGesture
是否支持使用fontFamily屬性設置不同的字體(API 9)
默認字體’HarmonyOS Sans’，且當前只支持這種字體。
點擊輸入框時會拉起軟鍵盤，點擊button時軟鍵盤關閉要如何實現(API 9)
TextInput獲取焦點會彈出輸入法，失去焦點就會關閉軟鍵盤，使用focusControl控制焦點即可關閉軟鍵盤。
代碼示例
build() {Column() {TextInput()Button(`hide`).key('button').onClick(()=>{focusControl.requestFocus('button')})}
}
當父組件綁定了onTouch，其子組件Button綁定了onClick，如何做到點擊Button只響應Button的onClick，而不用響應父組件的onTouch(API 9)
可以在Button組件中綁定onTouch，并在onTouch中使用stopPropagation()阻止onTouch冒泡傳遞到父組件阻止冒泡傳遞。
代碼示例
build() {Row() {Button("點擊我").width(100).width(100).backgroundColor('#f00').onClick(()=>{console.log("Button onClick")}).onTouch((e) => {console.log("Button onTouch")e.stopPropagation()})}.onTouch(() => {console.log("Row onTouch")})
}
綁定菜單后無法使用右鍵觸發菜單(API 9)
解決措施
目前菜單僅支持點擊、長按觸發方式，沒有右鍵方式。
點擊文本輸入框，如何屏蔽系統默認鍵盤彈起行為(API 9)
設置TextInput組件的focusable屬性為false，此組件則不可獲焦，就不會拉起系統默認的鍵盤。
如何實現上下切換的頁面間跳轉動畫(API 9)
問題現象
頁面切換時如何實現上下切換動畫
解決措施
可以使用pageTransition函數來實現頁面轉場效果，通過PageTransitionEnter和PageTransitionExit指定頁面進入和退出的動畫效果，將其slide屬性設置為SlideEffect.Bottom，則頁面入場時從下邊劃入，出場時滑出到下邊，即可實現上下切換效果。
代碼示例
// Index.ets
@Entry
@Component
struct PageTransition1 {build() {Stack({alignContent: Alignment.Bottom}) {Navigator({ target: 'pages/Page1'}) {Image($r('app.media.ic_banner01')).width('100%').height(200) // 圖片存放在media文件夾下}}.height('100%').width('100%')}pageTransition() {PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)}
}
// Page1.ets
@Entry
@Component
struct PageTransition2 {build() {Stack({alignContent: Alignment.Bottom}) {Navigator({ target: 'pages/Index'}) {Image($r('app.media.ic_banner02')).width('100%').height(200) // 圖片存放在media文件夾下}}.height('100%').width('100%')}pageTransition() {PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)}
}
參考鏈接
頁面間轉場
自定義組件間如何實現從底部滑入滑出的效果(API 9)
問題現象
一個頁面底部默認顯示自定義組件A，點擊自定義組件A，則A消失，自定義組件B從底部出現；點擊自定義組件B，則組件B消失，A從底部出現。這個效果要如何實現？
解決措施
可以使用transition產生組件轉場動畫，其參數type用來設置組件變化場景，包括新增和刪除；參數translate用來設置轉場時的平移效果。注意transition需要配合animateTo才能生效，動效時長、曲線、延時跟隨animateTo中的配置。
代碼示例
@Entry
@Component
struct ComponentTransition {@State flag: boolean = true;build() {Stack({alignContent: Alignment.Bottom}) {if (this.flag) {ComponentChild1({ flag: $flag }).transition({ type: TransitionType.Insert,translate: { x: 0, y: 200 } })}if (!this.flag) {ComponentChild2({ flag: $flag }).transition({ type: TransitionType.Insert, translate: { x: 0, y: 200 } })}}.height('100%').width('100%')}
}@Component
struct ComponentChild1 {@Link flag: booleanbuild() {Column() {Image($r('app.media.ic_banner01')).width('100%').height(200).onClick(() => {animateTo({ duration: 1000 }, () => {this.flag = !this.flag;})})}}
}@Component
struct ComponentChild2 {@Link flag: booleanbuild() {Column() {Image($r('app.media.ic_banner02')).width('100%').height(200).onClick(() => {animateTo({ duration: 1000 }, () => {this.flag = !this.flag;})})}}
}
參考鏈接
出現/消失轉場
文件管理器短按不響應(API 10)
問題現象
短按文件夾圖標，如點擊時長在200-500ms松手會觸發文件管理器點擊不響應。
原因分析
拖拽手勢識別邏輯存在異常分支未處理，短按特定時間段松手會導致手勢識別器處于pending狀態，不再響應用戶輸入導致文件管理器出現卡死現象。
解決措施
長按文件圖標或者空白區域即可恢復。
僅供參考！！！
