zhangbo1_wd

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

@@ -19,6 +19,7 @@ const TAG = 'MinePageComponent'; @@ -19,6 +19,7 @@ const TAG = 'MinePageComponent';
19 */ 19 */
20 @Component 20 @Component
21 export struct MinePageComponent { 21 export struct MinePageComponent {
  22 + private topRectHeight: string = AppStorage.get<number>('topSafeHeight') + 'px';
22 //是否是创作者 23 //是否是创作者
23 @State isCreator:boolean = false 24 @State isCreator:boolean = false
24 @State isLogin:boolean = false //默认 false 测试放开 25 @State isLogin:boolean = false //默认 false 测试放开
@@ -167,6 +168,8 @@ export struct MinePageComponent { @@ -167,6 +168,8 @@ export struct MinePageComponent {
167 .backgroundColor($r('app.color.color_F9F9F9')) 168 .backgroundColor($r('app.color.color_F9F9F9'))
168 .scrollable(ScrollDirection.Vertical) 169 .scrollable(ScrollDirection.Vertical)
169 .scrollBar(BarState.Off) 170 .scrollBar(BarState.Off)
  171 + // 预留状态栏、导航栏高度
  172 + .margin({ top: this.topRectHeight})
170 } 173 }
171 174
172 175
@@ -22,6 +22,7 @@ const storage = LocalStorage.getShared(); @@ -22,6 +22,7 @@ const storage = LocalStorage.getShared();
22 @Entry(storage) 22 @Entry(storage)
23 @Component 23 @Component
24 export struct TopNavigationComponentNew { 24 export struct TopNavigationComponentNew {
  25 + private topRectHeight: string = AppStorage.get<number>('topSafeHeight') + 'px';
25 /** 26 /**
26 * @deprecated 27 * @deprecated
27 */ 28 */
@@ -137,6 +138,8 @@ export struct TopNavigationComponentNew { @@ -137,6 +138,8 @@ export struct TopNavigationComponentNew {
137 .width('100%') 138 .width('100%')
138 .height('100%') 139 .height('100%')
139 } 140 }
  141 + // 预留状态栏
  142 + .margin({ top: this.topRectHeight })
140 } 143 }
141 144
142 @Builder 145 @Builder
@@ -23,6 +23,7 @@ let storage = LocalStorage.getShared(); @@ -23,6 +23,7 @@ let storage = LocalStorage.getShared();
23 @Component 23 @Component
24 export struct BottomNavigationComponent { 24 export struct BottomNavigationComponent {
25 @Provide bottomRectHeight: number = 0 25 @Provide bottomRectHeight: number = 0
  26 + private bottomRectHeight1: string = AppStorage.get<number>('bottomSafeHeight') + 'px';
26 @Provide topRectHeight: number = 0 27 @Provide topRectHeight: number = 0
27 @Provide isLayoutFullScreen: boolean = false 28 @Provide isLayoutFullScreen: boolean = false
28 @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL 29 @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL
@@ -73,50 +74,51 @@ export struct BottomNavigationComponent { @@ -73,50 +74,51 @@ export struct BottomNavigationComponent {
73 } 74 }
74 75
75 build() { 76 build() {
76 - Tabs({ barPosition: BarPosition.End, index: this.currentNavIndex, controller: this.navController }) {  
77 - ForEach(this.bottomNavList, (navItem: BottomNavDTO, index: number) => {  
78 - TabContent() {  
79 - if (CompUtils.isMine(navItem)) {  
80 - // 我的页面组件数据列表  
81 - MinePageComponent({ isMinePage: this.currentNavIndex === this.bottomNavList.length - 1 })  
82 - } else if (navItem.name === '视频') {  
83 - // 视频频道,包含视频和直播  
84 - VideoChannelPage({  
85 - topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),  
86 - _currentNavIndex: $currentNavIndex,  
87 - autoRefresh: this.autoRefresh  
88 - })  
89 - } else {  
90 - TopNavigationComponentNew({  
91 - groupId: navItem.id,  
92 - topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),  
93 - _currentNavIndex: $currentNavIndex,  
94 - bottomNavIndex: index,  
95 - currentBottomNavName: navItem.name,  
96 - assignChannel: this.assignChannel,  
97 - autoRefresh: this.autoRefresh  
98 - }) 77 + Column() {
  78 + Tabs({ barPosition: BarPosition.End, index: this.currentNavIndex, controller: this.navController }) {
  79 + ForEach(this.bottomNavList, (navItem: BottomNavDTO, index: number) => {
  80 + TabContent() {
  81 + if (CompUtils.isMine(navItem)) {
  82 + // 我的页面组件数据列表
  83 + MinePageComponent({ isMinePage: this.currentNavIndex === this.bottomNavList.length - 1 })
  84 + } else if (navItem.name === '视频') {
  85 + // 视频频道,包含视频和直播
  86 + VideoChannelPage({
  87 + topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
  88 + _currentNavIndex: $currentNavIndex,
  89 + autoRefresh: this.autoRefresh
  90 + })
  91 + } else {
  92 + TopNavigationComponentNew({
  93 + groupId: navItem.id,
  94 + topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
  95 + _currentNavIndex: $currentNavIndex,
  96 + bottomNavIndex: index,
  97 + currentBottomNavName: navItem.name,
  98 + assignChannel: this.assignChannel,
  99 + autoRefresh: this.autoRefresh
  100 + })
  101 + }
99 } 102 }
100 - }  
101 - .tabBar(this.tabBarBuilder(navItem, index)) 103 + .tabBar(this.tabBarBuilder(navItem, index))
102 104
103 - .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])  
104 - }); 105 + // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  106 + });
105 107
106 - }  
107 - .zIndex(10)  
108 - .scrollable(false)  
109 - .animationDuration(0)  
110 - .barHeight(this.displayDirection === DisplayDirection.VERTICAL ? $r('app.float.bottom_navigation_barHeight') :  
111 - 0.001)  
112 - .barMode(BarMode.Fixed)  
113 - .barBackgroundColor(this.barBackgroundColor)  
114 - // 备注:鸿蒙目前只有修改三线导航背景方法,对于全面屏导航条手机需要设置背景色并使其扩散到导航区域  
115 - .backgroundColor(this.barBackgroundColor)  
116 - .expandSafeArea([SafeAreaType.SYSTEM])  
117 -  
118 - // .padding({ bottom: this.bottomRectHeight + 'px', top: this.topRectHeight + 'px' }) // 此处margin具体数值在实际中应与导航条区域高度保持一致 108 + }
  109 + .zIndex(10)
  110 + .scrollable(false)
  111 + .animationDuration(0)
  112 + .barHeight(this.displayDirection === DisplayDirection.VERTICAL ? $r('app.float.bottom_navigation_barHeight') :
  113 + 0.001)
  114 + .barMode(BarMode.Fixed)
  115 + .barBackgroundColor(this.barBackgroundColor)
  116 + // 备注:鸿蒙目前只有修改三线导航背景方法,对于全面屏导航条手机需要设置背景色并使其扩散到导航区域
  117 + .backgroundColor(this.barBackgroundColor)
  118 + .layoutWeight(1)
119 119
  120 + Blank().width('100%').height(this.bottomRectHeight1).backgroundColor(this.barBackgroundColor)
  121 + }.height('100%').width('100%')
120 } 122 }
121 123
122 @Builder 124 @Builder