鸿蒙os学习5
input组件
input是交互式组件,用于接收用户数据。其类型可设置为日期、多选框和按钮等
<div class="container">
<input type="text"> Please enter the content </input>
</div>
输入框中的文字
<!-- xxx.hml -->
<div class="container">
<div class="div-button">
<dialog class="dialogClass" id="dialogId">
<div class="content">
<text>this is a dialog</text>
</div>
</dialog>
<input class="button" type="button" value="click" onclick="btnclick"></input>
</div>
<div class="content">
<input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
</div>
<div class="content">
<input type="date" class="flex" placeholder="Enter data"></input>
</div>
</div>
// xxx.js
export default {
btnclick(){
this.$element('dialogId').show()
},
}
单选框,对话框等类型
image组件
图片简单放置
<!-- index.hml -->
<div class="container">
<image style="height: 30%;" src="common/images/bg-tv.jpg"> </image>
</div
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
image{
width: 80%;
height: 500px;
border: 5px solid saddlebrown;
border-radius: 20px;
object-fit: contain;
match-text-direction:true;
}
图片存在文件夹中,根据路径引用,css文件通过设置width、height和object-fit属性定义图片的宽、高和缩放样式。
加载图片
加载图片
图片成功加载时触发complete事件,返回加载的图源尺寸。加载失败则触发error事件,打印图片加载失败。
<!-- index.hml -->
<div class="container" >
<div>
<image src="common/images/bg-tv.jpg" oncomplete="imageComplete(1)" onerror="imageError(1)"> </image>
</div>
<div>
<image src="common/images/bg-tv1.jpg" oncomplete="imageComplete(2)" onerror="imageError(2)"> </image>
</div>
</div>
js文件判断实现图片加载的正确
/* index.js */
import prompt from '@system.prompt';
export default {
imageComplete(i,e){
prompt.showToast({
message: "Image "+i+"'s width"+ e.width+"----Image "+i+"'s height"+e.height,
duration: 3000,
})
},
imageError(i,e){
setTimeout(()=>{
prompt.showToast({
message: "Failed to load image "+i+".",
duration: 3000,
})
},3000)
}
}
图片一段时间后消失
在本场景中,开发者长按图片后将慢慢隐藏图片,当完全隐藏后再重新显示原始图片。定时器setInterval每隔一段时间改变图片透明度,实现慢慢隐藏的效果,当透明度为0时清除定时器,设置透明度为1。
<!-- index.hml -->
<div class="page-container">
<div class="content">
<div class="image-container">
<image class="testimage" src="{{testuri}}" style="display:{{displaytype}};opacity:{{imageopacity}};" onclick="changedisplaytype" onlongpress="changeopacity"> </image>
</div>
<div class="text-container">
<text style="font-size: 37px;font-weight:bold;color:orange;text-align: center;width: 100%;">Touch and hold the image</text>
</div>
</div>
</div>
js文件,要搞清楚每一步要做什么
import prompt from '@system.prompt';
export default {
data: {
testuri: 'common/images/bg-tv.jpg',
imageopacity:1,
timer: null
},
changeopacity: function () {
prompt.showToast({
message: 'Touch and hold the image.'
})
var opval = this.imageopacity * 20
clearInterval(this.timer);
this.timer = setInterval(()=>{
opval--;
this.imageopacity = opval / 20``
if (opval===0) {
clearInterval(this.timer)
this.imageopacity = 1
}
},100);
}
}
toolbar组件
toolbar
<!-- xxx.hml -->
<div class="container">
<toolbar style="background-color: #F1F3F5;">
<toolbar-item value="item1"></toolbar-item>
<toolbar-item value="item2"></toolbar-item>
</toolbar>
</div>
item表示每个部分
设置样式
设置position样式控制Toolbar组件的位置,并设置子组件toolbar-item的字体颜色、大小及背景色。
/* xxx.css */
.container {
background-color: #F1F3F5;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
toolbar-item{
font-size: 35px;
}
.toolbarActive{
color: red;
background-color: #daebef;
}
绑定事件
分别给toolbar-item绑定单击事件和长按事件,单击后文本变红,长按时文本变蓝三级标题
<!-- xxx.hml -->
<div class="container">
<toolbar style="position: fixed;top: 50%;width: 100%;background-color: #F1F3F5;">
<toolbar-item value="item1" icon="common/images/1.png" style="color: {{itemColor}};" onclick="itemClick"></toolbar-item>
<toolbar-item value="item2" icon="common/images/2.png" style="color: {{itemColor}}"></toolbar-item>
<toolbar-item value="item3" icon="common/images/3.png" style="color: {{itemColor}}" onlongpress="itemLongPress"></toolbar-item>
</toolbar>
</div>
js实现功能
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
itemColor:'black'
},
itemClick(){
this.itemColor= "red";
prompt.showToast({duration:2000,message:'item click'});
},
itemLongPress(){
prompt.showToast({duration:2000,message:'item long press'});
this.itemColor= "blue";
},
}
遇到的问题,有软件配置问题,和编写一些hml的代码会报错,
还有icon大小不符合,https://iconmonstr.com/screen-size-decrease-lined-png/,网站可以生成大小可调节的图标。