HarmonyOS鸿蒙Next沉浸光感顶部导航栏
HarmonyOS鸿蒙Next沉浸光感顶部导航栏 沉浸顶部导航栏的这种按钮是用的什么组件而且可以支持沉浸光感，那个切换的按钮，（不是segment buttonV2的话还可以通过什么实现这种按钮切换呢并且有沉浸光感的效果）
更多关于HarmonyOS鸿蒙Next沉浸光感顶部导航栏的实战教程也可以访问 https://www.itying.com/category-93-b0.html
目前的话你根据这个代码改改，应该能实现你想要的效果，最好像大家说的等鸿蒙7升级吧：
@Entry
@Component
struct WidgetCard {
@State isAllSelected: boolean = true;
build() {
Column() {
Stack() {
// 背景层
Row() {
}
.width(300)
.height(50)
.borderRadius(30)
.backgroundColor('#33ffffff')
.borderWidth('1px')
.borderColor('#fff')
.blur(10)
.zIndex(1)
Row({ space: 4 }) {
// “全部” 按钮
Column() {
Text('全部')
// 动态文字颜色：选中时黑色，未选中时白色
.fontColor(this.isAllSelected ? '#000' : '#fff')
}
.width(143)
.height(45)
// 动态背景色：选中时为纯白，未选中时为透明
.backgroundColor(this.isAllSelected ? '#fff' : '#00ffffff')
.borderRadius(30)
.justifyContent(FlexAlign.Center)
// 动态阴影：选中时有阴影，未选中时无阴影（radius为0）
.shadow({
radius: this.isAllSelected ? 6 : 0,
color: '#4d000000',
offsetX: 0,
offsetY: 2
})
// 绑定点击事件
.onClick(() => {
this.isAllSelected = true;
})
// “不在此机” 按钮
Column() {
Text('不在此机')
// 动态文字颜色：选中时黑色，未选中时白色
.fontColor(!this.isAllSelected ? '#000' : '#fff')
}
.width(143)
.height(45)
// 动态背景色：选中时为纯白，未选中时为透明
.backgroundColor(!this.isAllSelected ? '#fff' : '#00ffffff')
.borderRadius(30)
.justifyContent(FlexAlign.Center)
// 动态阴影：选中时有阴影，未选中时无阴影
.shadow({
radius: !this.isAllSelected ? 6 : 0,
color: '#4d000000',
offsetX: 0,
offsetY: 2
})
// 3. 绑定点击事件
.onClick(() => {
this.isAllSelected = false;
})
}
.zIndex(2)
}
}
.width('100%')
.height('100%')
.backgroundColor('#ffab9898')
.padding(10)
}
}
更多关于HarmonyOS鸿蒙Next沉浸光感顶部导航栏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
之前社区是有用这个项目 https://gitcode.com/SummerKaze/HdsButton_Component 自行搭建类似成果，目前是在鸿蒙7的IDE里看到更新了官方的相关内容，从发版来说不建议投入精力，离鸿蒙7更新也不会太远。
如果当前还停在 HarmonyOS 6，不建议把这个效果完全绑定到“沉浸光感”系统能力上，可以先做一个视觉近似的自绘切换按钮：顶部区域用沉浸式布局负责延伸到状态栏，按钮本身用 Row/Stack 做胶囊、毛玻璃和选中态。等目标设备/SDK 支持对应组件能力后，再替换成系统组件会更稳。
一个简化写法如下：
@Component
struct GlassSwitch {
@State selected: number = 0;
private tabs: string[] = ['推荐', '关注'];
build() {
Row({ space: 4 }) {
ForEach(this.tabs, (item: string, index: number) => {
Text(item)
.fontSize(14)
.fontWeight(this.selected === index ? FontWeight.Medium : FontWeight.Regular)
.fontColor(this.selected === index ? '#182431' : '#99182431')
.padding({ left: 16, right: 16, top: 7, bottom: 7 })
.borderRadius(18)
.backgroundColor(this.selected === index ? '#E6FFFFFF' : '#00FFFFFF')
.shadow({ radius: this.selected === index ? 8 : 0, color: '#22000000', offsetY: 2 })
.onClick(() => this.selected = index)
})
}
.padding(4)
.borderRadius(22)
.backgroundColor('#66FFFFFF')
.backgroundBlurStyle(BlurStyle.Thin)
}
}
顶部导航栏外层再配合沉浸式处理：如果只是背景延伸到状态栏，用 expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])；如果按钮要参与状态栏附近布局，则用窗口全屏布局方案，并通过 getWindowAvoidArea() / avoidAreaChange 动态给内容加 top padding，避免按钮压到状态栏。SegmentButtonV2 文档里也能看到它本身有 buttonBackgroundBlurStyle 这类背板模糊配置；自绘方案本质上就是把这层背板和选中态手动拆出来。
参考：
HarmonyOS 鸿蒙 Next 沉浸光感顶部导航栏基于 ArkTS 声明式 UI 实现。利用 Navigation 组件的 barBackgroundColor 与 barBlurStyle 设置透明及模糊，配合 window.setWindowLayoutFullScreen(true) 实现沉浸。光感效果通过 backgroundBlurStyle（如 BlurStyle.Thick）和动态光传感器接口 sensor.getLightSensor 调整模糊强度或背景亮度，实现随环境光变化的视觉反馈。
