王士厅

fix: 早晚报详情中,语音播报动效,背景色看不清楚,特别是在白色图片上

... ... @@ -101,38 +101,39 @@ struct Index {
}
build() {
Stack({ alignContent: Alignment.End }) {
Progress(
{
value: this.progressVal,
total: 100,
type: ProgressType.Linear,
})
.style({
enableSmoothEffect: false
})
.color("#ED2800")
.backgroundColor($r('app.color.white'))
.width("100%")
.height(3)
.margin({ top: 57 })
.visibility(this.isExpand ? Visibility.Visible : Visibility.Hidden)
Column(){
Stack({ alignContent: Alignment.End }) {
Column() { //标题 时间 进度条
Marquee({
start: true,
step: 5,
loop: Number.POSITIVE_INFINITY,
fromStart: true,
src: this.audioTitle
Progress(
{
value: this.progressVal,
total: 100,
type: ProgressType.Linear,
})
.style({
enableSmoothEffect: false
})
.width("60%")
.height(20)
.fontColor('#222222')
.fontSize(14)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.alignSelf(ItemAlign.Start)
.color("#ED2800")
.backgroundColor($r('app.color.white'))
.width("100%")
.height(3)
.margin({ top: 56 })
.visibility(this.isExpand ? Visibility.Visible : Visibility.Hidden)
Stack({ alignContent: Alignment.End }) {
Column() { //标题 时间 进度条
Marquee({
start: true,
step: 5,
loop: Number.POSITIVE_INFINITY,
fromStart: true,
src: this.audioTitle
})
.width("60%")
.height(20)
.fontColor('#222222')
.fontSize(14)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.alignSelf(ItemAlign.Start)
// .onStart(() => {
// console.info('Marquee animation complete onStart')
// })
... ... @@ -143,118 +144,127 @@ struct Index {
// console.info('Marquee animation complete onFinish')
// })
Row() {
Text(this.currentTime)
.fontSize(12)
.fontColor("#999999")
.height("100%")
.alignSelf(ItemAlign.Start)
Text("/" + this.totalTime)
.fontSize(12)
.fontColor("#999999")
.height("100%")
.alignSelf(ItemAlign.Start)
Row() {
Text(this.currentTime)
.fontSize(12)
.fontColor("#999999")
.height("100%")
.alignSelf(ItemAlign.Start)
Text("/" + this.totalTime)
.fontSize(12)
.fontColor("#999999")
.height("100%")
.alignSelf(ItemAlign.Start)
}
.width("100%")
.height(16)
.margin({ top: 4})
}
.width("100%")
.height(16)
.margin({ top: 4})
.padding({
top: 10,
bottom: 10,
left: 10,
right: 0
})
.width(247)
.height(60)
.justifyContent(FlexAlign.Start)
// .onClick(() => {
// let dataModelStr : string = SPHelper.default.getSync(SpConstants.APP_NEWS_INFO_DATA_MODEL,'') as string
// console.log(TAG, dataModelStr)
// let dataModel : CompInfoBean = JSON.parse(dataModelStr)
// //公共跳转
// let content: ContentDTO = {
// objectId: this.itemBeanClicked.newsId + '',
// objectType: this.itemBeanClicked.newsType + '',
// relId: this.itemBeanClicked.relId + '',
// relType: this.itemBeanClicked.relType ?? '0'
// } as ContentDTO
// ProcessUtils.processPage(content)
// })
Row() {
Image(this.currentStatus === PlayerConstants.STATUS_START ? $r("app.media.icon_audio_pause_svg") : $r("app.media.icon_audio_playing_svg"))
.objectFit(ImageFit.Contain)
.width(24)
.height(24)
.margin({ right: 12 })
.gesture(
TapGesture()
.onAction((event: GestureEvent) => {
if (this.AudioSuspension.playerController) {
this.AudioSuspension.playerController.get().switchPlayOrPause()
}
}))
Image($r("app.media.icon_audio_close"))
.objectFit(ImageFit.Contain)
.width(24)
.height(24)
.gesture(
TapGesture()
.onAction((event: GestureEvent) => {
if (this.AudioSuspension.playerController) {
this.AudioSuspension.playerController.get().pause()
this.AudioSuspension.minimize()
BackgroundAudioController.sharedController().destorySession()
}
}))
}
.width(80)
.height(60)
}
.padding({
top: 10,
bottom: 10,
left: 10,
right: 0
})
.width(243)
.height(60)
.justifyContent(FlexAlign.Start)
// .onClick(() => {
// let dataModelStr : string = SPHelper.default.getSync(SpConstants.APP_NEWS_INFO_DATA_MODEL,'') as string
// console.log(TAG, dataModelStr)
// let dataModel : CompInfoBean = JSON.parse(dataModelStr)
// //公共跳转
// let content: ContentDTO = {
// objectId: this.itemBeanClicked.newsId + '',
// objectType: this.itemBeanClicked.newsType + '',
// relId: this.itemBeanClicked.relId + '',
// relType: this.itemBeanClicked.relType ?? '0'
// } as ContentDTO
// ProcessUtils.processPage(content)
// })
.visibility(this.isExpand ? Visibility.Visible : Visibility.Hidden)
Row() {
Image(this.currentStatus === PlayerConstants.STATUS_START ? $r("app.media.icon_audio_pause_svg") : $r("app.media.icon_audio_playing_svg"))
.objectFit(ImageFit.Contain)
.width(24)
.height(24)
.margin({ right: 12 })
.gesture(
TapGesture()
.onAction((event: GestureEvent) => {
if (this.AudioSuspension.playerController) {
this.AudioSuspension.playerController.get().switchPlayOrPause()
}
}))
Image($r("app.media.icon_audio_close"))
.objectFit(ImageFit.Contain)
.width(24)
.height(24)
.gesture(
TapGesture()
.onAction((event: GestureEvent) => {
if (this.AudioSuspension.playerController) {
this.AudioSuspension.playerController.get().pause()
this.AudioSuspension.minimize()
BackgroundAudioController.sharedController().destorySession()
}
}))
LottieView({
name: this.name,
path: "lottie/audio_animation_playing.json",
lottieWidth: 24,
lottieHeight: 24,
autoplay: false,
loop: true
})
}
.width(80)
.justifyContent(FlexAlign.Center)
.width(60)
.height(60)
.visibility(!this.isExpand ? Visibility.Visible : Visibility.Hidden)
}
.visibility(this.isExpand ? Visibility.Visible : Visibility.Hidden)
Row() {
LottieView({
name: this.name,
path: "lottie/audio_animation_playing.json",
lottieWidth: 24,
lottieHeight: 24,
autoplay: false,
loop: true
})
}
.justifyContent(FlexAlign.Center)
.width(60)
.height(60)
.visibility(!this.isExpand ? Visibility.Visible : Visibility.Hidden)
}
.parallelGesture(
GestureGroup(GestureMode.Parallel,
TapGesture()
.onAction((event?: GestureEvent) => {
this.isExpand = true
this.AudioSuspension.resizeWindow(this.expandWidth, this.expandHeight)
}),
PanGesture(this.panOption)
//手势识别成功回调。
// .onActionStart((event: GestureEvent) => {
// console.info('Pan start');
// })
.parallelGesture(
GestureGroup(GestureMode.Parallel,
TapGesture()
.onAction((event?: GestureEvent) => {
this.isExpand = true
this.AudioSuspension.resizeWindow(this.expandWidth, this.expandHeight)
}),
PanGesture(this.panOption)
//手势识别成功回调。
// .onActionStart((event: GestureEvent) => {
// console.info('Pan start');
// })
// 手势移动过程中回调。发生拖拽时,获取到触摸点的位置,并将位置信息传递给windowPosition
.onActionUpdate((event: GestureEvent) => {
// this.windowPosition.x += event.offsetX;
let newY = this.windowPosition.y + event.offsetY;
this.windowPosition.y = Math.min(Math.max(newY, this.topSafeHeight), this.bottomSafeHeight);
})
//手势识别成功,手指抬起后触发回调。
.onActionUpdate((event: GestureEvent) => {
// this.windowPosition.x += event.offsetX;
let newY = this.windowPosition.y + event.offsetY;
this.windowPosition.y = Math.min(Math.max(newY, this.topSafeHeight), this.bottomSafeHeight);
})
//手势识别成功,手指抬起后触发回调。
// .onActionEnd(() => {
// console.info('Pan end');
// })
)
)
)
.borderRadius(4)
.backgroundColor(Color.White)
.borderRadius(4)
.shadow({
radius: vp2px(5),
color: 'rgba(0, 0, 0, 0.10)',
offsetX: 0,
offsetY: 1
}) // 设
.backgroundColor(Color.White)
}
.padding(1)
}
}
\ No newline at end of file
... ...