HarmonyOS鸿蒙Next中Navigation底部有无法绘制的白色区域
HarmonyOS鸿蒙Next中Navigation底部有无法绘制的白色区域
使用 Navigation 时，发现底部有一块白色区域无法绘制，该如何取消？
@Entry
@Component
struct Index {
pathStack: NavPathStack = new NavPathStack();
cities: string[] = ['泰州', '苏州', '南京', '无锡', '南通', '盐城', '徐州', '淮安', '常州', '杭州', '宿迁', '湖州'];
build() {
Navigation(this.pathStack) {
Scroll() {
Column() {
ForEach(this.cities, (city: string) => {
Button(city).width('80%').margin({ top: 10, bottom: 10 })
})
}.width('100%')
}.height('100%').width('100%').backgroundColor(Color.Green)
}.mode(NavigationMode.Stack)
}
}
更多关于HarmonyOS鸿蒙Next中Navigation底部有无法绘制的白色区域的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
Navigation 没设置相关属性时会出现这种情况，如果要使用标题，则设置 .title('任意标题')，如果不需要使用，则设置 .hideTitleBar(true)，这样就能取消下方的空白部分。
设置前效果如下：
设置后（.hideTitleBar(true)）代码如下：
@Entry
@Component
struct Index {
pathStack: NavPathStack = new NavPathStack();
cities: string[] = ['泰州', '苏州', '南京', '无锡', '南通', '盐城', '徐州', '淮安', '常州', '杭州', '宿迁', '湖州'];
build() {
Navigation(this.pathStack) {
Scroll() {
Column() {
ForEach(this.cities, (city: string) => {
Button(city).width('80%').margin({ top: 10, bottom: 10 })
})
}.width('100%')
}.height('100%').width('100%').backgroundColor(Color.Green)
}.mode(NavigationMode.Stack)
.hideTitleBar(true)
}
}
效果如下：
可以看到，下方的空白消失了，Scroll 组件能绘制到底部。
更多关于HarmonyOS鸿蒙Next中Navigation底部有无法绘制的白色区域的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS Next中，Navigation底部出现无法绘制的白色区域可能是由于布局设置或样式配置问题导致。检查Navigation组件的布局参数，确保其与父容器或子组件的尺寸和边距设置正确。此外，确认是否使用了正确的背景色或透明度属性，避免因样式冲突导致的显示异常。如果问题依旧存在，可以尝试更新到最新版本的鸿蒙开发工具，确保使用最新的API和组件特性。
