導入模塊
import mediaquery from '@ohos.mediaquery'
mediaquery.matchMediaSync
matchMediaSync(condition: string): MediaQueryListener
設置媒體查詢的查詢條件,并返回對應的監(jiān)聽句柄。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
參數(shù)名 | 類型 | 必填 | 說明 |
---|---|---|---|
condition | string | 是 | 媒體事件的匹配條件,具體可參考語法規(guī)則。 |
返回值:
類型 | 說明 |
---|---|
MediaQueryListener | 媒體事件監(jiān)聽句柄,用于注冊和去注冊監(jiān)聽回調。 |
示例:
let listener = mediaquery.matchMediaSync(‘(orientation: landscape)’); //監(jiān)聽橫屏事件
MediaQueryListener
媒體查詢的句柄,并包含了申請句柄時的首次查詢結果。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
屬性
名稱 | 類型 | 可讀 | 可寫 | 說明 |
---|---|---|---|---|
matches | boolean | 是 | 否 | 是否符合匹配條件。 |
media | string | 是 | 否 | 媒體事件的匹配條件。 |
on
on(type: ‘change’, callback: Callback): void
通過句柄向對應的查詢條件注冊回調,當媒體屬性發(fā)生變更時會觸發(fā)該回調。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
參數(shù):
參數(shù)名 | 類型 | 必填 | 說明 |
---|---|---|---|
type | string | 是 | 必須填寫字符串’change’。 |
callback | Callback | 是 | 向媒體查詢注冊的回調 |
示例:
詳見off示例。
off
off(type: ‘change’, callback?: Callback): void
通過句柄向對應的查詢條件取消注冊回調,當媒體屬性發(fā)生變更時不在觸發(fā)指定的回調。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
參數(shù)名 | 類型 | 必填 | 說明 |
---|---|---|---|
type | string | 是 | 必須填寫字符串’change’。 |
callback | Callback | 否 | 需要去注冊的回調,如果參數(shù)缺省則去注冊該句柄下所有的回調。 |
示例:
import mediaquery from '@ohos.mediaquery' let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //監(jiān)聽橫屏事件 function onPortrait(mediaQueryResult) { if (mediaQueryResult.matches) { // do something here } else { // do something here } } listener.on('change', onPortrait) // 注冊回調 listener.off('change', onPortrait) // 取消注冊回調
MediaQueryResult
用于執(zhí)行媒體查詢操作。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
屬性
名稱 | 類型 | 可讀 | 可寫 | 說明 |
---|---|---|---|---|
matches | boolean | 是 | 否 | 是否符合匹配條件。 |
media | string | 是 | 否 | 媒體事件的匹配條件。 |
示例
import mediaquery from '@ohos.mediaquery' @Entry @Component struct MediaQueryExample { @State color: string = '#DB7093' @State text: string = 'Portrait' listener = mediaquery.matchMediaSync('(orientation: landscape)') onPortrait(mediaQueryResult) { if (mediaQueryResult.matches) { this.color = '#FFD700' this.text = 'Landscape' } else { this.color = '#DB7093' this.text = 'Portrait' } } aboutToAppear() { let portraitFunc = this.onPortrait.bind(this) // bind current js instance this.listener.on('change', portraitFunc) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text(this.text).fontSize(24).fontColor(this.color) } .width('100%').height('100%') } } 審核編輯 黃宇
HT
-
ui
+關注
關注
0文章
202瀏覽量
21290 -
鴻蒙
+關注
關注
56文章
2267瀏覽量
42489
發(fā)布評論請先 登錄
相關推薦
評論