【画龙迎春】 HarmonyOS Image 组件的基本使用之画龙迎春，“码”上“鸿”福到

前言

各位朋友们大家好！本想再摸鱼几天，然后一看今天已经28号了，真实“锤死梦中惊坐起”啊！时间太快了，今天遍接着这篇博文简单的说一下本人今年的大体博文知识更新计划，有兴趣的朋友记得关于一下哦！

鸿蒙从入门到实战
软考高项知识点分享
技术测评
粉丝福利【送书大爆发】

24年若城将从以上四个方向进行博文更新！废话不多说啦，龙年就从画一个龙来开始本年的幸福之旅吧！ let’s go!!!

效果展示

素材

已将素材文件上传至oss 服务器中，链接如下

素材一	素材二
http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dino.gif	http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dinofx.gif

代码开发

申请权限

本次的demo 开发因为我们使用的是http链接来访问的图片地址，因此需要申请权限，步骤如下：

找到路劲 entry -> src -> main -> module.json5
在module.json5中添加网络权限的申请

代码语言：javascript复制

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET",
  }
]

设置变量

代码语言：javascript复制

  @State imgSrc: string = 'http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dino.gif'
  @State hasgit:boolean=false
  @State hasMp:boolean=false
  @State img2Src:string ='http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dinofx.gif'

变量解释

imgSrc和img2Src是图片展示的地址 hasgit和hasMp用于判断对应图片的展示与隐藏

按钮设置

代码语言：javascript复制

 Row(){
            Column({space:5}){
             Row(){
               Button('清空画布').onClick(()=>{
                 this.hasgit=false
                 this.hasMp=false
               })
               Button('龙年暴富->画龙').onClick(()=>{
                 this.hasgit=true
                 this.hasMp=false
               })
             }
              Button('“码”上“鸿”福到->画龙').onClick(()=>{
                this.hasgit=false
                this.hasMp=true
              })
            }

          }.padding(10)

代码中设置三个 button按钮第一个button 主要用于清空画布，第二个和第三个按钮用于展示对应的图片通过按钮来设置 hasgit和 hasMp两个变量的状态

图片展示

代码语言：javascript复制

        Row(){
          if (this.hasgit){
             Image(this.imgSrc).width('100%').height('100%')

          }else if(this.hasMp){
            Image(this.img2Src).width('100%').height('100%')

          }
        }
        .layoutWeight(1)

通过if … else if … 来控制不同图片的展示与隐藏

`layoutWeight`属性讲解

父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。

注意 layoutWeight 仅在Row/Column/Flex布局中生效。可选值为大于等于0的数字，或者可以转换为数字的字符串。

完整代码

代码语言：javascript复制

@Entry
@Component
struct Index {
  @State imgSrc: string = 'http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dino.gif'
  @State hasgit:boolean=false
  @State hasMp:boolean=false
  @State img2Src:string ='http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dinofx.gif'

  build() {
    Row() {
      Column() {
          Row(){
            Column({space:5}){
             Row(){
               Button('清空画布').onClick(()=>{
                 this.hasgit=false
                 this.hasMp=false
               })
               Button('龙年暴富->画龙').onClick(()=>{
                 this.hasgit=true
                 this.hasMp=false
               })
             }
              Button('“码”上“鸿”福到->画龙').onClick(()=>{
                this.hasgit=false
                this.hasMp=true
              })
            }

          }.padding(10)
        Row(){
          if (this.hasgit){
             Image(this.imgSrc).width('100%').height('100%')

          }else if(this.hasMp){
            Image(this.img2Src).width('100%').height('100%')

          }
        }
        .layoutWeight(1)
      }
      .height('100%')
      .width('100%')
    }
    .width('100%')
    .height('100%')
  }
}