#2023盲盒+码# OpenHarmony3.2修改启动器源码实现动态壁纸初步方案原创

westinyang

发布于 2023-9-3 14:33

浏览

0收藏

【本文正在参加 2023「盲盒」+码有奖征文活动】 https://ost.51cto.com/posts/25284

@toc

序言

本文提到的内容适用于 OpenHarmony 3.2，通过修改系统启动器源码实现动态壁纸的初步方案。其实在 OpenHarmony 4.0 Beta2 中，官方接口也提供了新的修改壁纸的接口，包括动态壁纸设置。

源码修改

系统桌面仓库：https://gitee.com/openharmony/applications_launcher/tree/OpenHarmony-3.2-Release/

在 product/phone/src/main/ets/pages 下新增一个 DynamicWallpaper.ets（除了放置Video组件外，我也尝试过Web组件用于加载网页作为壁纸，但是实际测试中Web组件无法正常加载，原因未知）

import webview from '@ohos.web.webview'

@Component
export default struct DynamicWallpaper {
  webviewController: webview.WebviewController = new webview.WebviewController()
  videoController: VideoController = new VideoController()

  onPageShow() {
    this.videoController.start()
  }

  onPageHide() {
    // this.videoController.pause()
  }

  build() {
    Column() {
      /*Web({ src: $rawfile("index.html"), controller: this.webviewController })
        .zoomAccess(false)
        .mediaPlayGestureAccess(false)
        .horizontalScrollBarAccess(false)
        .verticalScrollBarAccess(false)
        .fileAccess(true)
        .domStorageAccess(true)
        .databaseAccess(true)
        .javaScriptAccess(true)
        .width('100%')
        .height('100%')*/

      Video({
        src: $rawfile('video1.mp4'),
        currentProgressRate: PlaybackSpeed.Speed_Forward_1_00_X,
        controller: this.videoController
      })
        .width('100%')
        .height('100%')
        .loop(true)
        .autoPlay(true)
        .controls(false)
    }
    .width('100%')
    .height('100%')
  }
}

在 product/phone/src/main/resources/rawfile 下面新增 video1.mp4
修改：product/phone/src/main/ets/pages/EntryView.ets，在 Stack() 布局中加入 DynamicWallpaper() （Stack层叠布局中，元素可以重叠的布局，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置）

import DynamicWallpaper from './DynamicWallpaper';

......

build() {
  Stack() {
    DynamicWallpaper()

    ......
  }
  .backgroundImage(StyleConstants.DEFAULT_BACKGROUND_IMAGE)
  .backgroundImageSize(ImageSize.Cover)
  .backgroundImagePosition(Alignment.Center)
  .width('100%')
  .height('100%')
}