图片

关键词：image

1、加载图片资源

image支持加载 存档图 多媒体像素图 两种类型

其中存档图类型数据源可以分为本地资源、网络资源、resource资源、媒体库源和base64

本地资源：

resource资源

2、添加属性

尺寸

统一设置

在项目文件下的\entry\src\main\resources\base\element\float.json 文件中可以设置统一大小，新建一个方法name：yayale 值是200vp

边距

外边距：margin

3、事件调用

4、课堂作业

// 仿社区帖子页面
@Entry
@Component
struct CommunityPost {
  @State isLiked: boolean = false
  @State likeCount: number = 666
  @State commentCount: number = 128

  build() {
    Column() {
      // 顶部导航栏
      Row() {
        Text('<')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        Text('帖子详情')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .layoutWeight(1)
        Text('...')
          .fontSize(24)
      }
      .width('100%')
      .height(50)
      .padding({ left: 15, right: 15 })
      .backgroundColor('#fff')

      Scroll() {
        Column() {
          // 帖子主体
          Column() {
            // 作者信息区域
            Row() {
              Image('/img/3.jpg')
                .width(50)
                .height(50)
                .borderRadius(25)
              Column() {
                Text('鸭鸭乐')
                  .fontSize(16)
                  .fontWeight(FontWeight.Bold)
                Text('2小时前')
                  .fontSize(12)
                  .fontColor('#999')
              }
              .margin({ left: 10 })
              .alignItems(HorizontalAlign.Start)
              .layoutWeight(1)
              Button('关注')
                .fontSize(14)
                .height(32)
                .backgroundColor('#4A90E2')
                .borderRadius(16)
            }
            .width('100%')
            .padding(15)

            // 帖子文字内容
            Column() {
              Text('今天天气真好！出门拍了几张照片，分享给大家~')
                .fontSize(15)
                .lineHeight(24)
                .width('100%')
              Text('#今日份的快乐 #摄影 #风景')
                .fontSize(14)
                .fontColor('#4A90E2')
                .margin({ top: 8 })
                .width('100%')
            }
            .width('100%')
            .padding({ left: 15, right: 15, bottom: 10 })
            .alignItems(HorizontalAlign.Start)

            // 图片区域 - 网格布局
            Grid() {
              GridItem() {
                Image('/img/1.jpg')
                  .width('100%')
                  .height('100%')
                  .borderRadius(8)
              }
              GridItem() {
                Image('/img/4.jpg')
                  .width('100%')
                  .height('100%')
                  .borderRadius(8)
              }
              GridItem() {
                Image('/img/5.jpg')
                  .width('100%')
                  .height('100%')
                  .borderRadius(8)
              }
              GridItem() {
                Image('/img/7.png')
                  .width('100%')
                  .height('100%')
                  .borderRadius(8)
              }
            }
            .width('100%')
            .height(300)
            .columnsTemplate('1fr 1fr')
            .rowsTemplate('1fr 1fr')
            .columnsGap(5)
            .rowsGap(5)
            .padding(15)

            // 互动栏
            Row() {
              // 点赞按钮
              Row() {
                Text(this.isLiked ? '👍' : '🤍')
                  .fontSize(20)
                Text(this.likeCount.toString())
                  .fontSize(14)
                  .margin({ left: 5 })
              }
              .onClick(() => {
                this.isLiked = !this.isLiked
                if (this.isLiked) {
                  this.likeCount++
                } else {
                  this.likeCount--
                }
              })

              Blank()

              // 评论
              Row() {
                Image('/img/2.png')
                  .width(22)
                  .height(22)
                Text(this.commentCount.toString())
                  .fontSize(14)
                  .margin({ left: 5 })
              }

              // 分享
              Row() {
                Image('/img/8.png')
                  .width(22)
                  .height(22)
                Text('分享')
                  .fontSize(14)
                  .margin({ left: 5 })
              }
              .margin({ left: 30 })
            }
            .width('100%')
            .padding(15)
            .backgroundColor('#f9f9f9')

            Divider()
          }
          .width('100%')
          .backgroundColor('#fff')
          .margin({ bottom: 10 })

          // 评论区域标题
          Column() {
            Text('评论')
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .alignSelf(ItemAlign.Start)
              .margin({ left: 15, bottom: 10 })
          }
          .width('100%')
          .padding({ top: 15 })

          // 评论列表
          Column() {
            // 评论1
            Row() {
              Image('/img/1.jpg')
                .width(40)
                .height(40)
                .borderRadius(20)
              Column() {
                Text('用户张三')
                  .fontSize(14)
                  .fontWeight(FontWeight.Bold)
                Text('风景真美！请问这是在哪里拍的？')
                  .fontSize(14)
                  .margin({ top: 3 })
                Row() {
                  Text('3分钟前')
                    .fontSize(12)
                    .fontColor('#999')
                  Text('回复')
                    .fontSize(12)
                    .fontColor('#4A90E2')
                    .margin({ left: 15 })
                  Text('👍 12')
                    .fontSize(12)
                    .fontColor('#999')
                    .margin({ left: 15 })
                }
                .margin({ top: 5 })
              }
              .margin({ left: 10 })
              .layoutWeight(1)
              .alignItems(HorizontalAlign.Start)
            }
            .width('100%')
            .padding(15)

            Divider().color('#f0f0f0')

            // 评论2
            Row() {
              Image('/img/5.jpg')
                .width(40)
                .height(40)
                .borderRadius(20)
              Column() {
                Text('摄影爱好者')
                  .fontSize(14)
                  .fontWeight(FontWeight.Bold)
                Text('拍的太好了！学习一下')
                  .fontSize(14)
                  .margin({ top: 3 })
                Row() {
                  Text('10分钟前')
                    .fontSize(12)
                    .fontColor('#999')
                  Text('回复')
                    .fontSize(12)
                    .fontColor('#4A90E2')
                    .margin({ left: 15 })
                  Text('👍 8')
                    .fontSize(12)
                    .fontColor('#999')
                    .margin({ left: 15 })
                }
                .margin({ top: 5 })
              }
              .margin({ left: 10 })
              .layoutWeight(1)
              .alignItems(HorizontalAlign.Start)
            }
            .width('100%')
            .padding(15)

            Divider().color('#f0f0f0')

            // 评论3
            Row() {
              Image('/img/7.png')
                .width(40)
                .height(40)
                .borderRadius(20)
              Column() {
                Text('旅行达人')
                  .fontSize(14)
                  .fontWeight(FontWeight.Bold)
                Text('这个地方我也去过，很棒！')
                  .fontSize(14)
                  .margin({ top: 3 })
                Row() {
                  Text('30分钟前')
                    .fontSize(12)
                    .fontColor('#999')
                  Text('回复')
                    .fontSize(12)
                    .fontColor('#4A90E2')
                    .margin({ left: 15 })
                  Text('👍 5')
                    .fontSize(12)
                    .fontColor('#999')
                    .margin({ left: 15 })
                }
                .margin({ top: 5 })
              }
              .margin({ left: 10 })
              .layoutWeight(1)
              .alignItems(HorizontalAlign.Start)
            }
            .width('100%')
            .padding(15)
          }
          .width('100%')
          .backgroundColor('#fff')
          .margin({ bottom: 60 })
        }
        .width('100%')
      }
      .width('100%')
      .layoutWeight(1)
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.Spring)

      // 底部评论输入栏
      Row() {
        TextInput({ placeholder: '写评论...' })
          .height(40)
          .backgroundColor('#f5f5f5')
          .borderRadius(20)
          .layoutWeight(1)
        Button('发送')
          .height(36)
          .fontSize(14)
          .backgroundColor('#4A90E2')
          .borderRadius(18)
          .margin({ left: 10 })
      }
      .width('100%')
      .padding(12)
      .backgroundColor('#fff')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f0f0f0')
  }
}