developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
王士厅
ab57c0a1 1 parent 359c2777

fix: 图集底部顶部有文字时，添加蒙层

Inline Side-by-side
Showing 1 changed file with 138 additions and 121 deletions
@@ -156,146 +156,157 @@ export struct MultiPictureDetailPageComponent { @@ -156,146 +156,157 @@ export struct MultiPictureDetailPageComponent {
156 @Builder 156 @Builder
157 rmh() { 157 rmh() {
158 if (!this.showDownload) { 158 if (!this.showDownload) {
159 - Row() {  
160 - Row({ space: 8 }) {  
161 - if (this.getImgUrl()) {  
162 - Row() {  
163 - Stack() {  
164 - Image(this.getImgUrl())  
165 - .borderRadius(18)  
166 - .aspectRatio(1)  
167 - .border({ width: 1, color: Color.White, style: BorderStyle.Solid })  
168 - .width(36)  
169 - .height(36)  
170 - .objectFit(ImageFit.Fill)  
171 - .interpolation(ImageInterpolation.High)  
172 - if (!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)) {  
173 - Stack() {  
174 - Image(this.contentDetailData.rmhInfo?.authIcon)  
175 - .width($r('app.float.vp_13'))  
176 - .height($r('app.float.vp_13'))  
177 - .objectFit(ImageFit.Cover) 159 + Row(){
  160 + Row() {
  161 + Row({ space: 8 }) {
  162 + if (this.getImgUrl()) {
  163 + Row() {
  164 + Stack() {
  165 + Image(this.getImgUrl())
  166 + .borderRadius(18)
  167 + .aspectRatio(1)
  168 + .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
  169 + .width(36)
  170 + .height(36)
  171 + .objectFit(ImageFit.Fill)
  172 + .interpolation(ImageInterpolation.High)
  173 + if (!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)) {
  174 + Stack() {
  175 + Image(this.contentDetailData.rmhInfo?.authIcon)
  176 + .width($r('app.float.vp_13'))
  177 + .height($r('app.float.vp_13'))
  178 + .objectFit(ImageFit.Cover)
  179 + }
  180 + .width(36)
  181 + .height(36)
  182 + .alignContent(Alignment.BottomEnd)
178 } 183 }
179 - .width(36)  
180 - .height(36)  
181 - .alignContent(Alignment.BottomEnd)  
182 } 184 }
183 - }  
184 - .width(36)  
185 - .height(36)  
186 - .alignContent(Alignment.Center)  
187 - .onClick(() => {  
188 - if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {  
189 - // 号主页  
190 - const params: Params = {  
191 - creatorId: this.contentDetailData.rmhInfo.rmhId,  
192 - pageID: '' 185 + .width(36)
  186 + .height(36)
  187 + .alignContent(Alignment.Center)
  188 + .onClick(() => {
  189 + if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
  190 + // 号主页
  191 + const params: Params = {
  192 + creatorId: this.contentDetailData.rmhInfo.rmhId,
  193 + pageID: ''
  194 + }
  195 + WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
193 } 196 }
194 - WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)  
195 - }  
196 197
197 - }) 198 + })
  199 + }
  200 + .width('13%')
  201 + .height('100%')
198 } 202 }
199 - .width('13%')  
200 - .height('100%')  
201 - }  
202 203
203 - Row() {  
204 - Flex({  
205 - direction: FlexDirection.Column,  
206 - justifyContent: FlexAlign.SpaceAround,  
207 - alignItems: ItemAlign.Start  
208 - }) {  
209 - Text(`${this.contentDetailData?.rmhInfo?.rmhName}`)  
210 - .fontColor(Color.White)  
211 - .fontSize(14)  
212 - .fontFamily('PingFang PingFang SC-Medium')  
213 - .fontWeight(500)  
214 - .lineHeight(17)  
215 - .margin(0)  
216 - .height(17)  
217 - Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)  
218 - .fontColor(Color.White)  
219 - .fontSize(12)  
220 - .fontFamily('PingFang SC-Regular')  
221 - .fontWeight(400)  
222 - .lineHeight(14)  
223 - .height(14)  
224 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
225 - .margin(0)  
226 - .maxLines(1) 204 + Row() {
  205 + Flex({
  206 + direction: FlexDirection.Column,
  207 + justifyContent: FlexAlign.SpaceAround,
  208 + alignItems: ItemAlign.Start
  209 + }) {
  210 + Text(`${this.contentDetailData?.rmhInfo?.rmhName}`)
  211 + .fontColor(Color.White)
  212 + .fontSize(14)
  213 + .fontFamily('PingFang PingFang SC-Medium')
  214 + .fontWeight(500)
  215 + .lineHeight(17)
  216 + .margin(0)
  217 + .height(17)
  218 + Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)
  219 + .fontColor(Color.White)
  220 + .fontSize(12)
  221 + .fontFamily('PingFang SC-Regular')
  222 + .fontWeight(400)
  223 + .lineHeight(14)
  224 + .height(14)
  225 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  226 + .margin(0)
  227 + .maxLines(1)
  228 + }
227 } 229 }
  230 + .width('81%')
  231 + .height('100%')
228 } 232 }
229 - .width('81%') 233 + .width('74.4%')
230 .height('100%') 234 .height('100%')
231 - }  
232 - .width('74.4%')  
233 - .height('100%')  
234 - .margin({  
235 - top: 0,  
236 - bottom: 0,  
237 - left: 16,  
238 - right: 0  
239 - })  
240 - .onClick(() => {  
241 - if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {  
242 - // 号主页  
243 - const params: Params = {  
244 - creatorId: this.contentDetailData.rmhInfo.rmhId,  
245 - pageID: '' 235 + .margin({
  236 + top: 0,
  237 + bottom: 0,
  238 + left: 16,
  239 + right: 0
  240 + })
  241 + .onClick(() => {
  242 + if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
  243 + // 号主页
  244 + const params: Params = {
  245 + creatorId: this.contentDetailData.rmhInfo.rmhId,
  246 + pageID: ''
  247 + }
  248 + WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
246 } 249 }
247 - WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)  
248 - }  
249 250
250 - }) 251 + })
251 252
252 - Row() {  
253 - if (this.followStatus == '0') {  
254 - Button({ type: ButtonType.Normal, stateEffect: true }) {  
255 - Row() {  
256 - Text('+关注').fontSize(12).fontColor(0xffffff)  
257 - }.alignItems(VerticalAlign.Center)  
258 - }  
259 - .borderRadius(4)  
260 - .backgroundColor('#ED2800')  
261 - .width(48)  
262 - .height(24)  
263 - .onClick(() => {  
264 - this.handleAccention()  
265 - }).visibility(this.isShowButton ? Visibility.Visible : Visibility.None)  
266 - } else {  
267 - Button({ type: ButtonType.Normal, stateEffect: true }) {  
268 - Row() {  
269 - Text('已关注').fontSize(12).fontColor(0xffffff)  
270 - }.alignItems(VerticalAlign.Center) 253 + Row() {
  254 + if (this.followStatus == '0') {
  255 + Button({ type: ButtonType.Normal, stateEffect: true }) {
  256 + Row() {
  257 + Text('+关注').fontSize(12).fontColor(0xffffff)
  258 + }.alignItems(VerticalAlign.Center)
  259 + }
  260 + .borderRadius(4)
  261 + .backgroundColor('#ED2800')
  262 + .width(48)
  263 + .height(24)
  264 + .onClick(() => {
  265 + this.handleAccention()
  266 + }).visibility(this.isShowButton ? Visibility.Visible : Visibility.None)
  267 + } else {
  268 + Button({ type: ButtonType.Normal, stateEffect: true }) {
  269 + Row() {
  270 + Text('已关注').fontSize(12).fontColor(0xffffff)
  271 + }.alignItems(VerticalAlign.Center)
  272 + }
  273 + .borderRadius(4)
  274 + .backgroundColor('#333333')
  275 + .width(54)
  276 + .height(24)
  277 + .onClick(() => {
  278 + this.handleAccention()
  279 + }).visibility(this.isShowButton ? Visibility.Visible : Visibility.None)
271 } 280 }
272 - .borderRadius(4)  
273 - .backgroundColor('#333333')  
274 - .width(54)  
275 - .height(24)  
276 - .onClick(() => {  
277 - this.handleAccention()  
278 - }).visibility(this.isShowButton ? Visibility.Visible : Visibility.None)  
279 - }  
280 281
  282 + }
  283 + .justifyContent(FlexAlign.Center)
  284 + .alignItems(VerticalAlign.Center)
  285 + .width('21.6%')
  286 + .height('100%')
281 } 287 }
282 - .justifyContent(FlexAlign.Center)  
283 - .alignItems(VerticalAlign.Center)  
284 - .width('21.6%')  
285 - .height('100%') 288 + .width('100%')
  289 + .height(44)
  290 + .zIndex(10)
  291 + .margin({ top: `${this.topSafeHeight + 12}px` })
  292 + .alignRules({
  293 + top: { anchor: "__container__", align: VerticalAlign.Top },
  294 + middle: { anchor: "__container__", align: HorizontalAlign.Center }
  295 + })
  296 + .id('e_attention')
  297 + .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
  298 + TransitionEffect.translate({ x: 0, y: `-${this.topSafeHeight + 12}px` })
  299 + ))
