鸿蒙开发 【图片收缩】绘制页面

运用基础组件绘制以下页面示例：

一．原图如下：

二．当我们需要绘制某个页面时，我们一定要整体布局，有个大概的整体构思，关于以上这个页面，我主要划分为五个板块。

1.首先能显而易见的知道第一板块就是一张图片。

新建一个项目文件，命名为ImagePage。

添加图片的路径：

D:\develop\MyApplication1\entry\src\main\resources\base\media

@State表示组件中的状态变量，状态变量变化会触发UI刷新。

在方法中引入@State 设置图片的宽度

Row容器主轴为水平方向，Column容器主轴为垂直方向。

//第一板块，利用线性布局，Row/Column

Row(){
Image($r('app.media.app_icon'))
  .width(this.imageWidth)
}

//设置Row容器的宽度以及高度
.width('100%')
.height(400)
.justifyContent(FlexAlign.Center)

// 通过justifyContent参数设置在主轴方向的对齐方式

• FlexAlign.Start（默认值）：子组件在主轴方向起始端对齐， 第一个子组件与父元素边沿对齐，其他元素与前一个元素对齐。
• FlexAlign.Center：子组件在主轴方向居中对齐。
• FlexAlign.End：子组件在主轴方向终点端对齐, 最后一个子组件与父元素边沿对齐，其他元素与后一个元素对齐。
• FlexAlign.SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐。
• FlexAlign.SpaceAround：Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件到主轴起始端的距离和最后一个子组件到主轴终点端的距离是相邻元素之间距离的一半。
• FlexAlign.SpaceEvenly：Flex主轴方向元素等间距布局，相邻子组件之间的间距、第一个子组件与主轴起始端的间距、最后一个子组件到主轴终点端的间距均相等。

若未设置该参数，则效果图为：

设置以后：则会居中显示。

2 .第二板块主要由文本内容和文本输入显示。利用Text文本显示和TextInput文本输入组件来实现页面。

①Text（‘ 文本内容’）

②TextInput为单行输入框、TextArea为多行输入框

设置无输入时的提示文本。

TextInput({placeholder:'我是提示文本'})

设置输入框当前的文本内容。

TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})

设置输入框类型

TextInput有5种可选类型，分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式。通过type属性进行设置：

基本输入模式（默认类型）

TextInput()

  .type(InputType.Normal)

密码输入模式

TextInput()

  .type(InputType.Password)

③TextInput（）添加事件

文本框主要用于获取用户输入的信息，把信息处理成数据进行上传，绑定onChange事件可以获取输入框内改变的内容。用户也可以使用通用事件来进行相应的交互操作。

//第二板块

Row(){
  Text('图片宽度')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
  TextInput({placeholder:'请输入宽度：',text:this.imageWidth+''}) //转换为字符串

//注意：因为定义变量状态时给的值类型是 number，所以在这里一定要转换为字符串才可以输出。

// 第一种可以通过 ＋ toString转换，第二种是直接+''即可达到效果。

.width(150)
    .backgroundColor('#FFFFFF')
    .type(InputType.Number)

//onChange事件可以获取输入框内改变的内容
    .onChange(value =>{
      console.log(value)
      this.imageWidth= parseInt(value)
    })
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding({left:20,right:20})

3. 第三板块，很清楚的知道，这是一个水平分隔线。运用Divider组件完成效果

//第三板块

Divider( ).width(' 90% ')

① Divider( ) 提供分隔器组件，分隔不同内容块/内容元素。

② 属性：

Vertical ：使用水平分割线还是垂直分割线。false：水平分割线；true：垂直分割线。默认值：false。

Color： 分割线颜色。默认值：'#33182431'

strokeWidth：分割线宽度。默认值：1，单位：vp。

lineCap：分割线的端点样式。默认值：LineCapStyle.Butt

4. 第四板块，这是两个按钮，即就要运用Button组件来实现。

//第四板块

Row(){
Button('缩小')
  .width(80)
  .fontSize(20)
  //设置按钮点击效果
  .onClick(()=>{
    if (this.imageWidth>=10) {
      this.imageWidth -=10
    }
  })
  Button('放大')
    .width(80)
    .fontSize(20)
    .onClick(()=>{
      if (this.imageWidth<=300) {
        this.imageWidth +=10
      }
    })
}.width('100%')
.justifyContent(FlexAlign.SpaceAround)
.margin(30)

5， 第五板块，这是一个滑动条 可以运用组件Slider来实现。

//第五板块
Slider({ 
  min:100,
  max:300,
  value:this.imageWidth ,
  step:10
})
  .showTips(true)
  .blockColor('#36D')
  .onChange((value) =>{
    console.log(value+'')
    this.imageWidth = value
  })

① Slider：滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

② 参数：

1. Value：当前进度值，默认值：参数min
2. Min：设置最小值，默认值：0
3. Max：设置最大值，默认值：100
4. Step：设置Slider滑动步长。默认值：1，取值范围：[0.01, max]
5. Style：参数类型：SliderStyle，设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSet
6. SliderStyle枚举说明:

OutSet：滑块在滑轨上。

InSet：滑块在滑轨内。

1. Direction：参数类型：Axis, 设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal.
2. Reverse : 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。默认值：false

③ 属性：

blockColor：设置滑块的颜色。

trackColor：设置滑轨的背景颜色。

selectedColor：设置滑轨的已滑动部分颜色。

showSteps：设置当前是否显示步长刻度值。默认值：false

showTips：设置滑动时是否显示百分比气泡提示。默认值：false

trackThickness：参数类型：Length，设置滑轨的粗细。

默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp。

三．完整代码：

@Entry
@Component
struct  ImagePage {
  @State  imageWidth : number=200
  build(){
    Column(){
      Row(){ //第一板块
      Image($r('app.media.app_icon'))
        .width(this.imageWidth)
      }
      .width('100%')
      .height(400)
      .justifyContent(FlexAlign.Center)
      Row(){ //第二板块
        Text('图片宽度')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        TextInput({placeholder:'请输入宽度：',text:this.imageWidth+''}) //转换为字符串
          //注意：因为定义变量状态时给的值类型是 number，所以在这里一定要转换为字符串才可以输出。
          // 第一种可以通过 ＋ toString转换，第二种是直接+''即可达到效果。
          .width(150)
          .backgroundColor('#FFFFFF')
          .type(InputType.Number)
          .onChange(value =>{
            console.log(value)
            this.imageWidth= parseInt(value)
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({left:20,right:20})

      Divider().width('90%') //第三板块
      Row(){ //第四板块
      Button('缩小')
        .width(80)
        .fontSize(20)
        //设置按钮点击
        .onClick(()=>{
          if (this.imageWidth>=10) {
            this.imageWidth -=10
          }
        })
        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(()=>{
            if (this.imageWidth<=300) {
              this.imageWidth +=10
            }
          })
      }.width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .margin(30)

      Slider({  //第五板块
        min:100,
        max:300,
        value:this.imageWidth,
        step:10
      })
        .showTips(true)
        .blockColor('#36D')
        .onChange((value) =>{
          console.log(value+'')
          this.imageWidth = value

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

完整代码运行效果：