基于原生能力的组件封装
基于原生能力的组件如何封装
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
基于原生的水印添加能力
559浏览 • 1回复 待解决
基于原生能力的网络状态感知
356浏览 • 1回复 待解决
基于原生能力的跨应用跳转
653浏览 • 1回复 待解决
基于原生能力的网络加载性能分析
586浏览 • 1回复 待解决
基于原生能力实现图文混排
291浏览 • 1回复 待解决
基于原生能力的设备唯一ID方案
587浏览 • 1回复 待解决
基于ArkUI现有能力实现自定义弹窗封装方案
611浏览 • 1回复 待解决
基于原生的应用主题开发
350浏览 • 1回复 待解决
基于TLSSocket的通信能力
312浏览 • 1回复 待解决
基于原生的跨模块资源访问
519浏览 • 1回复 待解决
基于原生实现高级显示效果
460浏览 • 1回复 待解决
HarmonyOS原生分享能力的使用
463浏览 • 1回复 待解决
基于@ohos/axios的网络请求能力
307浏览 • 1回复 待解决
有基于HarmonyOS本身提供的socket api而封装的成熟的网络组件库
1610浏览 • 1回复 待解决
有没有基于socket封装成熟的网络库?
751浏览 • 1回复 待解决
基于ArkUI实现类似.9图的拉伸能力
350浏览 • 1回复 待解决
HarmonyOS 系统原生能力是否支持PDF预览
388浏览 • 1回复 待解决
HarmonyOS fastjSON 的替代三方库或者原生能力
337浏览 • 1回复 待解决
原生代码是不是只能基于HarmonyOS框架重新开发?
169浏览 • 1回复 待解决
HarmonyOS 公共组件封装
238浏览 • 1回复 待解决
基于滚动组件的手势处理
292浏览 • 1回复 待解决
基于Progress组件的进度条
358浏览 • 1回复 待解决
HarmonyOS 有RN Video组件的封装吗?
184浏览 • 1回复 待解决
HarmonyOS 同一个功能既有原生能力也有三方库方案,优先使用原生的还是三方库的?
81浏览 • 1回复 待解决
如何在父组件中调用子组件封装的方法
1299浏览 • 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组件绑定动态属性方法。