286 } 300 }
287 .width('100%') 301 .width('100%')
288 - .height(44) 302 + .height(44 + px2vp(this.topSafeHeight))
289 .zIndex(10) 303 .zIndex(10)
290 - .margin({ top: `${this.topSafeHeight + 12}px` })  
291 - .alignRules({  
292 - top: { anchor: "__container__", align: VerticalAlign.Top },  
293 - middle: { anchor: "__container__", align: HorizontalAlign.Center } 304 + .linearGradient({
  305 + direction: GradientDirection.Top, // 渐变方向
  306 + colors: [['rgba(18, 18, 18, 0)', 0],
  307 + ['rgba(18, 18, 18, 1)', 1.0]] // 数组末尾元素占比小于1时满足重复着色效果
294 }) 308 })
295 - .id('e_attention')  
296 - .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(  
297 - TransitionEffect.translate({ x: 0, y: `-${this.topSafeHeight + 12}px` })  
298 - )) 309 + .opacity(0.5)
299 } 310 }
300 } 311 }
301 312
@@ -437,6 +448,12 @@ export struct MultiPictureDetailPageComponent { @@ -437,6 +448,12 @@ export struct MultiPictureDetailPageComponent {
437 .edgeEffect(EdgeEffect.None) 448 .edgeEffect(EdgeEffect.None)
438 .scrollBarWidth(0) 449 .scrollBarWidth(0)
439 .scrollBar(BarState.Off) 450 .scrollBar(BarState.Off)
  451 + .linearGradient({
  452 + direction: GradientDirection.Bottom, // 渐变方向
  453 + colors: [['rgba(18, 18, 18, 0)', 0],
  454 + ['rgba(18, 18, 18, 1)', 1.0]] // 数组末尾元素占比小于1时满足重复着色效果
  455 + })
  456 + .opacity(0.5)
440 457
441 OperRowListView({ 458 OperRowListView({
442 contentDetailData: this.contentDetailData, 459 contentDetailData: this.contentDetailData,