zhangbo1_wd

解决【18014 UI还原问题-【uat】底部导航-选中视频频道后,图标变成白色。看图】

... ... @@ -131,7 +131,7 @@ export struct BottomNavigationComponent {
@Builder
tabBarBuilder(navItem: BottomNavDTO, index: number) {
Stack({ alignContent: Alignment.Bottom }) {
Image(this.currentNavIndex === index ? navItem.iconC : navItem.icon)
Image(this.getBottomIcon(navItem, this.currentNavIndex === index))
.height(CommonConstants.FULL_PARENT)
.padding({
bottom: 15,
... ... @@ -140,6 +140,7 @@ export struct BottomNavigationComponent {
top: 2
})
.aspectRatio(this.ASPECT_RATIO_1_1)
.alt(this.getBottomLocalIcon(navItem, this.currentNavIndex === index))
Text(navItem.name)
.margin({ bottom: $r('app.float.bottom_navigation_margin_bottom') })
... ... @@ -160,6 +161,48 @@ export struct BottomNavigationComponent {
}
private getBottomIcon(navItem: BottomNavDTO, isSelect: boolean): string | Resource {
if (!navItem) {
return ''
}
let icon: string = ''
if (this.isImmersive) {
// 获取沉浸式icon
icon = isSelect ? navItem.immersiveIconCUrl : navItem.immersiveIconUrl
} else {
// 获取常规icon
icon = isSelect ? navItem.iconC : navItem.icon
}
if (StringUtils.isEmpty(icon) || icon.includes('.pag')) {
// 兜底,获取预置的本地icon
return this.getBottomLocalIcon(navItem, isSelect)
}
return icon
}
private getBottomLocalIcon(navItem: BottomNavDTO, isSelect: boolean): Resource {
if (!navItem) {
return isSelect ? $r('app.media.icon_tab_res1') : $r('app.media.icon_tab_res1_no')
}
// type:1普通 2我的
if (navItem.type == '2') {
// 我的
return isSelect ? $r('app.media.icon_tab_res5') : $r('app.media.icon_tab_res5_no')
} else {
// 顶部样式:中文的(11-新闻;12-人民号;13-视频;14-服务)
if (navItem.topStyle == '11') {
return isSelect ? $r('app.media.icon_tab_res1') : $r('app.media.icon_tab_res1_no')
} else if (navItem.topStyle == '12') {
return isSelect ? $r('app.media.icon_tab_res2') : $r('app.media.icon_tab_res2_no')
} else if (navItem.topStyle == '13') {
return isSelect ? $r('app.media.icon_tab_res3') : $r('app.media.icon_tab_res3_no')
} else if (navItem.topStyle == '14') {
return isSelect ? $r('app.media.icon_tab_res4') : $r('app.media.icon_tab_res4_no')
}
}
return isSelect ? $r('app.media.icon_tab_res1') : $r('app.media.icon_tab_res1_no')
}
// 底导切换函数
async onBottomNavigationIndexChange(navItem: BottomNavDTO, index: number) {
Logger.info(TAG, `onBottomNavigationIndexChange this.currentNavIndex: ${this.currentNavIndex}`);
... ...
... ... @@ -21,6 +21,7 @@ export struct VideoChannelPage {
@Prop topNavList: TopNavDTO[]
@Link _currentNavIndex?: number;
@Consume barBackgroundColor: Color
@Consume isImmersive: boolean
@Consume displayDirection: DisplayDirection
@Consume @Watch('setBarBackgroundColor') currentBottomNavInfo: BottomNavDTO // 当前底导信息
@State @Watch('setBarBackgroundColor') currentTopNavSelectedIndex: number = 0;
... ... @@ -42,8 +43,10 @@ export struct VideoChannelPage {
if (this.currentTopNavSelectedIndex === 0 && this.currentBottomNavInfo?.name === '视频') {
console.error('setBarBackgroundColor', '黑色')
this.barBackgroundColor = Color.Black
this.isImmersive = true
} else {
this.barBackgroundColor = Color.White
this.isImmersive = false
console.error('setBarBackgroundColor', '白色')
}
}
... ...