【关键字】
深色模式 / @ohos.mediaquery(媒体查询)模块/ MediaQueryListener
【问题描述】
如何适配深色模式?
【解决方案】
使用mediaquery.MediaQueryListener进行监听,参考示例如下:
import mediaQuery from '@ohos.mediaquery'
@Entry
@Component
struct ElseIfTest {
@State color: string = "ffffff";
@State text: string = "dark-mode: false 原始数据"
//系统为深色模式时为true,否则为false。
listener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync('(dark-mode: true)');
aboutToAppear() {
// 绑定当前应用实例
// 绑定回调函数
this.listener.on('change', (mediaQueryResult: mediaQuery.MediaQueryResult) => {
this.onDarkMode(mediaQueryResult)
});
}
// 当满足媒体查询条件时,触发回调
onDarkMode(mediaQueryResult: mediaQuery.MediaQueryResult) {
if (mediaQueryResult.matches as boolean) { // /系统为深色模式时为true,否则为false。
this.color = '#00ff00';
this.text = 'dark-mode: true 监听数据';
} else {
this.color = '#ff0000';
this.text = 'dark-mode: false 监听数据';
}
}
build() {
Column() {
Text(this.text)
}
.backgroundColor(this.color)
.width('100%')
}
}
@ohos.mediaquery(媒体查询)模块接口文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-mediaquery-0000001774121130#ZH-CN_TOPIC_0000001774121130__mediaquerylistener