當(dāng)前位置：首頁 > news >正文

網(wǎng)站中間內(nèi)容做多大尺寸的那個(gè)推廣平臺(tái)好用

news 2025/7/4 7:06:55

網(wǎng)站中間內(nèi)容做多大尺寸的,那個(gè)推廣平臺(tái)好用,休閑小零食網(wǎng)站開發(fā)方案,泰安建設(shè)工程招聘信息網(wǎng)站本章是 OpenHarmony 標(biāo)準(zhǔn)設(shè)備應(yīng)用開發(fā)的第二篇文章。我們通過知識(shí)體系新開發(fā)的幾個(gè)基于 OpenHarmony3.1 Beta 標(biāo)準(zhǔn)系統(tǒng)的樣例：分布式音樂播放、傳炸彈、購物車等樣例，分別介紹下音樂播放、顯示動(dòng)畫、動(dòng)畫轉(zhuǎn)場（頁面間轉(zhuǎn)場）三個(gè)進(jìn)階…

本章是 OpenHarmony 標(biāo)準(zhǔn)設(shè)備應(yīng)用開發(fā)的第二篇文章。我們通過知識(shí)體系新開發(fā)的幾個(gè)基于 OpenHarmony3.1 Beta 標(biāo)準(zhǔn)系統(tǒng)的樣例：分布式音樂播放、傳炸彈、購物車等樣例，分別介紹下音樂播放、顯示動(dòng)畫、動(dòng)畫轉(zhuǎn)場（頁面間轉(zhuǎn)場）三個(gè)進(jìn)階技能。首先我們來講如何在 OpenHarmony 中實(shí)現(xiàn)音樂的播放。

一、分布式音樂播放

通過分布式音樂播放器，大家可以學(xué)到一些 ArkUI 組件和布局在 OpenHarmony 中是如何使用的，以及如何在自己的應(yīng)用中實(shí)現(xiàn)音樂的播放，暫停等相關(guān)功能。應(yīng)用效果如下圖所示：

1.1 界面布局

整體布局效果如下圖所示：

首先是頁面整體布局，部分控件是以模塊的方式放在整體布局中的，如 operationPannel()、sliderPannel()、playPannel() 模塊。頁面整體布是由 Flex 控件中，包含 Image、Text 以及剛才所說的三個(gè)模塊所構(gòu)成。

build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.End }) {Image($r("app.media.icon_liuzhuan")).width(32).height(32)}.padding({ right: 32 }).onClick(() => {this.onDistributeDevice()})Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) {Image($r("app.media.Bg_classic")).width(312).height(312)}.margin({ top: 24 })Text(this.currentMusic.name).fontSize(20).fontColor("#e6000000").margin({ top: 10 })Text("未知音樂家").fontSize(14).fontColor("#99000000").margin({ top: 10 })}.flexGrow(1)Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) {this.operationPannel()this.sliderPannel()this.playPannel()}.height(200)}.linearGradient({angle: 0,direction: GradientDirection.Bottom,colors: this.currentMusic.backgourdColor}).padding({ top: 48, bottom: 24, left: 24, right: 24 }).width('100%').height('100%')}

operationPannel() 模塊的布局，該部分代碼對(duì)應(yīng)圖片中的心形圖標(biāo)，下載圖標(biāo)，評(píng)論圖標(biāo)更多圖標(biāo)這一部分布局。其主要是在 Flex 中包含 Image 所構(gòu)成代碼如下：

@Builder operationPannel() {Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {Image($r("app.media.icon_music_like")).width(24).height(24)Image($r("app.media.icon_music_download")).width(24).height(24)Image($r("app.media.icon_music_comment")).width(24).height(24)Image($r("app.media.icon_music_more")).width(24).height(24)}.width('100%').height(49).padding({ bottom: 25 })}

sliderPannel() 模塊代碼布局。該部分對(duì)應(yīng)圖片中的顯示播放時(shí)間那一欄的控件。整體構(gòu)成是在 Flex 中，包含 Text、Slider、Text 三個(gè)控件。具體代碼如下：

@Builder sliderPannel() {Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text(this.currentTimeText).fontSize(12).fontColor("ff000000").width(40)Slider({value: this.currentProgress,min: 0,max: 100,step: 1,style: SliderStyle.INSET}).blockColor(Color.White).trackColor(Color.Gray).selectedColor(Color.Blue).showSteps(true).flexGrow(1).margin({ left: 5, right: 5 }).onChange((value: number, mode: SliderChangeMode) => {if (mode == 2) {CommonLog.info('aaaaaaaaaaaaaa1: ' + this.currentProgress)this.onChangeMusicProgress(value, mode)}})Text(this.totalTimeText).fontSize(12).fontColor("ff000000").width(40)}.width('100%').height(18)}

playPannel() 模塊代碼對(duì)應(yīng)圖片中的最底部播放那一欄五個(gè)圖標(biāo)所包含的一欄。整體布局是 Flex 方向?yàn)闄M向，其中包含五個(gè) Image 所構(gòu)成。具體代碼如下：

