基于原生能力的组件封装
基于原生能力的组件如何封装
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
基于原生的水印添加能力
603浏览 • 1回复 待解决
基于原生能力的跨应用跳转
681浏览 • 1回复 待解决
基于原生能力的网络状态感知
392浏览 • 1回复 待解决
基于原生能力的网络加载性能分析
609浏览 • 1回复 待解决
基于原生能力实现图文混排
319浏览 • 1回复 待解决
基于原生能力的设备唯一ID方案
608浏览 • 1回复 待解决
基于ArkUI现有能力实现自定义弹窗封装方案
642浏览 • 1回复 待解决
基于原生的应用主题开发
380浏览 • 1回复 待解决
基于TLSSocket的通信能力
331浏览 • 1回复 待解决
基于原生的跨模块资源访问
533浏览 • 1回复 待解决
HarmonyOS原生分享能力的使用
512浏览 • 1回复 待解决
基于原生实现高级显示效果
478浏览 • 1回复 待解决
基于@ohos/axios的网络请求能力
344浏览 • 1回复 待解决
HarmonyOS jsbridge能力暴露封装案例
34浏览 • 1回复 待解决
有基于HarmonyOS本身提供的socket api而封装的成熟的网络组件库
1624浏览 • 1回复 待解决
有没有基于socket封装成熟的网络库?
761浏览 • 1回复 待解决
基于ArkUI实现类似.9图的拉伸能力
373浏览 • 1回复 待解决
HarmonyOS 系统原生能力是否支持PDF预览
412浏览 • 1回复 待解决
HarmonyOS fastjSON 的替代三方库或者原生能力
355浏览 • 1回复 待解决
原生代码是不是只能基于HarmonyOS框架重新开发?
198浏览 • 1回复 待解决
HarmonyOS 公共组件封装
248浏览 • 1回复 待解决
基于滚动组件的手势处理
316浏览 • 1回复 待解决
HarmonyOS 有RN Video组件的封装吗?
225浏览 • 1回复 待解决
基于Progress组件的进度条
380浏览 • 1回复 待解决
怎样实现Web组件的下载能力?
297浏览 • 1回复 待解决
在开发应用程序时,我们经常需要使用各种组件来构建和展示用户界面。然而,直接使用原生的组件可能会导致代码冗余和难以维护。为了解决这个问题,基于原生能力的组件封装,将使我们更高效地开发应用程序。
场景一:全局扩展和全局样式使用
在应用开发中,我们通常需要使用相同功能和样式的ArkUI组件,例如购物页面中会使用相同样式的Button按钮、Text显示文字,我们常用的方法是抽取公共样式或者封装成一个自定义组件到公共组件库中以减少冗余代码。
方案
ArkUI提供attributeModifier动态属性设置。
核心代码
1. 自定义class实现Button的AttributeModifier接口,通过传入instance参数类型ButtonAttribute识别组件为Button类型,基于instance设置属性值,Button组件的该属性即生效。
2. 自定义class实现Row组件的AttributeModifier接口,通过传入instance参数类型RowAttribute识别组件为Row类型,基于instance设置属性值,Row组件的该属性即生效。
3. 自定义组件对应modifier,并且组件基于attributeModifier绑定对应的属性方法。
场景二:全局生命周期监听
在页面中播放视频时,将App切换至后台或者关闭屏幕,此时视频会暂停播放,切换到前台想恢复继续播放。
方案
方案一:observer.on('navDestinationUpdate')提供UI组件行为变化的无感监听能力。
方案二:通过字段传递生命周期。
方案三:组件可见区域变化事件去监听变化。
核心代码
方案一:@ohos.arkui.observer (无感监听),通过NavDestinationInfo,获取NavDestination组件信息,来判断当前组件状态,以此来控制视频的播放。
方案二:子组件的生命周期无法感应前后的切换,通过onPageShow生命周期来感知页面状态,通过变量传递来通知子组件执行相应的操作。
方案三:onVisibleAreaChange:提供了判断组件是否完全或部分显示在屏幕中的能力,通过这个来感知该组件显示隐藏状态。
场景三:组件级Storage
银行转账界面,从首页进入转账界面,在此页面执行转账100操作,跳转至账户信息页面显示账户余额为0 。 返回到转账界面之后,变量UI同步刷新显示账户余额0。
方案
可以通过传递不同的LocalStorage实例给自定义组件,从而实现在Navigation跳转到不同的页面时,绑定不同的LocalStorage实例,显示对应绑定的值。
核心代码
1. 转账首页构造LocalStorage实例(余额:balance)。
2. 子组件基于@LocalStorageLink变量装饰器与LocalStorage中的'balance'属性建立双向绑定,子组件即可使用balance属性。
3. 账户显示页面使用。
场景四:自定义组件属性的扩展和传递
应用中可基于自定义modifier扩展属性,基于@link传递属性值。如在选购商品时页面,选中之前和选中之后的样式表现不同。
方案
商品页面的文本组件Text并没有设置边框、背景颜色属性。通过自定义modifier为文本组件扩展设置边框、背景颜色、边框颜色属性。选择颜色、尺寸时,选择前后会表现不同的样式。
核心代码
自定义modifier继承CommonModifier ,并且定义setGroup2设置组件加载时的属性样式,定义setGroup1设置组件点击触发时的属性样式。
2. 自定义modifier内设置width、height值,组件onClick事件内调用setGroup1,且Modifier使用as作为类型断言。
3. 基于@link双向数据绑定,text组件绑定动态属性方法。