Showing
4 changed files
with
78 additions
and
25 deletions
| @@ -25,6 +25,7 @@ export struct ImageDownloadComponent { | @@ -25,6 +25,7 @@ export struct ImageDownloadComponent { | ||
| 25 | build() { | 25 | build() { |
| 26 | Column() { | 26 | Column() { |
| 27 | SaveButton({ icon: SaveIconStyle.LINES }) | 27 | SaveButton({ icon: SaveIconStyle.LINES }) |
| 28 | + .iconSize(24) | ||
| 28 | .iconColor(Color.White) | 29 | .iconColor(Color.White) |
| 29 | .onClick(async () => { | 30 | .onClick(async () => { |
| 30 | console.info(`cj2024 onClick ${this.imageBuffer}`) | 31 | console.info(`cj2024 onClick ${this.imageBuffer}`) |
| @@ -156,7 +156,7 @@ export struct CommentIconComponent { | @@ -156,7 +156,7 @@ export struct CommentIconComponent { | ||
| 156 | // Stack({alignContent:Alignment.Start}) { | 156 | // Stack({alignContent:Alignment.Start}) { |
| 157 | if (Number.parseInt(this.publishCommentModel.totalCommentNumer) != 0) { | 157 | if (Number.parseInt(this.publishCommentModel.totalCommentNumer) != 0) { |
| 158 | RelativeContainer() { | 158 | RelativeContainer() { |
| 159 | - Image($r('app.media.comment_icon_number_bg')) | 159 | + Image(this.styleType == 1 ? $r('app.media.comment_icon_number_bg'):$r('app.media.ic_like_back_Select')) |
| 160 | .objectFit(ImageFit.Fill) | 160 | .objectFit(ImageFit.Fill) |
| 161 | .resizable({ | 161 | .resizable({ |
| 162 | slice: { | 162 | slice: { |
| 1 | -import { Logger, NumberFormatterUtils } from 'wdKit/Index' | 1 | +import { DisplayUtils,Logger, NumberFormatterUtils } from 'wdKit/Index' |
| 2 | import { LikeViewModel } from '../../viewmodel/LikeViewModel' | 2 | import { LikeViewModel } from '../../viewmodel/LikeViewModel' |
| 3 | import { SPHelper } from 'wdKit'; | 3 | import { SPHelper } from 'wdKit'; |
| 4 | import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'; | 4 | import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'; |
| 5 | import { SpConstants } from 'wdConstant/Index'; | 5 | import { SpConstants } from 'wdConstant/Index'; |
| 6 | import { ContentDetailDTO } from 'wdBean/Index'; | 6 | import { ContentDetailDTO } from 'wdBean/Index'; |
| 7 | - | 7 | +import measure from '@ohos.measure' |
| 8 | 8 | ||
| 9 | const TAG = 'LikeComponent'; | 9 | const TAG = 'LikeComponent'; |
| 10 | 10 | ||
| @@ -168,30 +168,74 @@ export struct LikeComponent { | @@ -168,30 +168,74 @@ export struct LikeComponent { | ||
| 168 | likeCompStyle5() { | 168 | likeCompStyle5() { |
| 169 | //1: 底部栏目样式 默认样式 | 169 | //1: 底部栏目样式 默认样式 |
| 170 | Stack({ alignContent: Alignment.Bottom }) { | 170 | Stack({ alignContent: Alignment.Bottom }) { |
| 171 | - Column() { | ||
| 172 | - // Image(this.likeStatus ? $r('app.media.icon_like_select') : $r('app.media.icon_like_default')) | ||
| 173 | - Image(this.transLikeStyle().url) | ||
| 174 | - .width(24) | ||
| 175 | - .height(24) | ||
| 176 | - .onClick(() => { | ||
| 177 | - this.clickButtonEvent() | 171 | + Image(this.transLikeStyle().url) |
| 172 | + .width(24) | ||
| 173 | + .height(24) | ||
| 174 | + if (this.likeCount > 0){ | ||
| 175 | + RelativeContainer() { | ||
| 176 | + Image(this.likeStatus ? $r('app.media.ic_like_back_Select') : $r('app.media.ic_like_back')) | ||
| 177 | + .objectFit(ImageFit.Fill) | ||
| 178 | + .resizable({ | ||
| 179 | + slice: { | ||
| 180 | + top: 1, | ||
| 181 | + left: 20, | ||
| 182 | + right: 1, | ||
| 183 | + bottom: 1 | ||
| 184 | + } | ||
| 178 | }) | 185 | }) |
| 179 | - } | 186 | + .alignRules({ |
| 187 | + top: { anchor: "Text", align: VerticalAlign.Top }, | ||
| 188 | + left: { anchor: "Text", align: HorizontalAlign.Start }, | ||
| 189 | + right: { anchor: "Text", align: HorizontalAlign.End }, | ||
| 190 | + bottom: { anchor: "Text", align: VerticalAlign.Bottom }, | ||
| 191 | + }) | ||
| 192 | + .id("Image") | ||
| 180 | 193 | ||
| 181 | - Row() { | ||
| 182 | - Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || '')) | 194 | + Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || ''))// Text("44444444") |
| 183 | .fontSize(8) | 195 | .fontSize(8) |
| 184 | - .fontColor(Color.White) | ||
| 185 | - .padding({ left: 4, right: 2 }) | 196 | + .fontColor('#ffffff')// .backgroundColor('#ED2800') |
| 197 | + .height(12) | ||
| 198 | + .textAlign(TextAlign.Center) | ||
| 199 | + .alignRules({ | ||
| 200 | + top: { anchor: "__container__", align: VerticalAlign.Top }, | ||
| 201 | + left: { anchor: "__container__", align: HorizontalAlign.Start } | ||
| 202 | + })/*动态计算文字宽度*/ | ||
| 203 | + .width(this.getMeasureText(NumberFormatterUtils.formatNumberWithWan(this.likeCount || '')) + | ||
| 204 | + 12)// .backgroundColor(Color.Green) | ||
| 205 | + .id("Text") | ||
| 206 | + .visibility(this.likeCount > 0 ? Visibility.Visible : Visibility.Hidden) | ||
| 186 | } | 207 | } |
| 187 | - .height(12) | ||
| 188 | - .alignItems(VerticalAlign.Center) | ||
| 189 | - .position({ x: '100%', }) | ||
| 190 | - .markAnchor({ x: '100%' }) | ||
| 191 | - .backgroundImage(this.likeStatus ? $r('app.media.ic_like_back_Select') : $r('app.media.ic_like_back')) | ||
| 192 | - .backgroundImageSize(ImageSize.Auto) | ||
| 193 | - .visibility(this.likeCount > 0 ? Visibility.Visible : Visibility.Hidden) | ||
| 194 | - }.width(24).height(24) | 208 | + .offset({ |
| 209 | + x: 12 | ||
| 210 | + }) | ||
| 211 | + } | ||
| 212 | + | ||
| 213 | + // Column() { | ||
| 214 | + // // Image(this.likeStatus ? $r('app.media.icon_like_select') : $r('app.media.icon_like_default')) | ||
| 215 | + // Image(this.transLikeStyle().url) | ||
| 216 | + // .width(24) | ||
| 217 | + // .height(24) | ||
| 218 | + // .onClick(() => { | ||
| 219 | + // this.clickButtonEvent() | ||
| 220 | + // }) | ||
| 221 | + // } | ||
| 222 | + // | ||
| 223 | + // Row() { | ||
| 224 | + // Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || '')) | ||
| 225 | + // .fontSize(8) | ||
| 226 | + // .fontColor(Color.White) | ||
| 227 | + // .padding({ left: 4, right: 2 }) | ||
| 228 | + // } | ||
| 229 | + // .height(12) | ||
| 230 | + // .alignItems(VerticalAlign.Center) | ||
| 231 | + // .position({ x: '100%', }) | ||
| 232 | + // .markAnchor({ x: '100%' }) | ||
| 233 | + // .backgroundImage(this.likeStatus ? $r('app.media.ic_like_back_Select') : $r('app.media.ic_like_back')) | ||
| 234 | + // .backgroundImageSize(ImageSize.Auto) | ||
| 235 | + // .visibility(this.likeCount > 0 ? Visibility.Visible : Visibility.Hidden) | ||
| 236 | + }.width(24).height(24).onClick(() => { | ||
| 237 | + this.clickButtonEvent() | ||
| 238 | + }) | ||
| 195 | } | 239 | } |
| 196 | 240 | ||
| 197 | @Builder | 241 | @Builder |
| @@ -210,8 +254,6 @@ export struct LikeComponent { | @@ -210,8 +254,6 @@ export struct LikeComponent { | ||
| 210 | .height(36) | 254 | .height(36) |
| 211 | .borderRadius(18) | 255 | .borderRadius(18) |
| 212 | .backgroundColor((this.pageComponentType === 4 || this.pageComponentType === 2) ? '#4D000000' : '#FFF5F5F5') | 256 | .backgroundColor((this.pageComponentType === 4 || this.pageComponentType === 2) ? '#4D000000' : '#FFF5F5F5') |
| 213 | - | ||
| 214 | - | ||
| 215 | Row() { | 257 | Row() { |
| 216 | Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || '')) | 258 | Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || '')) |
| 217 | .fontSize(8) | 259 | .fontSize(8) |
| @@ -306,4 +348,14 @@ export struct LikeComponent { | @@ -306,4 +348,14 @@ export struct LikeComponent { | ||
| 306 | this.likeCount = 0 | 348 | this.likeCount = 0 |
| 307 | }) | 349 | }) |
| 308 | } | 350 | } |
| 351 | + private getMeasureText(text: string) { | ||
| 352 | + let width = measure.measureText({ | ||
| 353 | + textContent: text, | ||
| 354 | + fontSize: 8, | ||
| 355 | + lineHeight: 12, | ||
| 356 | + constraintWidth: DisplayUtils.getDeviceWidth(), | ||
| 357 | + }) | ||
| 358 | + width = px2vp(width) | ||
| 359 | + return width | ||
| 360 | + } | ||
| 309 | } | 361 | } |
-
Please register or login to post a comment