@Builder playPannel() {Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {Image($r("app.media.icon_music_changemode")).width(24).height(24).onClick(() => {this.onChangePlayMode()})Image($r("app.media.icon_music_left")).width(32).height(32).onClick(() => {this.onPreviousMusic()})Image(this.isPlaying ? $r("app.media.icon_music_play") : $r("app.media.icon_music_stop")).width(80).height(82).onClick(() => {this.onPlayOrPauseMusic()})Image($r("app.media.icon_music_right")).width(32).height(32).onClick(() => {this.onNextMusic()})Image($r("app.media.icon_music_list")).width(24).height(24).onClick(() => {this.onShowMusicList()})}.width('100%').height(82)}

希望通過上面這些布局的演示，可以讓大家學(xué)到一些部分控件在 OpenHarmony 中的運(yùn)用，這里使用的 Arkui 布局和 HarmonyOS* 是一致的，目前 HarmonyOS* 手機(jī)還沒有發(fā)布 Arkui 的版本，大家可以在 OpenHarmony 上搶先體驗(yàn)。常用的布局和控件還有很多，大家可以在下面的鏈接中找到更多的詳細(xì)信息。

*編者注：HarmonyOS 是基于開放原子開源基金會(huì)旗下開源項(xiàng)目 OpenHarmony 開發(fā)的面向多種全場景智能設(shè)備的商用版本。是結(jié)合其自有特性和能力開發(fā)的新一代智能終端操作系統(tǒng)。

1.2 播放音樂

play(seekTo) {if (this.player.state == 'playing' && this.player.src == this.getCurrentMusic().url) {return}if (this.player.state == 'idle' || this.player.src != this.getCurrentMusic().url) {CommonLog.info('Preload music url = ' + this.getCurrentMusic().url)this.player.reset()this.player.src = this.getCurrentMusic().urlthis.player.on('dataLoad', () => {CommonLog.info('dataLoad duration=' + this.player.duration)this.totalTimeMs = this.player.durationif (seekTo > this.player.duration) {seekTo = -1}this.player.on('play', (err, action) => {if (err) {CommonLog.info(`MusicPlayer[PlayerModel] error returned in play() callback`)return}if (seekTo > 0) {this.player.seek(seekTo)}})this.player.play()this.statusChangeListener()this.setProgressTimer()this.isPlaying = true})}else {if (seekTo > this.player.duration) {seekTo = -1}this.player.on('play', (err, action) => {if (err) {CommonLog.info(`MusicPlayer[PlayerModel] error returned in play() callback`)return}if (seekTo > 0) {this.player.seek(seekTo)}})this.player.play()this.setProgressTimer()this.isPlaying = true}}

1.3 音樂暫停

pause() {CommonLog.info("pause music")this.player.pause();this.cancelProgressTimer()this.isPlaying = false}

接下來我們講解如何在 OpenHarmony 中實(shí)現(xiàn)顯示動(dòng)畫的效果。

二、顯示動(dòng)畫

我們以傳炸彈小游戲中的顯示動(dòng)畫效果為例，效果如下圖所示。

通過本小節(jié)，大家在上一小節(jié)的基礎(chǔ)上，學(xué)到更多 ArkUI 組件和布局在 OpenHarmony 中的應(yīng)用，以及如何在自己的應(yīng)用中實(shí)現(xiàn)顯示動(dòng)畫的效果。

實(shí)現(xiàn)步驟：

**2.1 編寫彈窗布局：**將游戲失敗文本、炸彈圖片和再來一局按鈕圖片放置于 Column 容器中；

**2.2 用變量來控制動(dòng)畫起始和結(jié)束的位置：**用 Flex 容器包裹炸彈圖片，并用 @State 裝飾變量 toggle，通過變量來動(dòng)態(tài)修改 Flex 的 direction 屬性；布局代碼如下：

@State toggle: boolean = true
private controller: CustomDialogController
@Consume deviceList: RemoteDevice[]
private confirm: () => void
private interval = nullbuild() {Column() {Text('游戲失敗').fontSize(30).margin(20)Flex({direction: this.toggle ? FlexDirection.Column : FlexDirection.ColumnReverse,alignItems: ItemAlign.Center}){Image($r("app.media.bomb")).objectFit(ImageFit.Contain).height(80)}.height(200)Image($r("app.media.btn_restart")).objectFit(ImageFit.Contain).height(120).margin(10).onClick(() => {this.controller.close()this.confirm()})}.width('80%').margin(50).backgroundColor(Color.White)
}

**2.3 設(shè)置動(dòng)畫效果：**使用 animateTo 顯式動(dòng)畫接口炸彈位置切換時(shí)添加動(dòng)畫，并且設(shè)置定時(shí)器定時(shí)執(zhí)行動(dòng)畫，動(dòng)畫代碼如下：

aboutToAppear() {this.setBombAnimate()
}setBombAnimate() {let fun = () => {this.toggle = !this.toggle;}this.interval = setInterval(() => {animateTo({ duration: 1500, curve: Curve.Sharp }, fun)}, 1600)
}

