鸿蒙：图片案例

效果图：

整体代码：（看不懂，下面有具体步骤；）

所用知识点：image，row，Colun，button，text，TextInput，onClick，onChange，slider

@Entry
@Component
struct image {
  //设置图片宽度
  @State imageWidth:number=120
  build() {
    //页面整体垂直
    Column(){
      //文本部分水平布局
      Row(){
        //引入图片
        Image($r('app.media.app_icon'))
          // 引入设置图片宽度
          .width(this.imageWidth)
      }
      .width('100%')
      // 图片居中
      .justifyContent(FlexAlign.Center)
      .height(300)
      Row(){
        Text('图片宽度')
        // 输入框：输入框当前文本内容：text：引用图片宽度
        TextInput({placeholder:'提示',text:this.imageWidth+''})
          .width(220)
          .backgroundColor(Color.White)
          // 事件监听，监听图片宽度数值变化
          .onChange(value=>{
            //如果，图片宽度数值不为空：随图片大小数值变化
            if(value!==''){
              this.imageWidth =parseInt(value)
            }
            //图片数值为空：文本输出0
            else {
              this.imageWidth=0
            }
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .padding({left:10})
      //按钮水平布局
      Row(){
        Button('缩小')
          //样式设计
          .width(90).fontSize(20).fontWeight(FontWeight.Bold)
          // 点击事件：点击按钮图片变小
          .onClick(()=>{
            //如果图片小于300加10
            if(this.imageWidth>10){
              this.imageWidth-=10
            }
            // 如果这个图片宽度小于10之后再点击不在变小
            else {
              this.imageWidth=0
            }
          })
        Button('放大')
          .width(90).fontSize(20).fontWeight(FontWeight.Bold)
          .onClick(()=>{
            //如果图片小于300加10
            if(this.imageWidth<300){
              this.imageWidth+=10
            }
             // 如果到300，图片将不在变化
            else {
              this.imageWidth=300
            }
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .margin({top:30})
      //进度条
      Slider({
        max:300,//进度条最大长度
        min:10,//进度条最小长度
        step:10,//步长
        value:this.imageWidth//进度条数值
      }).width('90%')
        .showTips(true)//是否显示百分比
        //监听事件，监听图片数值，随图片数值变化
        .onChange(value=>{
          this.imageWidth=value
        })
    }
  }
}

以下是具体步骤：

• 构建框架

@Entry
@Component
struct image {
  build() {
    //页面整体垂直
    Column(){

//图片水平

Row（）{



}
      //文本部分水平布局
      Row(){

      }
      //按钮水平布局
      Row(){

      }
      //进度条
      Slider({

      })
    }
  }
}

• 引入图片，并设置样式（新增了图片及样式）

@Entry
@Component
struct image {
  @State imageWidth:number=120
  build() {
    //页面整体垂直
    Column(){
      //文本部分水平布局
      Row(){
        Image($r('app.media.app_icon'))
          .width(this.imageWidth)
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .height(300)

}

}

  

• 文本样式
• 

@Entry
@Component
struct image {
  build() {
    //页面整体垂直
    Column(){
      //文本部分水平布局
      Row(){
        Text('图片宽度')
        // 输入框：输入框当前文本内容：text：引用图片宽度
        TextInput({placeholder:'提示',text:this.imageWidth+''})
          .width(220)
          .backgroundColor(Color.White)
          // 事件监听，监听图片宽度数值变化
          .onChange(value=>{
            //如果，图片宽度数值不为空：随图片大小数值变化
            if(value!==''){
              this.imageWidth =parseInt(value)
            }
            //图片数值为空：文本输出0
            else {
              this.imageWidth=0
            }
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .padding({left:10})

• 按钮样式
• 

Row(){
  Button('缩小')
    //样式设计
    .width(90).fontSize(20).fontWeight(FontWeight.Bold)
    // 点击事件：点击按钮图片变小
    .onClick(()=>{
      //如果图片小于300加10
      if(this.imageWidth>10){
        this.imageWidth-=10
      }
      // 如果这个图片宽度小于10之后再点击不在变小
      else {
        this.imageWidth=0
      }
    })
  Button('放大')
    .width(90).fontSize(20).fontWeight(FontWeight.Bold)
    .onClick(()=>{
      //如果图片小于300加10
      if(this.imageWidth<300){
        this.imageWidth+=10
      }
       // 如果到300，图片将不在变化
      else {
        this.imageWidth=300
      }
    })
}
.width('100%')
.justifyContent(FlexAlign.SpaceAround)
.margin({top:30})

• 进度条样式
• 

//进度条
Slider({
  max:300,//进度条最大长度
  min:10,//进度条最小长度
  step:10,//步长
  value:this.imageWidth//进度条数值
}).width('90%')
  .showTips(true)//是否显示百分比
  //监听事件，监听图片数值，随图片数值变化
  .onChange(value=>{
    this.imageWidth=value
  })