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 { @@ -29,8 +29,9 @@ export struct ImageDownloadComponent {
29 // .width(24) 29 // .width(24)
30 // .height(24) 30 // .height(24)
31 // .margin({bottom:6}) 31 // .margin({bottom:6})
32 - SaveButton({ icon: SaveIconStyle.LINES }) 32 + SaveButton({ icon: SaveIconStyle.FULL_FILLED, buttonType: ButtonType.Capsule })
33 .iconSize(24) 33 .iconSize(24)
  34 + .backgroundColor(Color.Transparent)
34 .iconColor(Color.White) 35 .iconColor(Color.White)
35 .onClick(async () => { 36 .onClick(async () => {
36 console.info(`cj2024 onClick ${this.imageBuffer}`) 37 console.info(`cj2024 onClick ${this.imageBuffer}`)
@@ -11,7 +11,6 @@ const TAG = 'MultiPictureListPage'; @@ -11,7 +11,6 @@ const TAG = 'MultiPictureListPage';
11 @Entry 11 @Entry
12 @Component 12 @Component
13 export struct MultiPictureListPage { 13 export struct MultiPictureListPage {
14 - private scroller: Scroller = new Scroller()  
15 @State swiperIndex: number = 0; 14 @State swiperIndex: number = 0;
16 photoList: PhotoListBean[] = []; 15 photoList: PhotoListBean[] = [];
17 private swiperController: SwiperController = new SwiperController() 16 private swiperController: SwiperController = new SwiperController()
@@ -96,58 +95,38 @@ export struct MultiPictureListPage { @@ -96,58 +95,38 @@ export struct MultiPictureListPage {
96 this.currentUrl = this.photoList[targetIndex]?.picPath 95 this.currentUrl = this.photoList[targetIndex]?.picPath
97 }) 96 })
98 97
99 - Row() {  
100 - Scroll(this.scroller) {  
101 - Row() {  
102 - Flex({  
103 - direction: FlexDirection.Row,  
104 - justifyContent: FlexAlign.SpaceBetween  
105 - }) {  
106 - Text() {  
107 - Span(`${this.swiperIndex + 1}`)  
108 - .fontSize(24)  
109 - .fontFamily('PingFang SC-Medium')  
110 - .fontWeight(500)  
111 - .lineHeight(28)  
112 - Span(`/${this.photoList.length}`)  
113 - .fontSize(14)  
114 - .fontFamily('PingFang SC-Medium')  
115 - .fontWeight(500)  
116 - .lineHeight(19)  
117 - }  
118 - .fontColor(Color.White)  
119 - .margin(4)  
120 - }  
121 - }  
122 - .width('100%')  
123 - .margin({  
124 - top: 8,  
125 - left: 18,  
126 - bottom: 24,  
127 - right: 18  
128 - }) 98 + Flex({
  99 + direction: FlexDirection.Row,
  100 + justifyContent: FlexAlign.SpaceBetween
  101 + }) {
  102 + Text() {
  103 + Span(`${this.swiperIndex + 1}`)
  104 + .fontSize(24)
  105 + .fontFamily('PingFang SC-Medium')
  106 + .fontWeight(500)
  107 + .lineHeight(28)
  108 + Span(`/${this.photoList.length}`)
  109 + .fontSize(14)
  110 + .fontFamily('PingFang SC-Medium')
  111 + .fontWeight(500)
  112 + .lineHeight(19)
129 } 113 }
130 - .scrollable(ScrollDirection.Vertical)  
131 - .scrollBarWidth(0) 114 + .alignSelf(ItemAlign.Center)
  115 + .fontColor(Color.White)
  116 + ImageDownloadComponent({ url: this.currentUrl })
132 } 117 }
  118 + .margin({
  119 + top: 14,
  120 + left: 20,
  121 + bottom: 14,
  122 + right: 0
  123 + })
133 .id('e_swiper_titles') 124 .id('e_swiper_titles')
134 .alignRules({ 125 .alignRules({
135 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, 126 bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
136 middle: { anchor: "__container__", align: HorizontalAlign.Center } 127 middle: { anchor: "__container__", align: HorizontalAlign.Center }
137 }) 128 })
138 } 129 }
139 - ImageDownloadComponent({ url: this.currentUrl })  
140 - .alignRules({  
141 - bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
142 - right: { anchor: "__container__", align: HorizontalAlign.End }  
143 - })  
144 - .margin({  
145 - top: 8,  
146 - left: 18,  
147 - bottom: 24,  
148 - right: 18  
149 - })  
150 - .id("downloadImg")  
151 } 130 }
152 .width('100%') 131 .width('100%')
153 .height('100%') 132 .height('100%')
@@ -457,47 +457,42 @@ export struct MultiPictureDetailPageComponent { @@ -457,47 +457,42 @@ export struct MultiPictureDetailPageComponent {
457 457
458 @Builder 458 @Builder
459 YShowDownload() { 459 YShowDownload() {
460 - Column() {  
461 - Row() {  
462 - Flex({  
463 - direction: FlexDirection.Row,  
464 - justifyContent: FlexAlign.SpaceBetween  
465 - }) {  
466 - if (this.contentDetailData?.photoList?.length) {  
467 - Text() {  
468 - Span(`${this.swiperIndex + 1}`)  
469 - .fontSize(24)  
470 - .fontFamily('PingFang SC-Medium')  
471 - .fontWeight(500)  
472 - .lineHeight(28)  
473 - Span(`/${this.contentDetailData?.photoList?.length}`)  
474 - .fontSize(14)  
475 - .fontFamily('PingFang SC-Medium')  
476 - .fontWeight(500)  
477 - .lineHeight(19)  
478 - }  
479 - .fontColor(Color.White)  
480 - .margin(4)  
481 - }  
482 -  
483 - if (this.contentDetailData.photoList?.[this.swiperIndex].picPath) {  
484 - ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })  
485 - .margin({  
486 - top: 8,  
487 - left: 18,  
488 - bottom: 24,  
489 - right: 18  
490 - })  
491 - .parallelGesture(  
492 - TapGesture()  
493 - .onAction((event: GestureEvent) => {  
494 - TrackingContent.download(1,TrackConstants.PageName.Atlas_Detail,TrackConstants.PageName.Atlas_Detail,this.pageParam)  
495 - }))  
496 - } 460 + Flex({
  461 + direction: FlexDirection.Row,
  462 + justifyContent: FlexAlign.SpaceBetween
  463 + }) {
  464 + if (this.contentDetailData?.photoList?.length) {
  465 + Text() {
  466 + Span(`${this.swiperIndex + 1}`)
  467 + .fontSize(24)
  468 + .fontFamily('PingFang SC-Medium')
  469 + .fontWeight(500)
  470 + .lineHeight(28)
  471 + Span(`/${this.contentDetailData?.photoList?.length}`)
  472 + .fontSize(14)
  473 + .fontFamily('PingFang SC-Medium')
  474 + .fontWeight(500)
  475 + .lineHeight(19)
497 } 476 }
  477 + .alignSelf(ItemAlign.Center)
  478 + .fontColor(Color.White)
  479 + }
  480 +
  481 + if (this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
  482 + ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
  483 + .parallelGesture(
  484 + TapGesture()
  485 + .onAction((event: GestureEvent) => {
  486 + TrackingContent.download(1,TrackConstants.PageName.Atlas_Detail,TrackConstants.PageName.Atlas_Detail,this.pageParam)
  487 + }))
498 } 488 }
499 - .width('100%')  
500 } 489 }
  490 + .margin({
  491 + top: 14,
  492 + left: 20,
  493 + bottom: 14,
  494 + right: 0
  495 + })
501 .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine( 496 .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
502 TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` }) 497 TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` })
503 )) 498 ))