HarmonyOS 鸿蒙Next中hdsnavigation的内容区如何延伸到toolbar区域？
HarmonyOS 鸿蒙Next中hdsnavigation的内容区如何延伸到toolbar区域？ 我给toolbar设置了背景模糊，但内容区不显示在toolbar区域，导致模糊没有效果。
import { HdsNavigation, HdsNavigationAttribute, HdsNavigationTitleMode, ScrollEffectType } from '@kit.UIDesignKit';
@Entry
@Component
struct Index {
@State pageIndex: number = 0;
@State toolItems: Array<ToolbarItem>= [
{
value: '首页',
icon: '',
action: () => {
this.pageIndex = 0
},
status: this.pageIndex == 0 ? ToolbarItemStatus.ACTIVE : ToolbarItemStatus.NORMAL
},
{
value: '媒体库',
icon: '',
action: () => {
this.pageIndex = 1
},
status: this.pageIndex == 1 ? ToolbarItemStatus.ACTIVE : ToolbarItemStatus.NORMAL
},
{
value: '设置',
icon: '',
action: () => {
this.pageIndex = 2
},
status: this.pageIndex == 2 ? ToolbarItemStatus.ACTIVE : ToolbarItemStatus.NORMAL
}
]
build() {
HdsNavigation() {
RelativeContainer() {
Scroll(){
Column() {
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Yellow)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Red)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Pink)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Orange)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Grey)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Green)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Gray)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Brown)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Blue)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Black)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.White)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Yellow)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Red)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Pink)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Orange)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Grey)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Green)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Gray)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Brown)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Blue)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.Black)
Text('111')
.fontSize(20)
.width(80)
.height(60)
.backgroundColor(Color.White)
}
.padding({ top: 55 })
}
.height('100%')
.width('100%')
.scrollBar(BarState.Off)
}
.height('100%')
.width('100%')
}
.height('100%')
.width('100%')
.hideBackButton(true)
.titleBar({
style: {
scrollEffectOpts: {
enableScrollEffect: true,
scrollEffectType: ScrollEffectType.COMMON_BLUR
}
},
content: {
title: {
mainTitle: '测试标题'
},
menu: {
value: [
{
content: {
action: () => {
}
}
}
]
}
}
})
.titleMode(HdsNavigationTitleMode.MINI)
.toolbarConfiguration(this.toolItems, {
backgroundBlurStyle: BlurStyle.COMPONENT_REGULAR,
backgroundBlurStyleOptions: {
policy: BlurStyleActivePolicy.FOLLOWS_WINDOW_ACTIVE_STATE
},
hideItemValue: false
})
}
}
更多关于HarmonyOS 鸿蒙Next中hdsnavigation的内容区如何延伸到toolbar区域？的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
好像没有办法
更多关于HarmonyOS 鸿蒙Next中hdsnavigation的内容区如何延伸到toolbar区域？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS中，要让hdsnavigation的内容区延伸到toolbar区域，可以使用NavigationContainer的titleBar属性设置为TitleBarMode.Full。同时确保父容器的布局参数允许扩展，例如使用match_parent作为宽度。在hdsnavigation的配置中设置extendToTitleBar: true即可实现内容区延伸到toolbar区域。
在HarmonyOS Next中，要让HdsNavigation的内容区延伸到Toolbar区域以实现背景模糊效果，可以通过以下方式调整：
- 移除Scroll组件的顶部padding（当前代码中设置的55px），让内容从顶部开始布局：
Scroll(){
Column() {
// 内容...
}
// 移除.padding({ top: 55 })
}
- 为RelativeContainer添加负marginTop，使内容向上延伸到Toolbar区域：
RelativeContainer() {
// 内容...
}
.margin({ top: -55 }) // 根据实际Toolbar高度调整
- 确保Scroll组件的高度设置为100%并允许内容溢出：
Scroll()
.height('100%')
.clip(false) // 允许内容溢出
这样处理后，内容区将会延伸到Toolbar区域，背景模糊效果就能正常显示。注意根据实际Toolbar高度调整负margin值。
