【HarmonyOS NEXT】如何实现类似点9图的自动拉伸效果，背景长宽比自适应伸缩，四个角及右侧箭头保持不变

最新推荐文章于 2024-11-10 17:44:34 发布
最新推荐文章于 2024-11-10 17:44:34 发布
阅读量333 收藏 2
点赞数 2
文章标签： harmonyos
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mayism123/article/details/139476459
版权

【关键字】

自适应伸缩 / Image组件 / ResizableOptions

【问题描述】

使用borderImage来实现类似点9图的自动拉伸效果，但是borderImage只能设置四个角，如果类似聊天气泡的背景图如何自适应伸缩呢。

如下图实现背景长宽比自适应伸缩，四个角及右侧箭头保持不变。

cke_492.png

【解决方案】

Image组件有ResizableOptions属性，在图像拉伸时可调整大小的图像，

请参考文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image-0000001815927572#ZH-CN_TOPIC_0000001815927572__resizableoptions11

Mayism123
关注
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5918
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
鸿蒙HarmonyOS应用开发 | 深入解析 HarmonyOS Next 中的仓颉语言
一键难忘的博客
09-29 3120
仓颉语言是专为 HarmonyOS Next 设计的编程语言，它具有简洁、高效、易读易写等特点。仓颉语言借鉴了多种现代编程语言的优点，同时结合了 HarmonyOS Next 的特性，使得开发者能够更加高效地开发出高质量的应用。仓颉语言在 HarmonyOS Next 开发中具有重要的地位，它的简洁性、高效性和与 HarmonyOS Next 的深度融合，使得开发者能够更加轻松地开发出高质量的应用。随着 HarmonyOS Next 的不断发展，仓颉语言也将不断完善和壮大，为开发者带来更多的惊喜和便利。
HarmonyOS实战开发-边框或背景图片拉伸案例
2401_82546228的博客
05-14 1093
HarmonyOS上不支持.9资源文件进行安全拉伸。 作为替代方案，本案例中商城页面的促销标签边框使用同一张图片资源，通过设置图片的resizable属性，展示不同长度的促销标签效果。
设置 border 边框单侧样式 - HarmonyOSNext
survivorsfyh的博客
05-27 474
设置 border 边框单侧样式 - HarmonyOSNext
鸿蒙5.0开发进阶：边框或背景图片拉伸案例
HSMMQAQ的博客
10-07 792
本案例中商城页面的促销标签边框使用同一张图片资源，通过设置图片的resizable属性，展示不同长度的促销标签效果。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：图片边框设置）
m0_64420071的博客
03-01 1792
ArkTS声明式开发（通用属性：图片边框设置）
【HarmonyOS NEXT】Image控件加载图片缓存问题
Mayism123的博客
03-22 726
是否有方案能实现下述业务需求：图片在app全局使用缓存，在特定场景下实时从服务端获取，例如加载用户头像时，业务一旦将图片下线处理，图片找不到时需要恢复默认。图片有内存缓存机制，会统计到当前APP，缓存采用内置的LRU策略，新图片加载后，如果超过缓存上限，会删除最久未再次加载的缓存。也可以不开启全局缓存，使用ImageKnife给图片单独设置缓存，部分场景下使用Image组件来设置图片不缓存。目前ArkUI提供的Image组件原生能力，无法满足全局缓存、部分场景下不缓存的业务场景。
【HarmonyOS NEXT】如何实现图片局部拉伸
Mayism123的博客
05-16 519
适配iPad，图片需要局部拉伸处理，比如iOS的https://www.jianshu.com/p/84848c1b2d47。鸿蒙有指定图片可以局部拉伸处理的解决方案吗？ResizableOptions属性可以实现图片局部拉伸。图片 / 局部拉伸 / iOS。
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
10-19
本文主要介绍使用JavaScript结合jQuery库实现自动轮播图效果，其特点包括自适应屏幕宽度和支持手机触屏滑动操作。轮播图广泛应用于网页设计中，用于展示一系列的图片或内容，通常放置在网站的首页或广告位，以吸引...
HarmonyOS从基础到实战-高性能华为在线答题元服务
热门推荐
一键难忘的博客
11-21 13万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
基于HarmonyOS NEXT开发智能提醒助手
软贱开发攻城狮
06-30 1万+
随着智能设备的普及和物联网技术的飞速发展，人们对于智能化、个性化服务的需求日益增加，智能设备已经深入到我们生活的方方面面。在这个智能化的时代，一款能够实时、精准地提供信息提醒的智能助手，在内卷严重的当下，对于提升个人工作效率、优化生活质量显得尤为重要，这样的背景下，智能提醒助手应运而生，成为了人们生活中不可或缺的一部分。智能提醒助手不仅可以帮助用户管理时间、提醒重要事项，还能根据用户的习惯和需求提供个性化的服务。
【HarmonyOS NEXT】适配iPad体验，图片局部拉伸如何实现
Mayism123的博客
03-08 620
图片局部拉伸的iOS效果，例如：https://www.jianshu.com/p/84848c1b2d47的处理方式。适配 / iPad / 图片 / 局部拉伸 / ResizableOptions。当前已有图片ResizableOptions拉伸能力。现在鸿蒙有指定图片可以局部拉伸处理的方案吗？适配iPad体验 ，图片局部拉伸如何实现？
鸿蒙HarmonyOS NEXT开发：Image（基础组件）
shudaoshanBBQ的博客
08-15 2313
Image为图片组件，常用于在应用中显示图片。
【HarmonyOS NEXT】设置背景图如何让背景图四周不拉伸，中间拉伸
Mayism123的博客
06-07 381
因为Text组件的文本内容长度不定，可以有一行，也可以有三行，希望背景图可以做到四周不拉伸，中间区域拉伸，用于达到图片包裹文字的效果，也就是下面的效果（下图为单行文本，多行也为包裹效果）API 11的row.backgroundImage设置背景图不支持四周不拉伸，只拉伸中间区域的效果，Image组件新增了resizable属性设置图像拉伸时可调整大小的图像选项。给一个row设置了背景图，但是需要背景图四周不拉伸，只拉伸中间区域，目前没有找到合适的API，请问有相关的API吗？
基于ArkUI实现类似.9图的拉伸能力
hongxiaomeng的博客
07-23 427
解耦与模块化：鸿蒙平台上的服务注册与查找机制
陆业聪
11-06 827
本文探讨了在鸿蒙平台上实现服务注册和查找机制，借鉴Java的ServiceLoader模式。通过定义服务接口和实现类，展示了如何动态加载服务，实现基座与第三方SDK的解耦，并分析了两种机制的优缺点。
鸿蒙进阶篇-剩余和展开、简单和复杂类型
2401_88463044的博客
11-09 1405
以下是关于“剩余和展开”“简单和复杂类型”概念的文章摘要： “剩余”参数使函数能够接收不定数量的额外参数，并以数组形式处理，增加了函数参数的灵活性。“展开”常见于数组或对象操作，如将数组元素或对象属性展开用于特定场景。 “简单类型”为基本的数据类型，如整数、浮点数等，具有固定大小和简单操作。“复杂类型”如数组、对象、类等，由多种简单或复杂类型组合而成，结构丰富，操作较复杂。 这些概念在编程中各自发挥重要作用，影响着数据处理和程序结构的设计。
HarmonyOS一次开发多端部署三巨头之功能级一多开发和工程级一多开发
最新发布
2301_79624024的博客
11-10 967
HarmonyOS一次开发多段部署之功能级一多开发和工程级一多开发
鸿蒙next选择 Flutter 开发跨平台应用的原因
小淼淼的博客
11-06 1859
鸿蒙选择 Flutter 作为主要的跨平台应用开发框架，体现了其在技术、生态和开发者支持上的战略选择。Flutter 提供了高效的开发体验、出色的性能和广泛的跨平台支持，使得鸿蒙能够迅速构建多设备、多平台的应用生态。此外，Flutter 的易于集成与鸿蒙系统的创新特性，能够为开发者提供更多的灵活性和可能性，从而推动鸿蒙生态的发展。通过采用 Flutter，鸿蒙系统不仅能够支持移动端设备，还能够扩展到更多的智能硬件平台，进一步加强了其全场景智能生态的建设。
[HarmonyOS NEXT] arkts 实现一个带动画的圆角六边形环形进度条
09-10
在HarmonyOS NEXT (鸿蒙操作系统) 中，arkts 提供了丰富的组件和样式支持，包括动画效果和自定义控件。为了实现一个带有动画的圆角六边形环形进度条，你可以按照以下步骤操作： 1. **引入所需库**：首先，你需要导入相关的UI库和ArkUI组件，如`ArcProgress` 和 `RingProgress`，它们可能包含内置的动画功能。 ```java import com.harmonyos.arkui.widget.ArcProgress; import com.harmonyos.arkui.widget.RingProgress; ``` 2. **创建六边形环形进度条**：使用`RingProgress` 组件，设置其形状为六边形，并可以调整圆角属性以增加视觉吸引力。 ```java RingProgress ringProgress = new RingProgress(); ringProgress.setShape(RingProgress.Shape.HEXAGON); ringProgress.setBorderRadius(10); // 调整圆角大小 ``` 3. **设置进度**：通过`setProgress` 方法设定当前进度值，它会自动触发动画更新。 ```java ringProgress.setProgress(progressValue); ``` 4. **启用动画**：有些`RingProgress` 的子类可能会有内置动画，比如`ArcProgress`，如果需要，可以开启动画效果。 ```java ringProgress.setShowIndeterminateAnimation(true); // 如果需要无限循环动画 ringProgress.setProgressUpdateDuration(500); // 设置动画持续时间 ``` 5. **添加到布局中**：将环形进度条添加到你的视图层级结构中，如`LinearLayout`, `NestedLayout` 或者 ArkUI 的自适应布局上。 ```java rootView.addView(ringProgress); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值