developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
王士厅
5deda9f0 1 parent 2d18b715

fix: 图片下载功能展示问题，不符合UI规范

Inline Side-by-side
Showing 3 changed files with 59 additions and 84 deletions
... ... @@ -29,8 +29,9 @@ export struct ImageDownloadComponent {
// .width(24)
// .height(24)
// .margin({bottom:6})
SaveButton({ icon: SaveIconStyle.LINES })
SaveButton({ icon: SaveIconStyle.FULL_FILLED, buttonType: ButtonType.Capsule })
.iconSize(24)
.backgroundColor(Color.Transparent)
.iconColor(Color.White)
.onClick(async () => {
console.info(`cj2024 onClick ${this.imageBuffer}`)
... ...
... ... @@ -11,7 +11,6 @@ const TAG = 'MultiPictureListPage';
@Entry
@Component
export struct MultiPictureListPage {
private scroller: Scroller = new Scroller()
@State swiperIndex: number = 0;
photoList: PhotoListBean[] = [];
private swiperController: SwiperController = new SwiperController()
... ... @@ -96,58 +95,38 @@ export struct MultiPictureListPage {
this.currentUrl = this.photoList[targetIndex]?.picPath
})
Row() {
Scroll(this.scroller) {
Row() {
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.SpaceBetween
}) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(28)
Span(`/${this.photoList.length}`)
.fontSize(14)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(19)
}
.fontColor(Color.White)
.margin(4)
}
}
.width('100%')
.margin({
top: 8,
left: 18,
bottom: 24,
right: 18
})
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.SpaceBetween
}) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(28)
Span(`/${this.photoList.length}`)
.fontSize(14)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(19)
}
.scrollable(ScrollDirection.Vertical)
.scrollBarWidth(0)
.alignSelf(ItemAlign.Center)
.fontColor(Color.White)
ImageDownloadComponent({ url: this.currentUrl })
}
.margin({
top: 14,
left: 20,
bottom: 14,
right: 0
})
.id('e_swiper_titles')
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
}
ImageDownloadComponent({ url: this.currentUrl })
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
right: { anchor: "__container__", align: HorizontalAlign.End }
})
.margin({
top: 8,
left: 18,
bottom: 24,
right: 18
})
.id("downloadImg")
}
.width('100%')
.height('100%')
... ...
... ... @@ -457,47 +457,42 @@ export struct MultiPictureDetailPageComponent {
@Builder
YShowDownload() {
Column() {
Row() {
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.SpaceBetween
}) {
if (this.contentDetailData?.photoList?.length) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(28)
Span(`/${this.contentDetailData?.photoList?.length}`)
.fontSize(14)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(19)
}
.fontColor(Color.White)
.margin(4)
}
if (this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
.margin({
top: 8,
left: 18,
bottom: 24,
right: 18
})
.parallelGesture(
TapGesture()
.onAction((event: GestureEvent) => {
TrackingContent.download(1,TrackConstants.PageName.Atlas_Detail,TrackConstants.PageName.Atlas_Detail,this.pageParam)
}))
}
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.SpaceBetween
}) {
if (this.contentDetailData?.photoList?.length) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(28)
Span(`/${this.contentDetailData?.photoList?.length}`)
.fontSize(14)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(19)
}
.alignSelf(ItemAlign.Center)
.fontColor(Color.White)
}
if (this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
.parallelGesture(
TapGesture()
.onAction((event: GestureEvent) => {
TrackingContent.download(1,TrackConstants.PageName.Atlas_Detail,TrackConstants.PageName.Atlas_Detail,this.pageParam)
}))
}
.width('100%')
}
.margin({
top: 14,
left: 20,
bottom: 14,
right: 0
})
.transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` })
))
... ...