[Daily HarmonyOS Next Knowledge] Dark Mode, App Management Window Callback, Manual Refresh Trigger, Image Caching, Sandbox Access
1. Can the App style be set to dark mode in HarmonyOS?
Can the App style be set to dark mode?
For setting dark mode, refer to: https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation
Dark Mode (also known as暗色模式) is a UI theme that contrasts with the light mode commonly used in daily applications. Originating from human-computer interaction research and practice, dark mode is not merely changing the background to black and text to white but provides a comprehensive color theme adapted to dark environments. Compared to light mode, dark mode is gentler, reducing eye strain and fatigue from brightness. Additionally, it can lower application power consumption and improve battery life.
To adapt to dark mode, applications should follow basic UX design principles to ensure readability, comfort, and consistency of page content, as detailed in the dark mode design principles. The adaptation process mainly includes:
- Adapting color resources (font colors, element background colors).
- Adapting media resources (images, icons).
- Adapting the system status bar.
- Handling special cases (e.g., Web pages loaded by Web components).
Implementation Principle:
When the system switches to dark mode, some in-app elements (e.g., status bar, pop-up backgrounds, system controls) may automatically switch to dark themes, potentially causing layout inconsistencies. To address this, content adaptation for dark mode relies primarily on resource directories. When system settings change (e.g., language, light/dark mode), the app automatically loads resources from the corresponding directory.
The system reserves a dark directory for dark mode (not created by default). Developers must manually create src/main/resources/dark and place dark-mode resources there, while light-mode resources go into the default src/main/resources/base directory.
Typically, light/dark mode switching maintains page structure but changes theme colors and images to ensure aesthetic consistency. Below is a UX example of dark mode adaptation:
Key adaptation items for dark mode include:
- Color resource adaptation
- Media resource adaptation
- Status bar adaptation
- Web page adaptation (if using Web components)
Common methods for enabling light/dark mode switching:
-
Follow system mode: Use
setColorMode(COLOR_MODE_NOT_SET)to allow the app to automatically detect system mode changes and switch accordingly. -
Manual in-app control: Call
setColorMode(COLOR_MODE_DARK)for dark mode orCOLOR_MODE_LIGHTfor light mode.
2. Does HarmonyOS provide an event callback when an App is swiped to the app management window?
When playing a video and swiping the App to the app management window, the video continues playing. Is there an event to listen for this swipe?
Refer to window event listening: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#offwindowevent10
Demo:
curWindow: window.Window | undefined = undefined;
context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
async aboutToAppear(): Promise<void> {
if (this.context) {
window.getLastWindow(getContext(this), (err, data) => {
this.curWindow = data
if (this.curWindow) {
this.curWindow.on('windowEvent', (data) => {
console.info('Window event happened. Event:' + JSON.stringify(data));
if (data.toString() == '6') {
this.videoPlayerModel.controller.pause();
}
3. Can HarmonyOS Refresh trigger pull-to-refresh via a method call?
Refresh can be triggered by controlling the refreshing parameter, which indicates whether the component is refreshing.
Refer to the documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-refresh-V5#ZH-CN_TOPIC_0000001930756929__refreshoptions%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E
Demo:
// xxx.ets
@Entry
@Component
struct RefreshExample {
@State isRefreshing: boolean = false
@State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
build() {
Column() {
Button('Refresh').onClick(()=>{
this.isRefreshing = true
})
Refresh({ refreshing: $$this.isRefreshing}) {
List() {
ForEach(this.arr, (item: string) => {
ListItem() {
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}
}, (item: string) => item)
}
.onScrollIndex((first: number) => {
console.info(first.toString())
})
.width('100%')
.height('100%')
.divider({strokeWidth:1,color:Color.Yellow,startMargin:10,endMargin:10})
.scrollBar(BarState.Off)
}
.onStateChange((refreshStatus: RefreshStatus) => {
console.info('Refresh onStatueChange state is ' + refreshStatus)
})
.onOffsetChange((value: number) => {
console.info('Refresh onOffsetChange offset:' + value)
})
.onRefreshing(() => {
setTimeout(() => {
this.isRefreshing = false
}, 2000)
console.log('onRefreshing test')
})
.backgroundColor(0x89CFF0)
.refreshOffset(64)
.pullToRefresh(true)
}
}
}
4. Does the HarmonyOS Image component support cache loading?
Does the official Image component support loading cached images when there is no network? For example, can an image be loaded from cache if a URL is set but no network is available?
The Image component supports caching via setImageRawDataCacheSize and setImageCacheCount, using a built-in LRU strategy. When caching is enabled:
- The first load reads the network image.
- Subsequent loads read from the cache.
5. How to access sandbox paths in HarmonyOS ArkTS?
Local paths of sent image messages may be sandbox paths, but the Image control cannot display them directly.
Solution:
The Image component requires a sandbox URI instead of a path. Convert the sandbox path to a URI using @ohos.file.fileuri.getUriFromPath(file.path):
this.ImageUri = fileUri.getUriFromPath(ImagePath);
Refer to the API documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-file-fileuri-V5#ZH-CN_TOPIC_0000001884918402__fileurigeturifrompath
Top comments (0)