三、轉(zhuǎn)場動(dòng)畫（頁面間轉(zhuǎn)場）

我們同樣希望在本小節(jié)中，可以讓大家看到更多的 ArkUI 中的組件和布局在 OpenHarmony 中的使用，如何模塊化的使用布局，讓自己的代碼更簡潔易讀，以及在應(yīng)用中實(shí)現(xiàn)頁面間的轉(zhuǎn)場動(dòng)畫效果。

下圖是分布式購物車項(xiàng)目中的轉(zhuǎn)場動(dòng)畫效果圖：

頁面布局效果圖：

整體布局由 Column、Scroll、Flex、Image 以及 GoodsHome()、MyInfo()、HomeBottom() 構(gòu)成，該三個(gè)模塊我們會(huì)分別說明。具體代碼如下：

build() {Column() {Scroll() {Column() {if (this.currentPage == 1) {Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.End }) {Image($r("app.media.icon_share")).objectFit(ImageFit.Cover).height('60lpx').width('60lpx')}.width("100%").margin({ top: '20lpx', right: '50lpx' }).onClick(() => {this.playerDialog.open()})GoodsHome({ goodsItems: this.goodsItems})}else if (this.currentPage == 3) {//我的MyInfo()}}.height('85%')}.flexGrow(1)HomeBottom({ remoteData: this.remoteData})}.backgroundColor("white")}

GoodsHome() 模塊對(duì)應(yīng)效果圖中間顯示商品的部分，其主要結(jié)構(gòu)為 TabContent 中包含的兩個(gè) List 條目所構(gòu)成。具體代碼如下：

build() {Column() {Scroll() {Column() {if (this.currentPage == 1) {Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.End }) {Image($r("app.media.icon_share")).objectFit(ImageFit.Cover).height('60lpx').width('60lpx')}.width("100%").margin({ top: '20lpx', right: '50lpx' }).onClick(() => {this.playerDialog.open()})GoodsHome({ goodsItems: this.goodsItems})}else if (this.currentPage == 3) {//我的MyInfo()}}.height('85%')}.flexGrow(1)HomeBottom({ remoteData: this.remoteData})}.backgroundColor("white")}

上面代碼中的 GoodsList() 為每個(gè) list 條目對(duì)應(yīng)顯示的信息，會(huì)便利集合中的數(shù)據(jù)，然后顯示在對(duì)用的 item 布局中，具體代碼如下：

@Component
struct GoodsList {private goodsItems: GoodsData[]@Consume ShoppingCartsGoods :any[]build() {Column() {List() {ForEach(this.goodsItems, item => {ListItem() {GoodsListItem({ goodsItem: item})}}, item => item.id.toString())}.width('100%').align(Alignment.Top).margin({ top: '10lpx' })}}
}

最后就是 list 的 item 布局代碼。具體代碼如下：

@Component
struct GoodsListItem {private goodsItem: GoodsData@State scale: number = 1@State opacity: number = 1@State active: boolean = false@Consume ShoppingCartsGoods :any[]build() {Column() {Navigator({ target: 'pages/DetailPage' }) {Row({ space: '40lpx' }) {Column() {Text(this.goodsItem.title).fontSize('28lpx')Text(this.goodsItem.content).fontSize('20lpx')Text('￥' + this.goodsItem.price).fontSize('28lpx').fontColor(Color.Red)}.height('160lpx').width('50%').margin({ left: '20lpx' }).alignItems(HorizontalAlign.Start)Image(this.goodsItem.imgSrc).objectFit(ImageFit.ScaleDown).height('160lpx').width('40%').renderMode(ImageRenderMode.Original).margin({ right: '20lpx', left: '20lpx' })}.height('180lpx').alignItems(VerticalAlign.Center).backgroundColor(Color.White)}.params({ goodsItem: this.goodsItem ,ShoppingCartsGoods:this.ShoppingCartsGoods}).margin({ left: '40lpx' })}}

**備注：**MyInfo() 模塊對(duì)應(yīng)的事其它也免得布局，這里就不做說明。

最后我們來說一下，頁面間的頁面間的轉(zhuǎn)場動(dòng)畫，其主要是通過在全局 pageTransition 方法內(nèi)配置頁面入場組件和頁面退場組件來自定義頁面轉(zhuǎn)場動(dòng)效。具體代碼如下：

// 轉(zhuǎn)場動(dòng)畫使用系統(tǒng)提供的多種默認(rèn)效果(平移、縮放、透明度等)pageTransition() {PageTransitionEnter({ duration: 1000 }).slide(SlideEffect.Left)PageTransitionExit({ duration: 1000  }).slide(SlideEffect.Right)}
}

為了幫助到大家能夠更有效的學(xué)習(xí)OpenHarmony 開發(fā)的內(nèi)容，下面特別準(zhǔn)備了一些相關(guān)的參考學(xué)習(xí)資料：