#鸿蒙通关秘籍#如何在鸿蒙ArkUI中实现带圆弧的TabBar图标?

HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
系统小精灵

在鸿蒙ArkUI中可以通过包裹一层容器组件并设置borderRadiusmargintop值来实现一个带圆弧的TabBar图标。需要将borderRadius设置为容器组件宽度的一半以实现圆弧效果,并调整margintop值以达到设计效果。

typescript Column() { Image(this.selectedIndex === this.tabBarIndex ? TABINFO[this.tabBarIndex].selectedIcon : TABINFO[this.tabBarIndex].defaultIcon) .size({ width: $r('app.integer.custom_tab_community_image_size'), height: $r('app.integer.custom_tab_community_image_size') }) .interpolation(ImageInterpolation.High) } .width($r('app.integer.custom_tab_community_image_container_size')) .height($r('app.integer.custom_tab_community_image_container_size')) .borderRadius($r('app.integer.custom_tab_community_image_container_border_radius_size')) .margin({ top: ARC_MARGIN_TOP }) .backgroundColor(Color.White) .justifyContent(FlexAlign.Center)

分享
微博
QQ
微信
回复
3天前
相关问题