- 综合实操图片查看案例
(一)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
})