更加详细图片【收缩】实操案例

图片案例总体实操

• 绘制如下效果图示例：完成图片收缩效果

二．整体布局

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

1.第一板块 图片

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

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

（1）新建一个项目文件

命名为ImagePage 

(2)导入需要的图片

添加图片的路径：在自己对应的路径下引入图片

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

并对图片进行相应的命名：icon.png

引入图片显示：

(3)使用方法：

①在build（）里面写内容，利用Row（）使图片在同一水平线上。

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

//利用线性布局

Row(){
Image($r('app.media.app_icon'))  //导入图片

 设置图片的宽度为状态变量的宽度
  .width(this.imageWidth)
}

注意：

在这里我们需要回到在ImagePage的方法中设置图片的宽度才可以使用this调用。

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

代码示例：

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

②利用justifyContent参数让其在水平方向居中对齐

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

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

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

2.第二板块 文本内容和输入框

①利用线性布局Row（）让文本和输入框在同一水平线上显示

代码示例：

Text('图片宽度')
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
TextInput({placeholder:'请输入宽度：',text:this.imageWidth+''}) //转换为字符串
  //注意：因为定义变量状态时给的值类型是 number，所以在这里一定要转换为字符串才可以输出。
  // 第一种可以通过 ＋ toString转换，第二种是直接+''即可达到效果。
  .width(150)
  .backgroundColor('#FFFFFF')
  .type(InputType.Number)

②利用布局属性justifyContent参数实现

.justifyContent(FlexAlign.SpaceBetween)

③给容器设置一定宽度

这里我们需要全部的宽度展示。

.width('100%')

④让其文本和输入框在水平方向的左右有间距

代码示例：

.width('100%')

.justifyContent(FlexAlign.SpaceBetween)

.padding({left:20,right:20})

SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

运行结果：

⑤给输入框的数字添加触发事件

能够在输入框内设置自己所需要的数值大小

代码示例：

.onChange(value =>{
  console.log(value)
  this.imageWidth= parseInt(value)
})

3.第三板块 水平分割线

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

Divider( ).width(' 90% ')

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

② 属性：

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

Color： 分割线颜色。strokeWidth：分割线宽度。lineCap：分割线的端点样式。

运行结果：

4.第四板块 设置按钮点击

4.1 添加按钮

给点击按钮设置一个Row（）  让其在水平线上显示

代码示例：

Row(){ //第四板块
Button('缩小')
  .width(80)
  .fontSize(20)
  //设置按钮点击
  Button('放大')
    .width(80)
    .fontSize(20)
}

• 如图所示我们需要设置两个按钮，并添加文字内容

Button('缩小')

• 给按钮设置宽度

.width(80)

• 给按钮中字体设置大小

.fontSize(20)

运行效果显示：

同理给放大按钮设置

代码示例：

Button('放大')
  .width(80)
  .fontSize(20)

运行结果：

4.2利用布局组件和属性完成效果

代码示例：

.width('100%')
.justifyContent(FlexAlign.SpaceAround)
.margin(30)

4.3 添加点击事件

绑定onClick事件来响应点击操作后的自定义行为

代码示例：

• 设置缩小按钮的点击事件，每一次点击可缩小10.

代码示例：

.onClick(()=>{
  if (this.imageWidth>=10) {
    this.imageWidth -=10
  }
})

• 设置放大按钮的点击事件，每次点击可增大10.

代码示例：

.onClick(()=>{
  if (this.imageWidth<=300) {
    this.imageWidth +=10
  }
})

第五板块 滚动条

5.1运用Slider（）组件实现滚动条

Slider({  //

})

代码运行显示：

5.2设置最大小值

利用Min：设置最小值，Max：设置最大值，利用step设置Slider滑动步长

   代码示例：

min:100,
max:300,
value:this.imageWidth,
step:10

5.3给滚动条设置属性

blockColor：设置滑块的颜色，showTips：设置滑动时是否显示百分比气泡提示。True为显示。

代码示例：

.showTips(true)
.blockColor('#36D')

运行效果：

5.4 给滚动条添加事件

onChange: 滚动条设置一个滑动时触发事件回调

代码示例：

.onChange((value) =>{
  console.log(value+'')
  this.imageWidth = value

添加完组件事件，即可实现我们想要的点击效果图了。