各位朋友们大家好! 本想再摸鱼几天, 然后一看今天已经28号了, 真实“锤死梦中惊坐起”啊! 时间太快了,今天遍接着这篇博文简单的说一下本人今年的大体博文知识更新计划,有兴趣的朋友记得关于一下哦!
24年若城将从以上四个方向进行博文更新! 废话不多说啦, 龙年就从画一个龙来开始本年的幸福之旅吧! let’s go!!!
已将素材文件上传至oss 服务器中,链接如下
素材一 | 素材二 |
---|---|
http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dino.gif | http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dinofx.gif |
本次的demo 开发因为我们使用的是http链接来访问的图片地址, 因此需要申请权限,步骤如下:
entry
-> src
-> main
-> module.json5
module.json5
中添加网络权限的申请"requestPermissions": [
{
"name": "ohos.permission.INTERNET",
}
]
@State imgSrc: string = 'http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dino.gif'
@State hasgit:boolean=false
@State hasMp:boolean=false
@State img2Src:string ='http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dinofx.gif'
变量解释
imgSrc
和img2Src
是图片展示的地址
hasgit
和hasMp
用于判断对应图片的展示与隐藏
Row(){
Column({space:5}){
Row(){
Button('清空画布').onClick(()=>{
this.hasgit=false
this.hasMp=false
})
Button('龙年暴富->画龙').onClick(()=>{
this.hasgit=true
this.hasMp=false
})
}
Button('“码”上“鸿”福到->画龙').onClick(()=>{
this.hasgit=false
this.hasMp=true
})
}
}.padding(10)
代码中设置三个 button
按钮 第一个button 主要用于清空画布, 第二个和第三个按钮用于展示对应的图片
通过按钮来设置 hasgit
和 hasMp
两个变量的状态
Row(){
if (this.hasgit){
Image(this.imgSrc).width('100%').height('100%')
}else if(this.hasMp){
Image(this.img2Src).width('100%').height('100%')
}
}
.layoutWeight(1)
通过if … else if … 来控制不同图片的展示与隐藏
layoutWeight
属性讲解父容器尺寸确定时,设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配,忽略元素本身尺寸设置,表示自适应占满剩余空间。
注意
layoutWeight
仅在Row/Column/Flex
布局中生效。可选值为大于等于0的数字,或者可以转换为数字的字符串。
@Entry
@Component
struct Index {
@State imgSrc: string = 'http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dino.gif'
@State hasgit:boolean=false
@State hasMp:boolean=false
@State img2Src:string ='http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dinofx.gif'
build() {
Row() {
Column() {
Row(){
Column({space:5}){
Row(){
Button('清空画布').onClick(()=>{
this.hasgit=false
this.hasMp=false
})
Button('龙年暴富->画龙').onClick(()=>{
this.hasgit=true
this.hasMp=false
})
}
Button('“码”上“鸿”福到->画龙').onClick(()=>{
this.hasgit=false
this.hasMp=true
})
}
}.padding(10)
Row(){
if (this.hasgit){
Image(this.imgSrc).width('100%').height('100%')
}else if(this.hasMp){
Image(this.img2Src).width('100%').height('100%')
}
}
.layoutWeight(1)
}
.height('100%')
.width('100%')
}
.width('100%')
.height('100%')
}
}
Image 组件的详细使用及基本案例 ,会在3月份进行逐渐更新博文的呦, 本次先简单的介绍一下 Image 组件
harmonyos 的Image 组件使用起来还是比较顺手的, 其中包含了多个参数以及事件方法, 可以尝试的去跟着本博文的教程体验一下的呦