一、前言
第一个项目对于基本组件的使用还是比较全面的，所以通过这个项目可以较为清楚的使用这5个基础组件。
附上效果图供参考
笔者也是初学者，如有差错，望前辈指正。
二、通过Image组件来添加图片
首先，我们先对新建的文件进行处理
然后我们看官方文档中有两种添加模式，一种是本地，一种是在线。我们先看本地
Image($r('app.media.avatar8'))
$R()函数是一种省略的写法，用于构造一个ObjectRange对象。那么后面的'app.media.avatar8'是什么呢？
上图！
在resources里面找到该文件夹并且只需要文件名就能精确定位文件
然后我们在默认的垂直容器Culmon里写完这一行之后在预览器看看效果：
欸！会发现变得很大，并且模糊。那我们就用.width和.interpolation来调整
Row(){
Image($r('app.media.avatar8'))
.width(this.PicWidth)
.interpolation(ImageInterpolation.High)
}
好，经过调整图片就正常了，然后我们看下一个组件
三、通过Text组件来添加文字
这个就很简单，我们正常添加就好，然后调整一下字体大小和粗细
Text('图片宽度：')
.fontSize(20)
.fontWeight(FontWeight.Bold)
效果：
四、通过TextInput组件来添加输入框
我们在html中见过相关的组件，那么其中有些属性，鸿蒙开发也是适用的，比如：Placeholder
那我们先添加一个组件，定义一下大小和输入类型
TextInput({
placeholder:'请输入图片宽度',text:'100'
})
.width(100)
.type(InputType.Number)
添加完之后的效果如下：
然后我们如果想要让我们的图片跟随输入的数字变化，那我们应该怎么做呢？
官方文档中有一个事件：onChange(callback: (value: string) => void)
作用是：
输入内容发生变化时，触发该回调。
value：输入的文本内容。
触发该事件的条件：
1、键盘输入。
2、粘贴、剪切。
3、键盘快捷键Ctrl+v。
那我们用一下，在日志里面查看是否生效
.onChange(value => {
console.log(value);
})
是有效的，那么，我们怎样变化呢？
我们应该在开头去声明一个变量来记录一下这个宽度，然后在文本框事件中调用
@State PicWidth: number = 100
然后会发现，出现报错
提示字符串不能给数值用，那么我们就想办法转格式
this.PicWidth = parseInt(value)
然后图片的大小是固定值，所以我们需要更改一下
这样就可以让图片跟随文本框变化
但是！！！有一个致命问题！！
开始的时候，这个文本框数值的固定数值也会影响到图片，如果固定数值突破窗口会变得很糟糕。
那么我们还是要用之前声明的变量来锁定一下，然后数字转字符串
TextInput({
placeholder:'请输入图片宽度',text:this.PicWidth.toFixed(0)
})
注：toFixed()和toString()在数字转字符上无差别，看哪个顺眼用哪个
五、通过Button组件来改变图片大小
我们添加一个组件来缩小，调整大小，字体，然后复制一份来放大
Button('缩小')
.width(80)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button('放大')
.width(80)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button组件使用通用事件onClick(event: (event?: ClickEvent) => void)来完成图片的放缩，然后设置一个极限值，防止过小/过大还能使用。
Button('缩小')
.width(80)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
if (this.PicWidth>10) {
this.PicWidth -= 10
}
})
Button('放大')
.width(80)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
if (this.PicWidth<300) {
this.PicWidth += 10
}
})
完成后的效果如下：
六、通过Slider组件来改变图片大小
滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
其中的参数比较多，在官方文档中是这样的：
那我们选取一些有用的，value，min，max，step
Slider({
min:100,
max:300,
value:this.PicWidth,
step:10
})
然后使用特殊事件onChange(callback: (value: string) => void)，在调整一下大小和粗细
属性中有一个trackThickness，可以用来调整进度条粗细
Slider({
min:100,
max:300,
value:this.PicWidth,
step:10
})
.onChange(value => {
this.PicWidth = value
})
.trackThickness(10)
效果如下：
七、通过Column和Row来整理布局
从上面6步我们已经完成了大部分的功能，但是，并不美观。
我们先从图片开始调整
把图片放进水平容器中
Row这个布局有一个属性：justifyContent，设置子组件在水平方向上的对齐格式。就可以固定了
Row(){
Image($r('app.media.avatar8'))
.width(this.PicWidth)
}
.height(400)
.justifyContent(FlexAlign.Center)
然后修改文本以及文本框
将两个组件放到水平布局中，设置大小，设置居中
Row(){
//文字
Text('图片宽度：')
.fontSize(20)
.fontWeight(FontWeight.Bold)
//文本输入框
TextInput({
placeholder:'请输入图片宽度',text:this.PicWidth.toFixed(0)
})
.width(100)
.type(InputType.Number)
.onChange(value => {
this.PicWidth = parseInt(value)
})
}
.width('90%')
.justifyContent(FlexAlign.Center)
然后修改按钮
同样放进水平布局 然后用justifyContent的spaceEvenly分开
Row(){
//按钮
Button('缩小')
.width(80)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
if (this.PicWidth>10) {
this.PicWidth -= 10
}
})
Button('放大')
.width(80)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
if (this.PicWidth<300) {
this.PicWidth += 10
}
})
}
.width('80%')
.justifyContent(FlexAlign.SpaceEvenly)
最后，在整体的Column布局里，设置分割
我们看看结果：
就成功啦！
八、源码
@Entry
@Component
struct Index {
@State PicWidth: number = 100
build() {
Row() {
Column({space:20}) {
Row(){
Image($r('app.media.avatar8'))
.width(this.PicWidth)
.interpolation(ImageInterpolation.High)
}
.height(400)
.justifyContent(FlexAlign.Center)
Row(){
//文字
Text('图片宽度：')
.fontSize(20)
.fontWeight(FontWeight.Bold)
//文本输入框
TextInput({
placeholder:'请输入图片宽度',text:this.PicWidth.toFixed(0)
})
.width(100)
.type(InputType.Number)
.onChange(value => {
this.PicWidth = parseInt(value)
})
}
.width('90%')
.justifyContent(FlexAlign.Center)
Row(){
//按钮
Button('缩小')
.width(80)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
if (this.PicWidth>10) {
this.PicWidth -= 10
}
})
Button('放大')
.width(80)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
if (this.PicWidth<300) {
this.PicWidth += 10
}
})
}
.width('80%')
.justifyContent(FlexAlign.SpaceEvenly)
// 进度条
Slider({
min:100,
max:300,
value:this.PicWidth,
step:10
})
.onChange(value => {
this.PicWidth = value
})
.trackThickness(10)
}
.width('100%')
}
.height('100%')
}
}
推荐文章
发表评论