HarmonyOS 鸿蒙Next 动态文本缩进与图片对齐组件

HarmonyOS 鸿蒙Next 动态文本缩进与图片对齐组件 这个组件主要用于根据右侧图片元素的宽度动态计算并生成左侧文本的前置空格数量，以达到图片和文本内容之间自动对齐的效果。同时，它还展示了多个图像资源，并包含了一些基本的布局和样式设置。

@Entry
@Component
struct test {
  @State arr_01: Resource[] = []
  @State arr_02: string[] = ['', '', '', '']
  @State oneSpaceWidth: number = 0; //一个空格的长度
  build() {
    Column() {
      Text(' ')
        .onAreaChange((oldValue, newValue) => {
          this.oneSpaceWidth = parseFloat('' + newValue.width)
          console.info('=====一个空格的宽度 oneSpaceWidth -->', this.oneSpaceWidth)
          this.arr_01 = [$r("app.media.ic_widget"), $r("app.media.icon"), $r("app.media.icon_2"), $r("app.media.icon_3")] //更新数据
        })
      ForEach(this.arr_01, (item, index) => {
        Row({ space: 10 }) {
          Image($r('app.media.icon'))
            .width('40%')
            .height(80)
            .objectFit(ImageFit.Fill)
            .border({ radius: 10 })
          Stack({ alignContent: Alignment.TopStart }) {
            Text(this.arr_02[index] + '专升本2021华为开发者联盟欢迎您加入开发者大家庭专升本2021华为开发者联盟欢迎您加入开发者大家庭专升本2021华为开发者联盟欢迎您加入开发者大家庭')
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .maxLines(2)
              .lineHeight(24)
              .textOverflow({ overflow: TextOverflow.Ellipsis })

            Image(item)
              .height(20)
              .borderRadius(5)
              .onAreaChange((oldValue, newValue) => {
                var viewWidth = parseFloat('' + newValue.width)
                console.info('====item位置 start index', index)
                console.info('====当前要缩进的组件宽度', viewWidth)
                var numSpace = parseInt('' + (viewWidth / this.oneSpaceWidth)) + 1
                console.info('====计算当前要缩进numSpace个空格', numSpace)
                console.info('====计算数组空格数据【' + this.arr_02[index] + '】')
                console.info('====item位置 end')
              })
          }.width('60%')
        }.width('100%')
          .padding({ left: 10, top: 10, right: 20 })
      })
    }
  }
}