媒體查詢

說(shuō)明：
開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 7 開(kāi)始，該接口不再維護(hù)，推薦使用新接口[@ohos.mediaquery]。
本模塊首批接口從API version 3開(kāi)始支持。后續(xù)版本的新增接口，采用上角標(biāo)單獨(dú)標(biāo)記接口的起始版本。

導(dǎo)入模塊

import mediaquery from '@system.mediaquery';

mediaquery.matchMedia

matchMedia(condition: string): MediaQueryList

根據(jù)媒體查詢條件，創(chuàng)建MediaQueryList對(duì)象。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

參數(shù)名	類型	必填	說(shuō)明
condition	string	是	用于查詢的條件。

返回值：

參數(shù)類型	說(shuō)明
MediaQueryList	表示創(chuàng)建MediaQueryList對(duì)象的屬性，詳情見(jiàn)下表 MediaQueryList說(shuō)明。

示例：

export default {    
  matchMedia() {        
    var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');    
  },
}

MediaQueryEvent

定義MediaQuery事件。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

名稱	參數(shù)類型	必填	說(shuō)明
matches	boolean	是	匹配結(jié)果。

MediaQueryList

定義MediaQuery列表信息。

屬性

系統(tǒng)能力： 以下各項(xiàng)對(duì)應(yīng)的系統(tǒng)能力均為SystemCapability.ArkUI.ArkUI.Full

名稱	參數(shù)類型	必填	說(shuō)明
media	string	否	序列化媒體查詢條件，該參數(shù)為只讀。
matches	boolean	是	匹配結(jié)果。

onchange

onchange?: (matches: boolean) => void

matches狀態(tài)變化時(shí)的執(zhí)行函數(shù)。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

參數(shù)名	類型	必填	說(shuō)明
matches	boolean	是	matches狀態(tài)變化時(shí)值。

MediaQueryList.addListener

addListener(callback: (event: MediaQueryEvent) => void): void

給MediaQueryList添加回調(diào)函數(shù)，回調(diào)函數(shù)應(yīng)在onShow生命周期之前添加，即需要在onInit或onReady生命周期里添加。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

參數(shù)名	類型	必填	說(shuō)明
callback	(event: MediaQueryEvent) => void	是	匹配條件發(fā)生變化的響應(yīng)函數(shù)。

示例：

mMediaQueryList.addListener(maxWidthMatch);

MediaQueryList.removeListener

removeListener(callback: (event: MediaQueryEvent) => void): void

移除MediaQueryList中的回調(diào)函數(shù)。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

QQ截圖20240715201704.png

參數(shù)名`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`	類型	必填	說(shuō)明
callback	(event: MediaQueryEvent) => void)	是	匹配條件發(fā)生變化的響應(yīng)函數(shù)。

示例：

mMediaQueryList.removeListener(maxWidthMatch);

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