图片案例实操

• 综合实操图片查看案例
• 

（一）image组件

调用resource下面的图片资源写image组件，设置image组件样式代码如下：

  Image($r('app.media.app_icon'))
.width('100%')
.height(400)
 

（二）text组件

设置字体样式字体大小、字体样式等代码如下

Text('图片宽度')
  .fontSize(20)
  .fontWeight(FontWeight.Bold)

（三）input组件

设置输入框，里面placeholder设置默认效果、为输入框textinput添加样式宽度样式及其颜色样式，type类型规定文本框内只输入数字。

TextInput({ placeholder: '请输入宽度'})
  .width(150)
  .backgroundColor('#FFF')
  .type(InputType.Number)

（四）button组件

设置按钮，给按钮添加各样式

Button('缩小')
  .width(80)
  .fontSize(20)

（五）silder组件

Slider组件设置滑动条样式，里面设置滑动条所显示的最小值、最大值、步长

Slider({
  min:100,
  max:290,
  step:10
})

（六）布局组件

布局组件利用row水平方向排列，column垂直方向排列。在row水平排列方式内可以设置居中样式  .justifyContent(FlexAlign.Center)，也可以为其排列方式设置样式例如：宽度、高度、内边距、外边距等

Column() {
  Row() {
    Image($r('app.media.app_icon'))
  }
  .width('100%')
  .height(400)
  .justifyContent(FlexAlign.Center)

  Row() {
    Text('图片宽度')
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
    TextInput({ placeholder: '请输入宽度})
      .width(150)
      .backgroundColor('#FFF')
      .type(InputType.Number)
  }
  .width('100%')
  .justifyContent(FlexAlign.SpaceBetween)
  .padding({left:20,right:20})
//分隔线
  Divider().width('90%')
  Row(){
    Button('缩小')
      .width(80)
      .fontSize(20)
 
    Button('放大')
      .width(80)
      .fontSize(20)
  
  }
  .width('100%')
  .justifyContent(FlexAlign.SpaceAround)
  .margin(30)

  Slider({
    min:100,
    max:290,
    step:10
  })
    .width('90%')
    .showTips(true)
    .blockColor('#36D')
}
.width('100%')
.height('100%')

（七）添加触发事件

1.Image触发事件

添加image触发事件，在自定义组件里面，设置图片宽度这个变量对其赋值，在图片里面可以直接调用这个变量

@Entry
@Component
struct ImagePage {
  // 修饰符 变量名 变量类型 赋值
  @State imageWidth: number = 200

  build() {
    Column() {
      Row() {
        Image($r('app.media.app_icon'))
          // 调用imageWidth来引用触发点击事件
          .width(this.imageWidth)
      }
      .width('100%')
      .height(400)
      .justifyContent(FlexAlign.Center)

2.Textinput触发事件

添加在textinput输入框里面的触发样式.onchange来改变并且第一个if/else语句也是判断当打印在输入框里面的值是否小于100，小于一百则输出小于的值。第二个if/else语句如果值不为空的时候则输出值，当输出的值为空则输出0。并且this.imageWidth是为了随着输入框的输入使其图片的宽度随之改变，转换类型：text:this.imageWidth +''（原本在定义中imageWidth是number类型而在text里面则是string类型所以需要转换类型）

Row() {
  Text('图片宽度')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
  TextInput({ placeholder: '请输入宽度', text:this.imageWidth +'' })
    .width(150)
    .backgroundColor('#FFF')
    .type(InputType.Number)
    .onChange(value => {
      console.log("=====",value)
      if(parseInt(value)<100){
        this.imageWidth = 100
      }else {
        if (value != '') {
          console.log('-------',value)
          this.imageWidth = parseInt(value)
        } else {
          this.imageWidth = 0
        }
      }

    })
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding({left:20,right:20})

3.button的触发事件

设置.onclick的点击事件，来判断在大于等于10的范围是缩小并且是每次缩小10和如果小于等于290的时候每次放大10

Row(){
  Button('缩小')
    .width(80)
    .fontSize(20)
    .onClick(()=>{
      if(this.imageWidth>=10){
      this.imageWidth-=10
      }
    })
  Button('放大')
    .width(80)
    .fontSize(20)
    .onClick(()=>{
      if(this.imageWidth<=290){
        this.imageWidth+=10
      }
    })
}
.width('100%')
.justifyContent(FlexAlign.SpaceAround)
.margin(30)

4.Slider触发事件

设置slider触发事件，改变.onchange，当滑动条滑动时在后台输出这个值

Slider({
  min:100,
  max:290,
  value:this.imageWidth,
  step:10
})
  .width('90%')
  .showTips(true)
  .blockColor('#36D')
  .onChange((value)=>{
    console.log("111======",value)
    this.imageWidth=value
  })