一、应用介绍

《天气宝宝》是一款专为年轻用户群体打造的天气应用。在我们的世界里，每一个气象要素都被赋予生动的表情，让天气预报从此变得亲切而有温度。

此前版本的设计风格过于“简约”，未能充分展现产品的个性魅力，但是我们又不知道应该怎么设计。HarmonyOS 6.1 中的悬浮页签新组件让我眼前一亮，本次结合 HarmonyOS 6.1 版本的适配迭代，我们全面融入 HarmonyOS 新一代视觉语言，以悬浮页签与沉浸光感重构底部导航，让底部页签仿佛“漂浮在空间中的光片”，带来轻盈通透的视觉感受。

配合 HarmonyOS 6.1 新的沉浸设计美学，我们在改版中新增了两种背景主题：

• 地球视角：采用风云四号气象卫星返回的实时影像，从太空俯瞰云层与大陆的壮丽变幻，让用户感受“气象之眼”的独特视角。
• 艺术模式：跟随天气变化呈现多流派世界名画，画面与前景形成虚实层次，为每次查看天气增添一丝艺术趣味。

主页列表中的内容卡片均采用毛玻璃质感（强模糊 + 背景减淡），内容文字与图片仿佛“嵌入半透明水晶”一般悬浮于背景之上，层次分明而又整体协调。

二、改造方法

1.底部导航

UI Design Kit（UI设计套件）是华为提供的符合 HarmonyOS Design System 规范的 UI 界面开发套件集合。对于我们这样的小型团队而言，只需套用预设样式，无需专业 UI 动效工程师，就能快速实现大厂级的视觉体验，大幅缩短开发周期，降低适配与维护成本。

悬浮页签和沉浸光感是底部页签容器组件 HdsTabs 从 6.1.0(23) 版本开始新增的特性，接入方法在官方文档中有详细说明：

设置页签栏的悬浮样式-底部页签-UI Design Kit（UI设计套件）-应用框架 - 华为HarmonyOS开发者，

沉浸光感-UI Design Kit（UI设计套件）-应用框架 - 华为HarmonyOS开发者

我这里主要介绍的是关于适配上遇到两个问题。

①.版本控制问题

从 AppGallery Connect 看到虽然大家对鸿蒙新版本的系统升级很积极，但我们依然有44%的用户还是 鸿蒙 6.0 版本的系统，所以我们不能直接将应用适配修改为 API 23。很多人不知道怎么对组件属性进行版本区别设置，这时我们需要使用到 AttributeModifier (属性修改器)，ArkUI 的 AttributeModifier 机制，可以通过 Modifier 对象动态修改属性。

示例代码如下：

 modifier: MyListModifier = new MyListModifier();
  
 HdsTabs() {
 }.attributeModifier(this.modifier)
 .barOverlap(true)
 .barPosition(BarPosition.End)
 .vertical(false)

class MyListModifier implements AttributeModifier<HdsTabsAttribute> {
  applyNormalAttribute(instance: HdsTabsAttribute): void {

    if (deviceInfo.sdkApiVersion > 22) {

      instance.barFloatingStyle({
        barWidth: { smallWidth: 250, mediumWidth: 350, largeWidth: 450 },
        barBottomMargin: 28,
        gradientMask: { maskColor: '#66F1F3F5', maskHeight: 92 },
        systemMaterialEffect: {
          materialType: hdsMaterial.MaterialType.IMMERSIVE,
          materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
        },
      });
    }
  }
}

通过这种方式，如果是 API 23以上的设备展示的就是悬浮页签的效果，而 API 23版本以下的设备展示的就是传统的底部 TAB 页签效果。

②.页签材质和按钮对比度的问题。

hdsMaterial.MaterialLevel 推荐使用 ADAPTIVE 系统会根据当前设备的算力动态调整组件的材质效果，实现性能与显示效果的最佳平衡体验。如果小伙伴想自定义的话就需要先调用 getSystemMaterialTypes() 接口查询当前设备支持的材质能力，EXQUISITE 对性能要求最高。

在 EXQUISITE(精致) 材质效果下，悬浮页签的背景透明度高，如果页面内容颜色不确定的话，很容易导致页签栏内容因为对比度不足而看不清楚，我们可以通过自定义页签构建器，对 Text 增加描边的方式适当提高对比度。示例代码如下：

   Text("页签栏")
        .fontColor(this.textColor)
        .textShadow([{ radius: 0, color: this.shadowColor, offsetX: 1, offsetY: 1 }
          , { radius: 0, color: this.shadowColor, offsetX: -1, offsetY: -1 }
          , { radius: 0, color: this.shadowColor, offsetX: 1, offsetY: -1 }
          , { radius: 0, color: this.shadowColor, offsetX: -1, offsetY: 1 }])

这里通过四方向的实色阴影，模拟出类似“描边”的效果，显著提升文字在复杂背景上的可读性。当然，实际项目中建议根据背景色调动态计算 shadowColor（例如浅色背景用深色阴影，深色背景用浅色阴影），以获得更自然的视觉体验。

2.列表卡片

目前沉浸光感效果只支持标题栏和底部导航组件中设置，于是我们就在基础组件上通过对背景设置有透明度的背景色和背景模糊的方式简单模拟了毛玻璃效果。

示例代码如下:

Column(){}   
 .borderRadius(8)
 .backgroundColor("#B3FFFFFF")
 .borderWidth(1)
 .borderColor("#B3FFFFFF")
 .backdropBlur(50)

最终卡片的实现效果上不如底部悬浮页签的沉浸光感质感好，后续的系统版本更新中会有更多的基础组件支持沉浸光感设置，我们也会第一时间进行 UI 适配。

感谢您的阅读与支持！未来我们还会持续探索 HarmonyOS 更多新特性，让《天气宝宝》在视觉与交互上不断进化，陪伴每一位用户感知天气之美。期待与你在下一版本中再次相遇～