developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
douaojie
82efa5b2 1 parent ed963584

feat: 骨架屏

Inline Side-by-side
Showing 4 changed files with 293 additions and 0 deletions
  1 +@Entry
  2 +@Component
  3 +export struct detailedSkeleton {
  4 + @State quantity: Array<number> = [1, 2, 3,]
  5 +
  6 + build() {
  7 + Row() {
  8 + Column() {
  9 +
  10 + ForEach(this.quantity, () => {
  11 + Row() {
  12 + Column() {
  13 + textArea('60%', 12)
  14 + textArea('60%', 12)
  15 + textArea('40%', 12)
  16 + }
  17 + .RightStyle()
  18 +
  19 +
  20 + Column() {
  21 + textArea('35%', 80)
  22 + }
  23 + .margin({ right: 0 })
  24 + }
  25 + .height(100)
  26 + .justifyContent(FlexAlign.SpaceBetween)
  27 + .SkeletonStyle()
  28 + })
  29 +
  30 +
  31 + Column() {
  32 + textArea('100%', 150)
  33 + }
  34 + .justifyContent(FlexAlign.SpaceBetween)
  35 + .SkeletonStyle()
  36 +
  37 + ForEach([1, 2], () => {
  38 + Row() {
  39 + Column() {
  40 + textArea('60%', 12)
  41 + textArea('60%', 12)
  42 + textArea('40%', 12)
  43 + }
  44 + .RightStyle()
  45 +
  46 + Column() {
  47 + textArea('35%', 80)
  48 + }
  49 + .margin({ right: 0 })
  50 + }
  51 + .height(100)
  52 + .justifyContent(FlexAlign.SpaceBetween)
  53 + .SkeletonStyle()
  54 + })
  55 + }
  56 + .width('100%')
  57 + }
  58 + .height('100%')
  59 + }
  60 +}
  61 +
  62 +@Builder
  63 +function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
  64 + Row()
  65 + .width(width)
  66 + .height(height)
  67 + .backgroundColor('#FFF2F3F4')
  68 + .margin({ top: 10 })
  69 + .borderRadius(5)
  70 +}
  71 +
  72 +// 全局公共样式
  73 +@Styles
  74 +function SkeletonStyle() {
  75 + .padding({ right: 20, left: 20 })
  76 + .width('100%')
  77 + .margin({ top: 10 })
  78 +}
  79 +
  80 +@Extend(Column)
  81 +function RightStyle() {
  82 + .alignItems(HorizontalAlign.Start)
  83 + .justifyContent(FlexAlign.SpaceAround)
  84 + .height('100%')
  85 +}
  86 +
  1 +@Entry
  2 +@Component
  3 +export struct detailedSkeleton {
  4 + @State quantity: Array<number> = [1, 2, 3, 4, 5, 6, 7]
  5 +
  6 + build() {
  7 + Row() {
  8 + Column() {
  9 + Column() {
  10 + textArea('100%', 20)
  11 + textArea('50%', 20)
  12 + }
  13 + .SkeletonStyle()
  14 + .alignItems(HorizontalAlign.Start)
  15 +
  16 + Column() {
  17 + textArea('40%', 12)
  18 + textArea('40%', 12)
  19 + }
  20 + .SkeletonStyle()
  21 + .alignItems(HorizontalAlign.Start)
  22 +
  23 +
  24 + Column() {
  25 + textArea('100%', 12)
  26 + textArea('100%', 12)
  27 + textArea('90%', 12)
  28 + }
  29 + .SkeletonStyle()
  30 + .alignItems(HorizontalAlign.Start)
  31 +
  32 + Column() {
  33 + textArea('100%', 150)
  34 + }
  35 + .justifyContent(FlexAlign.SpaceBetween)
  36 + .SkeletonStyle()
  37 +
  38 + ForEach(this.quantity, () => {
  39 + Column() {
  40 + textArea('100%', 12)
  41 + textArea('90%', 12)
  42 + }
  43 + .SkeletonStyle()
  44 + .alignItems(HorizontalAlign.Start)
  45 + })
  46 + }
  47 + .width('100%')
  48 + }
  49 + .height('100%')
  50 + }
  51 +}
  52 +
  53 +@Builder
  54 +function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
  55 + Row()
  56 + .width(width)
  57 + .height(height)
  58 + .backgroundColor('#FFF2F3F4')
  59 + .margin({ top: 10 })
  60 + .borderRadius(5)
  61 +}
  62 +
  63 +// 全局公共样式
  64 +@Styles
  65 +function SkeletonStyle() {
  66 + .padding({ right: 20, left: 20 })
  67 + .width('100%')
  68 + .margin({ top: 10 })
  69 +}
  1 +@Entry
  2 +@Component
  3 +export struct detailedSkeleton {
  4 + @State quantity: Array<number> = [1, 2, 3,]
  5 +
  6 + build() {
  7 + Row() {
  8 + Column() {
  9 + Row() {
  10 + Column() {
  11 + Row() {
  12 + Column() {
  13 + Image($rawfile('apph5/image/peopleSeleton.svg')).width('100%').height(50)// 后缀名不能省略
  14 + .interpolation(ImageInterpolation.High)
  15 + textArea('100%', 12)
  16 + }.width('72.00%').alignItems(HorizontalAlign.Start).margin({ right: 5 })
  17 +
  18 + Column() {
  19 + textArea(24, 20)
  20 + textArea(24, 3)
  21 + textArea(24, 20)
  22 + }
  23 + .border({ width: 1 })
  24 + .borderColor('#FFF2F3F4')
  25 + .padding({ right: 2, left: 2, top: 0, bottom: 2 })
  26 + .justifyContent(FlexAlign.SpaceEvenly)
  27 + .alignItems(HorizontalAlign.Start)
  28 + }
  29 + .justifyContent(FlexAlign.SpaceBetween)
  30 + .width('98%')
  31 +
  32 + BoxAndLine().width('100%')
  33 + BoxAndBox({ firstBoxNumber: '65%', boxHeight: 70 })
  34 + Column() {
  35 + textArea('100%', 100)
  36 + }
  37 +
  38 + BoxAndBox({ firstBoxNumber: '30%', boxHeight: 50 })
  39 +
  40 + }.width('45%')
  41 + .opacity(1)
  42 + .align(Alignment.Start)
  43 + .alignItems(HorizontalAlign.Start)
  44 +
  45 + Column() {
  46 + Column() {
  47 + textArea('100%', 12)
  48 + }.width('100%')
  49 +
  50 + BoxAndLine()
  51 +
  52 + Column() {
  53 + textArea('95%', 100)
  54 + }
  55 +
  56 + Column() {
  57 + textArea('95%', 12)
  58 + }
  59 +
  60 + Row() {
  61 + Column() {
  62 + textArea('100%', 30)
  63 + }.width('50%').margin({ right: 5 })
  64 +
  65 + Column() {
  66 + textArea('100%', 30)
  67 + }.layoutWeight(1)
  68 + }.width('95%').justifyContent(FlexAlign.SpaceBetween)
  69 +
  70 + Column() {
  71 + textArea('95%', 120)
  72 + }
  73 + }.width('45%')
  74 + }.justifyContent(FlexAlign.SpaceBetween)
  75 + }
  76 + .width('100%')
  77 +
  78 + }
  79 + .height('100%')
  80 + }
  81 +}
  82 +
  83 +@Component
  84 +struct BoxAndLine {
  85 + build() {
  86 + Column() {
  87 + textArea('100%', 130)
  88 + textArea('100%', 12)
  89 + textArea('80%', 12)
  90 + }.width('98%').alignItems(HorizontalAlign.Start)
  91 + }
  92 +}
  93 +
  94 +
  95 +@Component
  96 +struct BoxAndBox {
  97 + @Prop firstBoxNumber: number | Resource | string
  98 + @Prop boxHeight: number | Resource | string
  99 +
  100 + build() {
  101 + Row() {
  102 + Column() {
  103 + textArea('100%', this.boxHeight)
  104 + }.width(this.firstBoxNumber).margin({ right: 5 })
  105 +
  106 + Column() {
  107 + textArea('100%', this.boxHeight)
  108 + }.layoutWeight(1)
  109 + }.width('100%').justifyContent(FlexAlign.SpaceBetween)
  110 + }
  111 +}
  112 +
  113 +@Builder
  114 +function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
  115 + Row()
  116 + .width(width)
  117 + .height(height)
  118 + .backgroundColor('#FFF6F6F6')
  119 + .margin({ top: 5 })
  120 + // .borderRadius(5)
  121 +}
  122 +
  123 +// 全局公共样式
  124 +@Styles
  125 +function SkeletonStyle() {
  126 + .padding({ right: 20, left: 20 })
  127 + .width('100%')
  128 + .margin({ top: 5 })
  129 +}
  130 +
  131 +@Extend(Column)
  132 +function RightStyle() {
  133 + .alignItems(HorizontalAlign.Start)
  134 + .justifyContent(FlexAlign.SpaceAround)
  135 + .height('100%')
  136 +}
  137 +
  1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713249268044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2925" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M884.736 546.88c-1.792-5.12-7.04-9.728-12.8-7.232-3.2 1.344-10.496 12.544-11.072 9.6-2.752-14.08 16.704-18.048 19.52-25.344 3.008-8-4.224-11.52-10.24-13.888a47.232 47.232 0 0 1-16.192-11.072c-4.928-4.992-17.024-12.352-21.568-3.2-1.28 4.352-0.512 12.608-2.176 17.92-1.92 6.272-9.088 6.72-13.44 11.328-6.208 6.848 0.64 9.216 4.8 14.464 3.84 4.992 1.216 40.384-5.248 52.48-3.2 6.016-86.336 72.064-100.032 75.52-15.744 3.84-15.68 20.48-8.96 29.696 8.576 11.712 27.008 6.272 36.16-0.448 5.76-4.352 44.288-45.056 53.44-53.44 3.712-3.392 18.688-22.976 19.84-10.432a46.912 46.912 0 0 1-1.728 16.96c-1.856 5.888-5.568 14.848-5.12 21.248 0.768 10.24 19.2 24.32 28.8 20.096 6.208-2.816 6.72-12.096 6.08-18.816-0.576-7.04 0.768-49.024 2.24-62.72a46.08 46.08 0 0 1 5.952-20.8c5.248-8.768 36.928-27.072 31.744-41.92z m-226.88 26.624c-2.816 6.08-14.272-3.84-17.152-6.528-2.88-2.56-6.464-4.48-6.016-8.896 0.576-4.48 5.76-5.12 5.76-5.12 1.792-0.32 17.792-0.96 18.88 1.856a55.296 55.296 0 0 1-1.472 18.688z m14.72-97.28c-10.816-1.408-23.296 9.472-31.616 14.72-4.096 2.56-27.52 14.4-24 20.48 2.432 4.096 17.024 0.576 21.76-0.512 13.44-3.072 20.48-12.032 23.872-9.792 2.88 1.92 1.024 32.64-4.48 32.064-12.032-1.152-19.2-10.624-32.064-15.872-3.968-1.6-11.776-4.608-9.088 2.624 0.768 2.176 3.648 5.056 4.672 7.168 2.368 4.8 4.48 21.504 2.368 25.152-4.224 6.976-8.704-5.376-9.792-8.064-2.048-5.12-3.328-10.368-5.12-15.552-1.536-4.736-5.568-16.96-10.944-16.256-6.208 0.832-1.664 27.968-2.816 33.728-3.84 19.456-5.504 25.216-6.144 37.952-0.512 10.304 0 27.392 11.84 30.528 15.808 4.224 18.048-9.344 19.456-18.56 0.32-2.176 0.832-6.784 1.92-8.64 1.664-2.752 3.84-3.2 5.888-0.512 1.664 2.304 0.96 5.696 3.456 7.936 2.496 2.304 5.312 1.92 8.576 2.56 5.056 0.96 11.328-0.96 14.464 3.84 3.2 5.12 2.176 10.56 8.32 14.016 13.44 7.36 19.84-7.168 20.864-16.896 1.216-11.648 1.792-22.592 2.368-34.176 0.576-11.712 1.088-24.448 4.096-35.776a244.48 244.48 0 0 1 5.248-17.024 22.72 22.72 0 0 0 0.768-16.256c-3.776-9.728-19.648-18.368-23.936-18.88z m-165.312 2.304c4.48-4.16 12.032-9.664 10.88-16.32-4.352-25.92-44.672-8.384-59.968-0.768-22.208 11.136-11.52 5.824-50.432 24.96-5.888 2.816-3.2 7.04-2.304 9.6 3.2 9.216 17.664 13.632 23.808 9.728 5.12-3.264 54.08-37.76 56.704-34.112 4.032 5.504-20.8 24.512-32.32 29.056-5.12 2.048-13.184 9.408-14.784 15.04a12.992 12.992 0 0 0 0.192 8.96l-0.64-0.256c-1.856 0.64-6.848-0.192-8.512 0.96-1.536 1.024 1.728 20.928 8.128 33.28 2.304 4.352 4.288 8.32-1.088 11.008-6.208 3.072-17.088 15.68-4.928 16.832 2.624 0.256 5.44 0.384 7.68-0.896 1.728-1.024 4.992-2.944 7.488-2.24 2.56 0.768 4.736 8.32 6.4 10.944 5.312 8.064 24.576 43.328 33.728 45.632 8 2.048 21.312-1.152 24-9.984 1.408-4.416 2.56-36.864 2.496-41.664-0.064-4.288 0.256-9.856-0.896-13.76-1.088-3.648-3.84-9.152-8.448-7.872-4.928 1.28-5.184 8.832-6.016 12.8-1.024 4.8-2.24 26.304-7.232 26.368-3.52 0-20.16-26.624-22.016-30.336-1.92-3.776-3.52-7.36-0.96-11.008 4.48-6.464 19.2-14.976 11.264-23.68-6.272-6.784-20.48-4.992-22.592 3.584-0.64 2.56 0.896 12.608-4.416 8.96-3.072-2.112-8.704-17.088-6.656-19.2 0.832-0.832 4.224-1.472 7.296-1.792h3.2c10.88-0.96 26.496-6.72 29.952-15.296 1.152-2.88 2.56-6.592 0.064-8.576-1.984-1.664-2.624-1.92-3.2-4.16-0.64-2.688 19.52-21.504 24.128-25.792z m472.064 56.128c16.384-7.808 49.408-7.424 44.096-39.04-1.088-6.528-4.352-20.032-13.568-19.52-8 0.448-14.272 12.8-17.792 18.816-8.96 15.36-26.496 30.4-38.912 43.264-15.68 16.256-41.088 60.992-43.84 60.992-7.296-0.064 3.264-29.248 4.992-33.536 10.176-25.28 42.88-104.256 47.808-113.28 9.152-16.832 15.808-25.792 26.112-41.664 20.352-31.36-14.848-30.336-14.848-30.336-9.92 0.768-16.256 7.296-21.952 11.776-6.272 4.8-12.8 8.064-19.712 11.904-6.784 3.84-15.36 7.872-9.472 16.128 4.992 7.04 10.752 7.744 18.24 8.512a38.72 38.72 0 0 0 7.36 0.512c-1.216 7.232-25.28 50.112-30.848 66.752-11.392 34.24-20.224 98.368-36.8 128a29.888 29.888 0 0 0-3.392 23.68c2.112 6.912 14.272 11.52 21.952 5.376 6.144-4.864 6.976-29.312 28.48-67.072 6.016-10.496 9.6-6.144 14.592 3.584 4.544 8.768 8.512 31.104 14.592 39.296 19.52 26.176 41.408 18.688 44.352 9.472 4.48-13.632-3.84-23.872-9.792-29.824-16.896-16.704-59.712-28.992-49.152-48 7.872-14.08 28.544-21.504 37.504-25.792zM260.544 386.816c-0.576-9.856-6.912-17.472-16.064-22.72-4.288-2.496-19.52-9.664-23.04-6.144l1.472-0.32c-6.016 2.688-1.92 21.312-2.496 26.688-1.024 9.984-6.336 22.208-9.792 31.872-7.232 20.032-13.888 37.824-21.056 57.856a576.64 576.64 0 0 1-26.944 61.312c-9.984 19.84-19.712 40.256-29.888 59.84-5.76 11.2-11.84 22.272-19.2 32.32-6.848 9.152-14.464 20.352-22.784 28.416-6.848 6.592-15.872 12.8-24.512 16.064-10.496 4.032-20.032 4.864-30.72 6.912-4.928 0.896-26.24 2.304-31.04 4.096-13.696 4.992 7.872 11.648 13.952 11.584 21.76 0 44.992 1.536 64.64-5.568 18.944-6.912 35.84-21.12 47.936-36.736 13.44-17.344 37.632-61.76 46.976-81.216 11.52-23.808 58.24-112.64 62.912-125.312 6.08-16.64 20.544-41.408 19.648-59.008z m550.144 102.4a24.512 24.512 0 0 0 16.96-1.472 25.6 25.6 0 0 1 16.448-2.176c4.736 0.64 8.832 1.28 13.76 0.448 6.08-0.96 7.808-2.112 12.8-5.12 4.864-2.944 9.408-2.496 14.784-3.328a20.8 20.8 0 0 0 11.584-6.912c6.784-7.04 12.16-18.624 3.648-25.728-3.968-3.328-15.552-9.664-27.712-4.736a265.216 265.216 0 0 0-25.664 16.64c-9.728 6.912-21.568 9.472-31.488 15.36-3.84 2.24-9.152 5.248-11.648 8.96-3.264 4.672 1.92 6.784 6.528 8.064zM437.952 595.712c-11.008-4.672-14.912 2.624-21.632 6.464-3.264-5.12 0.128-12.416 0.96-17.856 0.96-6.4 6.72-38.4-17.92-51.008-1.984-1.024-5.568-1.472-5.568 1.408l-2.24 18.24c-5.632 43.2-9.728 53.76-10.112 60.864-0.256 6.848-0.704 16.576 3.712 21.952 3.648 4.288 9.472 7.488 15.488 5.824 5.76-1.472 24.128-17.472 29.056-22.208 5.056-4.8 19.008-19.2 8.256-23.68z m378.88-166.208c4.48 1.472 21.312 1.344 19.008 7.68-1.344 3.776-6.272 6.4-9.088 9.088-1.664 1.664-8.448 7.872-7.68 10.112 1.408 4.544 21.376-7.616 25.344-10.624 4.288-3.328 8.704-6.208 13.696-8.448 4.928-2.304 18.56-7.168 28.736-15.36 10.048-8.256 45.312-69.312 45.888-74.304 1.152-10.368-10.432-23.488-20.928-27.456-4.48-1.728-9.792 7.808-11.072 10.624-2.304 5.12-15.552 30.72-19.712 39.36a61.504 61.504 0 0 1-19.136 23.872c-8.96 6.08-18.56 8.896-28.8 11.904-5.248 1.6-26.688 6.656-28.8 9.792-2.88 4.224 8.192 12.352 12.544 13.76z m-489.088 219.136c-5.248 1.536-35.2 8.96-40.512 7.808-28.928-5.888-30.272-32.832-79.04-75.904-1.664-1.536-19.584-12.032-18.176-4.48 0 0 15.424 26.624 18.816 31.552 3.712 5.312 20.032 42.88 22.592 48.192 2.432 5.056 4.992 10.368 7.68 15.232 5.44 9.344 15.68 22.272 27.072 24.832 5.76 1.28 24.512-4.352 30.144-7.104 11.328-5.632 22.528-12.8 32.192-21.312 3.84-3.328 8.64-7.744 10.112-12.672 2.304-7.808-5.248-7.808-10.88-6.144z" p-id="2926" fill="#f6f6f6"></path></svg>