引言

HarmonyOS 7（API 26）在视觉和交互上带来了三大升级：空间化沉浸光感组件、3DGS端侧重建、多窗互动卡片。这些能力让应用从"平面UI"进化为"空间体验"。

本文从开发者视角，解析这些新能力的核心概念和接入方式。

---

一、空间化沉浸光感组件

1.1 什么是沉浸光感

沉浸光感是 ArkUI 新增的一组高级动效组件，能模拟真实世界的光影效果：

• 光随指动：手指滑动时，光源位置跟随变化，UI元素产生对应光影
• 光线勾勒：用光线描边凸显核心元素的轮廓
• 非线性形变：元素跟随触摸压力产生自然的弹性形变

1.2 使用沉浸光感

@Component
export struct ImmersiveCard {
  build() {
    Column() {
      Image($r('app.media.hero'))
        .width('100%')
        .height(200)
        // 开启沉浸光感
        .immersiveLight({
          lightFollowsFinger: true,   // 光随指动
          edgeGlow: true,             // 光线勾勒
          deformEnabled: true         // 非线性形变
        })
      
      Text('空间化卡片')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
    }
    .padding(16)
    .borderRadius(16)
    .backgroundColor(Color.White)
    // 卡片层级阴影
    .shadow({
      radius: 20,
      color: 'rgba(0,0,0,0.1)',
      offsetX: 0,
      offsetY: 8
    })
  }
}

1.3 更多组件支持

// 按钮沉浸光感
Button('立即体验')
  .immersiveLight({ deformEnabled: true })
  .width(200)
  .height(48)

// 列表项沉浸光感
ListItem() {
  Text('空间化列表项')
}
.immersiveLight({ lightFollowsFinger: true })

---

二、3DGS 端侧重建

3DGS（3D Gaussian Splatting）是鸿蒙7新增的端侧3D重建能力，可在手机上实现：

• 空间建模：用手机拍摄物体，生成3D模型
• 商品展示：360°旋转查看商品
• 文旅展陈：文物/展品的3D数字化

2.1 基本使用

import { scene3D } from '@kit.ArkUI3D';

@Entry
@Component
struct ProductViewer {
  private model: scene3D.Model | null = null;

  build() {
    Column() {
      // 3D场景容器
      XComponent({
        type: 'surface',
        controller: this.xcController
      })
      .onLoad(() => {
        // 加载3DGS模型
        this.model = scene3D.loadModel({
          uri: 'app/media/product_3dgs.gs',
          type: scene3D.ModelType.GAUSSIAN_SPLATTING
        });
        
        // 设置交互
        this.model.enableRotate(true);    // 支持旋转
        this.model.enableZoom(true);      // 支持缩放
        this.model.enableAutoRotate(true, 0.5); // 自动缓慢旋转
      })
      .width('100%')
      .height(400)
    }
  }
}

2.2 重建流程

// 使用摄像头拍摄重建
import { scene3D } from '@kit.ArkUI3D';

async function captureAndReconstruct() {
  // 1. 拍摄多角度照片
  const images = await captureImages(20); // 拍摄20张
  
  // 2. 端侧重建
  const result = await scene3D.reconstruct({
    images: images,
    quality: 'high',         // 重建质量
    maxPolygons: 100000      // 最大多边形数
  });
  
  // 3. 保存模型
  const modelPath = `${getContext(this).filesDir}/model.gs`;
  await result.save(modelPath);
  
  console.log('3D重建完成:', modelPath);
}

---

三、多窗互动卡片

3.1 摇一摇效果

互动卡片是鸿蒙7服务卡片的新形态——用户摇一摇手机，卡片从静态变为动态：

// 卡片 FormAbility
import { formManager } from '@kit.FormKit';

export default class InteractiveCardFormAbility extends FormAbility {
  // 接收卡片事件
  onFormEvent(formId: string, event: string) {
    if (event === 'shake') {
      // 触发动画
      this.updateForm(formId, {
        animation: 'shake_to_dynamic',
        duration: 3000
      });
    }
  }
  
  // 卡片点击
  onFormClick(formId: string, message: string) {
    console.log('卡片被点击:', message);
  }
}

3.2 前景元素出框效果

// 卡片布局（JS卡片）
{
  "data": {
    "title": "今日天气",
    "temperature": "25°C",
    "icon_animating": false
  },
  "actions": {
    "onShake": "onShakeEvent",
    "onClick": "onCardClick"
  }
}

效果说明：

• 静态时：卡片显示常规信息
• 摇一摇后：前景元素（图标、文字）以出框动画呈现，突破卡片边界
• 几秒后恢复静态

---

四、闪控窗：悬浮多任务

4.1 创建闪控窗

import { window } from '@kit.ArkUI';

async function createFlashControl() {
  const flashWin = await window.createWindow(getContext(this), {
    type: window.WindowType.TYPE_FLOAT,
    width: 240,
    height: 72,
    isFlashWindow: true       // 闪控窗模式
  });
  
  flashWin.setUIContent('pages/FlashControlContent');
  await flashWin.show();
  
  // 闪控窗特性
  flashWin.on('windowEvent', (eventType) => {
    if (eventType === 'dock') {
      console.log('窗口已暂存到侧边');
    }
    if (eventType === 'expand') {
      console.log('窗口已展开为闪控球');
    }
  });
}

4.2 闪控窗 vs 普通悬浮窗

特性	普通悬浮窗	闪控窗
显示方式	浮动显示	浮动 + 侧边暂存
拖动	支持	支持 + 吸附
暂存	不支持	拖到侧边自动暂存
闪控球切换	不支持	一键切换
适用场景	视频浮窗	计时器/音乐/状态监控

---

五、性能优化建议

空间化效果虽然炫酷，但也意味着更多的GPU计算。性能要点：

// 1. 非活跃时降低效果
@State isActive: boolean = true;

build() {
  Stack() {
    Image($r('app.media.background'))
      .immersiveLight({
        lightFollowsFinger: this.isActive,
        edgeGlow: this.isActive
      })
  }
  .onVisibleAreaChange([0.5], (isVisible) => {
    // 不可见时关闭光感
    this.isActive = isVisible;
  })
}

// 2. 3D模型级别按需切换
function switchModelQuality(quality: 'low' | 'high') {
  if (quality === 'low') {
    model.setMaxPolygons(10000);  // 低多边形
  } else {
    model.setMaxPolygons(100000);
  }
}

---

六、各版本能力对照

能力	最低API版本	说明
沉浸光感组件	API 25+	推荐 API 26 体验最佳
3DGS端侧重建	API 26	鸿蒙7新增
多窗互动卡片	API 26	需摇一摇硬件支持
闪控窗	API 25+	增强于 API 26
碰一碰精准分享	API 26	鸿蒙7新增

---

总结

鸿蒙7的空间化三大件：

沉浸光感组件 → 提升UI的视觉沉浸感
3DGS端侧重建  → 让应用具备3D能力
互动卡片+闪控窗 → 重塑服务触达方式

这些能力让鸿蒙应用从"二维UI"走向"空间体验"。不需要全部接入，选一个适合你应用场景的，就能让用户体验提升一个档次。