zhangbo1_wd

首页全屏适配(除了视频tab)

... ... @@ -19,6 +19,7 @@ const TAG = 'MinePageComponent';
*/
@Component
export struct MinePageComponent {
private topRectHeight: string = AppStorage.get<number>('topSafeHeight') + 'px';
//是否是创作者
@State isCreator:boolean = false
@State isLogin:boolean = false //默认 false 测试放开
... ... @@ -167,6 +168,8 @@ export struct MinePageComponent {
.backgroundColor($r('app.color.color_F9F9F9'))
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
// 预留状态栏、导航栏高度
.margin({ top: this.topRectHeight})
}
... ...
... ... @@ -22,6 +22,7 @@ const storage = LocalStorage.getShared();
@Entry(storage)
@Component
export struct TopNavigationComponentNew {
private topRectHeight: string = AppStorage.get<number>('topSafeHeight') + 'px';
/**
* @deprecated
*/
... ... @@ -137,6 +138,8 @@ export struct TopNavigationComponentNew {
.width('100%')
.height('100%')
}
// 预留状态栏
.margin({ top: this.topRectHeight })
}
@Builder
... ...
... ... @@ -23,6 +23,7 @@ let storage = LocalStorage.getShared();
@Component
export struct BottomNavigationComponent {
@Provide bottomRectHeight: number = 0
private bottomRectHeight1: string = AppStorage.get<number>('bottomSafeHeight') + 'px';
@Provide topRectHeight: number = 0
@Provide isLayoutFullScreen: boolean = false
@Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL
... ... @@ -73,50 +74,51 @@ export struct BottomNavigationComponent {
}
build() {
Tabs({ barPosition: BarPosition.End, index: this.currentNavIndex, controller: this.navController }) {
ForEach(this.bottomNavList, (navItem: BottomNavDTO, index: number) => {
TabContent() {
if (CompUtils.isMine(navItem)) {
// 我的页面组件数据列表
MinePageComponent({ isMinePage: this.currentNavIndex === this.bottomNavList.length - 1 })
} else if (navItem.name === '视频') {
// 视频频道,包含视频和直播
VideoChannelPage({
topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
_currentNavIndex: $currentNavIndex,
autoRefresh: this.autoRefresh
})
} else {
TopNavigationComponentNew({
groupId: navItem.id,
topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
_currentNavIndex: $currentNavIndex,
bottomNavIndex: index,
currentBottomNavName: navItem.name,
assignChannel: this.assignChannel,
autoRefresh: this.autoRefresh
})
Column() {
Tabs({ barPosition: BarPosition.End, index: this.currentNavIndex, controller: this.navController }) {
ForEach(this.bottomNavList, (navItem: BottomNavDTO, index: number) => {
TabContent() {
if (CompUtils.isMine(navItem)) {
// 我的页面组件数据列表
MinePageComponent({ isMinePage: this.currentNavIndex === this.bottomNavList.length - 1 })
} else if (navItem.name === '视频') {
// 视频频道,包含视频和直播
VideoChannelPage({
topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
_currentNavIndex: $currentNavIndex,
autoRefresh: this.autoRefresh
})
} else {
TopNavigationComponentNew({
groupId: navItem.id,
topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
_currentNavIndex: $currentNavIndex,
bottomNavIndex: index,
currentBottomNavName: navItem.name,
assignChannel: this.assignChannel,
autoRefresh: this.autoRefresh
})
}
}
}
.tabBar(this.tabBarBuilder(navItem, index))
.tabBar(this.tabBarBuilder(navItem, index))
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
});
// .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
});
}
.zIndex(10)
.scrollable(false)
.animationDuration(0)
.barHeight(this.displayDirection === DisplayDirection.VERTICAL ? $r('app.float.bottom_navigation_barHeight') :
0.001)
.barMode(BarMode.Fixed)
.barBackgroundColor(this.barBackgroundColor)
// 备注:鸿蒙目前只有修改三线导航背景方法,对于全面屏导航条手机需要设置背景色并使其扩散到导航区域
.backgroundColor(this.barBackgroundColor)
.expandSafeArea([SafeAreaType.SYSTEM])
// .padding({ bottom: this.bottomRectHeight + 'px', top: this.topRectHeight + 'px' }) // 此处margin具体数值在实际中应与导航条区域高度保持一致
}
.zIndex(10)
.scrollable(false)
.animationDuration(0)
.barHeight(this.displayDirection === DisplayDirection.VERTICAL ? $r('app.float.bottom_navigation_barHeight') :
0.001)
.barMode(BarMode.Fixed)
.barBackgroundColor(this.barBackgroundColor)
// 备注:鸿蒙目前只有修改三线导航背景方法,对于全面屏导航条手机需要设置背景色并使其扩散到导航区域
.backgroundColor(this.barBackgroundColor)
.layoutWeight(1)
Blank().width('100%').height(this.bottomRectHeight1).backgroundColor(this.barBackgroundColor)
}.height('100%').width('100%')
}
@Builder
... ...