立即注册
查看: 296|回复: 0

[鸿蒙OS技术分享] HarmonyOS方舟开发框架(ArkUI):基于JS扩展的Image组件开发指导

已绑定手机
发表于 2021-11-6 14:34:50 | 显示全部楼层 |阅读模式 来自 广东省深圳市
Image是图片组件,用来渲染展示图片。
1、创建Image组件
在pages/index目录下的hml文件中创建一个Image组件。
<!-- index.hml -->
<div class="container">
  <image src="common/images/bg-tv.jpg"> </image>
</div>
/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}

2、设置Image样式
通过设置width、height和object-fit属性定义图片的宽、高和缩放样式。

<!-- index.hml -->
<div class="container">
  <image src="common/images/bg-tv.jpg"> </image>
</div>
/* xxx.css */
.container {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color:#F1F3F5;
}
image{
  width: 80%;
  height: 500px;
  border: 5px solid saddlebrown;
  border-radius: 20px;
  object-fit: contain;
  match-text-direction:true;
}

3、显示多张图
定义for循环展示多张图片,同时定义option选择图片的展示方式,选择方式请参考object-fit类型说明。
<!-- index.hml -->
<div class="page-container">
  <list>
    <list-item class="item-container" for="{{list}}">
      <image class="testimage" src="{{url[$idx]}}" style="object-fit: {{fit}};"></image>
      <div class="text-container">
        <text style="font-size: 32px;color:#7b68ee;">image{{$idx}}</text>
        <text style="font-size: 23px;color: orange;font-style: italic;">content</text>
      </div>
    </list-item>
  </list>
  <div style="width: 100%;height:100px;justify-content: center;margin-top: 100px;flex-shrink: 0;">
    <select id="slt2" style="border: 3px solid orange;color: orange;font-size: 40px;width:300px;height:160px;">
      <option for="{{fit_list}}" value="{{$item}}" style="font-size: 36px;">{{$item}}</option>
    </select>
  </div>
</div>
......

4、加载图片
图片成功加载时触发complete事件,返回加载的图源尺寸。加载失败则触发error事件,打印图片加载失败。

<!-- index.hml -->
<div class="container" >
  <div>
    <image src="common/images/bg-tv.jpg"> </image>
  </div>
  <div>
    <image src="common/images/bg-tv1.jpg"> </image>
  </div>
</div>
/* xxx.css */
.container{
  flex-direction: column;
  justify-content: center;
  align-self: center;
  background-color: #F1F3F5;
}
.container div{
  margin-left: 10%;
  width: 80%;
  height: 300px;
  margin-bottom: 40px;
}
......

5、场景示例
在本场景中,开发者长按图片后将慢慢隐藏图片,当完全隐藏后再重新显示原始图片。定时器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}};"> </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>
......

完整内容请下载附件查看
2021-11-6 14:34 上传
文件大小:
1.32 MB
下载次数:
0
本地下载

16RD supports Paypal , Payment is calculated at the exchange rate of the day. Unable to download please contact 18902843661 (WhatsApp OR wechat number)

关于一牛网在微软浏览器(Microsoft Edge、IE浏览器)警报通告&解决方案!(无法下载直接更换浏览器即可)

*附件为作者发布,与本站无关,如有侵权,请联系客服删除

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

合作/建议

TEL: 19168984579

工作时间:
周一到周五 9:00-11:30 13:30-19:30
  • 扫一扫关注公众号
  • 扫一扫打开小程序
Copyright © 2013-2024 一牛网 版权所有 All Rights Reserved. 帮助中心|隐私声明|联系我们|手机版|粤ICP备13053961号|营业执照|EDI证
在本版发帖搜索
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表