Showing
1 changed file
with
29 additions
and
24 deletions
| 1 | import media from '@ohos.multimedia.media'; | 1 | import media from '@ohos.multimedia.media'; |
| 2 | -import {Song} from '../viewModel/Song' | ||
| 3 | -import {AVPlayer} from '../../components/AVPlayer' | 2 | +import { Song } from '../viewModel/Song' |
| 3 | +import { AVPlayer } from '../../components/AVPlayer' | ||
| 4 | 4 | ||
| 5 | @Entry | 5 | @Entry |
| 6 | @Component | 6 | @Component |
| 7 | struct AudioDetail { | 7 | struct AudioDetail { |
| 8 | - | ||
| 9 | @State message: string = '大自然的奇迹展览在中国国家博物馆拉开帷幕'; | 8 | @State message: string = '大自然的奇迹展览在中国国家博物馆拉开帷幕'; |
| 10 | @State iocClock: string = '定时'; | 9 | @State iocClock: string = '定时'; |
| 11 | @State iconTheOriginal: string = '原文'; | 10 | @State iconTheOriginal: string = '原文'; |
| 12 | @State iconList: string = '列表'; | 11 | @State iconList: string = '列表'; |
| 13 | - @State text:string='' | ||
| 14 | - @State showList:boolean = false | ||
| 15 | - controller:TextInputController = new TextInputController() | ||
| 16 | - | 12 | + @State text: string = '' |
| 13 | + @State showList: boolean = false | ||
| 14 | + controller: TextInputController = new TextInputController() | ||
| 17 | // 音频 | 15 | // 音频 |
| 18 | - @State songs:Song[]=[] | ||
| 19 | - private avPlayer:media.AVPlayer | 16 | + @State songs: Song[] = [] |
| 17 | + | ||
| 18 | + // private avPlayer:media.AVPlayer | ||
| 20 | 19 | ||
| 21 | - async aboutToAppear(){ | 20 | + async aboutToAppear() { |
| 22 | //加载音乐列表 | 21 | //加载音乐列表 |
| 23 | // let response = await axios({ | 22 | // let response = await axios({ |
| 24 | // method:'get', | 23 | // method:'get', |
| @@ -30,6 +29,7 @@ struct AudioDetail { | @@ -30,6 +29,7 @@ struct AudioDetail { | ||
| 30 | // this.setAVPlayerCallback() | 29 | // this.setAVPlayerCallback() |
| 31 | // // this.avPlayer.url = | 30 | // // this.avPlayer.url = |
| 32 | } | 31 | } |
| 32 | + | ||
| 33 | // 注册avplayer回调函数 | 33 | // 注册avplayer回调函数 |
| 34 | // setAVPlayerCallback() { | 34 | // setAVPlayerCallback() { |
| 35 | // // seek操作结果回调函数 | 35 | // // seek操作结果回调函数 |
| @@ -84,8 +84,8 @@ struct AudioDetail { | @@ -84,8 +84,8 @@ struct AudioDetail { | ||
| 84 | // } | 84 | // } |
| 85 | 85 | ||
| 86 | build() { | 86 | build() { |
| 87 | - Column(){ | ||
| 88 | - Row(){ | 87 | + Column() { |
| 88 | + Row() { | ||
| 89 | Column() { | 89 | Column() { |
| 90 | // 封面 | 90 | // 封面 |
| 91 | Row() { | 91 | Row() { |
| @@ -97,6 +97,7 @@ struct AudioDetail { | @@ -97,6 +97,7 @@ struct AudioDetail { | ||
| 97 | .justifyContent(FlexAlign.Center) | 97 | .justifyContent(FlexAlign.Center) |
| 98 | .width('100%') | 98 | .width('100%') |
| 99 | .margin({ top: 64 }) | 99 | .margin({ top: 64 }) |
| 100 | + | ||
| 100 | // 标题 | 101 | // 标题 |
| 101 | Row() { | 102 | Row() { |
| 102 | Text(this.message) | 103 | Text(this.message) |
| @@ -109,6 +110,7 @@ struct AudioDetail { | @@ -109,6 +110,7 @@ struct AudioDetail { | ||
| 109 | } | 110 | } |
| 110 | .padding({ left: 34, right: 34 }) | 111 | .padding({ left: 34, right: 34 }) |
| 111 | .margin({ top: 32 }) | 112 | .margin({ top: 32 }) |
| 113 | + | ||
| 112 | // 操作矩阵 | 114 | // 操作矩阵 |
| 113 | Row() { | 115 | Row() { |
| 114 | // 定时 | 116 | // 定时 |
| @@ -122,6 +124,7 @@ struct AudioDetail { | @@ -122,6 +124,7 @@ struct AudioDetail { | ||
| 122 | .lineHeight(16) | 124 | .lineHeight(16) |
| 123 | .margin(2) | 125 | .margin(2) |
| 124 | } | 126 | } |
| 127 | + | ||
| 125 | // 原文 | 128 | // 原文 |
| 126 | Column() { | 129 | Column() { |
| 127 | Image($r('app.media.theOriginal')) | 130 | Image($r('app.media.theOriginal')) |
| @@ -133,6 +136,7 @@ struct AudioDetail { | @@ -133,6 +136,7 @@ struct AudioDetail { | ||
| 133 | .lineHeight(16) | 136 | .lineHeight(16) |
| 134 | .margin(2) | 137 | .margin(2) |
| 135 | } | 138 | } |
| 139 | + | ||
| 136 | // 列表 | 140 | // 列表 |
| 137 | Column() { | 141 | Column() { |
| 138 | Image($r('app.media.list')) | 142 | Image($r('app.media.list')) |
| @@ -144,27 +148,28 @@ struct AudioDetail { | @@ -144,27 +148,28 @@ struct AudioDetail { | ||
| 144 | .lineHeight(16) | 148 | .lineHeight(16) |
| 145 | .margin(2) | 149 | .margin(2) |
| 146 | } | 150 | } |
| 147 | - .onClick(()=>{ | 151 | + .onClick(() => { |
| 148 | this.showList = !this.showList | 152 | this.showList = !this.showList |
| 149 | - console.log('列表',this.showList) | 153 | + console.log('列表', this.showList) |
| 150 | }) | 154 | }) |
| 151 | } | 155 | } |
| 152 | .width('100%') | 156 | .width('100%') |
| 153 | .padding({ left: 49, right: 49 }) | 157 | .padding({ left: 49, right: 49 }) |
| 154 | .justifyContent(FlexAlign.SpaceBetween) | 158 | .justifyContent(FlexAlign.SpaceBetween) |
| 155 | .margin({ top: 60 }) | 159 | .margin({ top: 60 }) |
| 160 | + | ||
| 156 | AVPlayer() | 161 | AVPlayer() |
| 157 | } | 162 | } |
| 158 | } | 163 | } |
| 159 | .height('100%-56') | 164 | .height('100%-56') |
| 160 | 165 | ||
| 161 | - Row(){ | 166 | + Row() { |
| 162 | Image($r('app.media.leftArrow')) | 167 | Image($r('app.media.leftArrow')) |
| 163 | .width(24) | 168 | .width(24) |
| 164 | .height(24) | 169 | .height(24) |
| 165 | - TextInput({text:this.text,placeholder:'input your word...',controller:this.controller}) | 170 | + TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller }) |
| 166 | .placeholderColor('#999999') | 171 | .placeholderColor('#999999') |
| 167 | - .placeholderFont({size:12,weight:400}) | 172 | + .placeholderFont({ size: 12, weight: 400 }) |
| 168 | .caretColor(Color.White) | 173 | .caretColor(Color.White) |
| 169 | .height(30) | 174 | .height(30) |
| 170 | .width(115) | 175 | .width(115) |
| @@ -173,14 +178,14 @@ struct AudioDetail { | @@ -173,14 +178,14 @@ struct AudioDetail { | ||
| 173 | .backgroundColor('rgba(255,255,255,0.1)') | 178 | .backgroundColor('rgba(255,255,255,0.1)') |
| 174 | .borderRadius(0) | 179 | .borderRadius(0) |
| 175 | .backgroundColor('[UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1.0].CGColor') | 180 | .backgroundColor('[UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1.0].CGColor') |
| 176 | - .onChange((value:string)=>{ | 181 | + .onChange((value: string) => { |
| 177 | this.text = value | 182 | this.text = value |
| 178 | }) | 183 | }) |
| 179 | // 消息 | 184 | // 消息 |
| 180 | Badge({ | 185 | Badge({ |
| 181 | - count:100, | ||
| 182 | - style:{fontSize:12,badgeColor:'#FA2A2D'}, | ||
| 183 | - }){ | 186 | + count: 100, |
| 187 | + style: { fontSize: 12, badgeColor: '#FA2A2D' }, | ||
| 188 | + }) { | ||
| 184 | Image($r('app.media.news')) | 189 | Image($r('app.media.news')) |
| 185 | .width(24) | 190 | .width(24) |
| 186 | .height(24) | 191 | .height(24) |
| @@ -188,9 +193,9 @@ struct AudioDetail { | @@ -188,9 +193,9 @@ struct AudioDetail { | ||
| 188 | 193 | ||
| 189 | // 点赞 | 194 | // 点赞 |
| 190 | Badge({ | 195 | Badge({ |
| 191 | - count:100, | ||
| 192 | - style:{fontSize:12,badgeColor:'#FA2A2D'}, | ||
| 193 | - }){ | 196 | + count: 100, |
| 197 | + style: { fontSize: 12, badgeColor: '#FA2A2D' }, | ||
| 198 | + }) { | ||
| 194 | Image($r('app.media.like')) | 199 | Image($r('app.media.like')) |
| 195 | .width(24) | 200 | .width(24) |
| 196 | .height(24) | 201 | .height(24) |
-
Please register or login to post a comment