鸿蒙开发学习（1）

Context：本人只接触过原生开发，未接触跨端技术栈（flutter，react native，compose）

2024.1.18 实现一个列表

@Entry
@Component
struct Detail {
  @State message: string = 'Hello World'

  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Row() {
      List() {
        ForEach(this.arr,(item:Number) =>{
          ListItem(){
            Row() {
              Image($r("app.media.icon"))
                .id("mImage")
                .width(120)
                .height(120)
              Column() {
                Text("标题" + item)
                  .textAlign(TextAlign.Start)
                  .fontSize(30)
                  .fontColor(Color.Black)
                  .fontWeight(FontWeight.Bold)
                Text("副标题这个就真的挺长的了")
                  .fontSize(30)
                  .fontColor(Color.Gray)
              }.justifyContent(FlexAlign.SpaceBetween)
              .alignItems(HorizontalAlign.Start)
              .margin({left:10})
            }
          }
        },item => item)
      }
      .divider({strokeWidth:1})
      // Column() {
      //   Text(this.message)
      //     .fontSize(50)
      //     .fontWeight(FontWeight.Bold)
      // }
      // .width('100%')
    }
    .height('100%')
    .padding({top : 10,left:10})
  }
}

直接感受：

1. 非xml预览，实时改动随时都要编译才能生成预览，很难受
2. 布局逻辑粗暴的全部通过类似线性布局实现，与原生ConstraintLayout非常方便的api使用大相径庭，也很难受
3. 图片组件Image直接支持类似glide用法通过传入url直接加载网络图片，这个还可以