HarmonyOS 6.1.1 上新｜多项底层Kit补齐，优化应用交互与多媒体场景

2401_85698579

23人浏览 · 2026-08-17 17:57:38

2401_85698579 · 2026-08-17 17:57:38 发布

HarmonyOS 6.1.1 作为 6.1 的增量迭代版本，重点补齐 ArkUI、多媒体、ArkWeb、地图、通知、语音、Vision 等套件高频刚需 API，解决大量业务长期存在的交互短板、多媒体适配痛点。

✅ ArkUI

1. Canvas2D 运行时动态开关抗锯齿

CanvasRenderingContext2D / OffscreenCanvasRenderingContext2D 新增 antialias 属性，无需重建画布即可动态切换文本抗锯齿，解决图表 / 画板切换画质时闪屏抖动问题。

// Canvas 动态抗锯齿示例
@Entry
@Component
struct CanvasAntialiasDemo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private ctx: CanvasRenderingContext2D | null = null

  build() {
    Column() {
      Canvas(this.settings)
        .width('100%')
        .height(300)
        .onReady((ctx: CanvasRenderingContext2D) => {
          this.ctx = ctx
          this.drawText(true)
        })
      Row() {
        Button("开启抗锯齿").onClick(() => this.drawText(true))
        Button("关闭抗锯齿").onClick(() => this.drawText(false))
      }
    }
  }

  drawText(enable: boolean) {
    if (!this.ctx) return
    // 核心：动态修改 antialias，不用重建画布
    this.ctx.antialias = enable
    this.ctx.clearRect(0, 0, 300, 300)
    this.ctx.font = '48px sans-serif'
    this.ctx.fillText('HarmonyOS 6.1.1', 20, 100)
  }
}

2. Tabs 新增 nestedScroll 嵌套滚动

支持两种策略：自身优先滚动 / 仅自身滚动；Tab 内部触顶触底后手势可透传给外层容器，解决资讯、电商「外层滚动 + 多 Tab」布局滑动断连问题。

// Tabs 嵌套滚动极简示例
@Entry
@Component
struct TabsNestedScrollDemo {
  @State tabIndex: number = 0
  build() {
    Scroll() {
      Column() {
        Text("顶部标题区").fontSize(24).padding(20)
        Tabs() {
          TabContent() {
            Scroll() {
              Column() {
                ForEach(Array.from({length:30}), (_,i)=>Text(`Tab1 列表${i}`).fontSize(18).padding(10))
              }
            }
          }.tabBar("Tab1")
          TabContent() {
            Text("Tab2 内容")
          }.tabBar("Tab2")
        }
        // 核心配置 nestedScroll
        .nestedScroll(NestedScrollMode.SELF_FIRST)
        .index(this.tabIndex)
        .onChange((idx)=>this.tabIndex=idx)
      }
    }
  }
}

✅ ArkWeb｜下载回调新增原始地址与来源页

Web 下载回调新增 getOriginalUrl()、getReferrerUrl()，用于资源溯源、风险识别、链路埋点，补齐内嵌 H5、金融办公类应用下载能力。

import { webview } from '@kit.ArkWeb'

@Entry
@Component
struct WebDownloadTraceDemo {
  controller: webview.WebviewController = new webview.WebviewController()
  build() {
    Web({ src: 'https://xxx', controller: this.controller })
      .onDownloadStart((downloadInfo) => {
        // 新增溯源接口
        const originUrl = downloadInfo.getOriginalUrl()
        const referrer = downloadInfo.getReferrerUrl()
        console.info(`[DownloadTrace] origin:${originUrl}, referrer:${referrer}`)
      })
  }
}

✅ Camera Kit｜影随人动自动构图 + 精细手动对焦

影随人动（智能自动构图）：系统原生主体跟踪构图，自动保持人物居中，相比自研算法功耗更低，适合直播、网课、vlog 录制；
手动对焦全套接口：查询设备能力、读取 / 设置对焦距离，满足微距、静物、视频创作精细对焦。

// 手动对焦能力查询+设置伪代码示例
import { camera } from '@kit.CameraKit'

async function setManualFocus(cameraDevice: camera.CameraDevice, focusDistance: number) {
  const focusAbility = cameraDevice.getFocusAbility()
  if (!focusAbility?.isManualFocusSupported()) {
    console.info("当前设备不支持手动对焦")
    return
  }
  // 读取当前对焦距离
  const current = cameraDevice.getFocusDistance()
  console.info("当前对焦距离：", current)
  // 设置对焦距离
  await cameraDevice.setFocusDistance(focusDistance)
}

✅ Image Kit｜WebP 元数据读写支持

新增 WebPMetadata，原生读写 WebP 图片元信息，社交、相册、图片编辑器不再丢失拍摄参数与编辑信息。

import { image } from '@kit.ImageKit'

async function readWebPMetadata(pixmap: image.Pixmap) {
  const meta: image.WebPMetadata = await pixmap.getWebPMetadata()
  console.info(`WebP metadata: alpha=${meta.hasAlpha}, animation=${meta.isAnimation}`)
}

✅ Map Kit｜POI 搜索相关性分 + Marker/POI 长按事件

Site 对象新增 reliability（0~1），业务侧可做结果重排、过滤低相关地点；
Marker、POI 支持长按监听，快速实现长按菜单（收藏、路线、分享）。

import { map } from '@kit.MapKit'

// 搜索结果相关性使用示例
async function searchPOI(mapQuery: map.MapQuery, keyword: string) {
  const result = await mapQuery.searchPOI(keyword)
  for (const site of result.sites) {
    // 相关性分值 0~1
    const score = site.reliability
    console.info(`name:${site.name}, reliability:${score}`)
  }
}

// Marker长按监听
function addMarkerWithLongClick(mapComp: map.MapComponent) {
  const marker = new map.Marker({ position: {latitude:39.9, longitude:116.4} })
  marker.on('longClick', () => {
    console.info("Marker 长按触发，弹出操作菜单")
  })
  mapComp.addMarker(marker)
}

✅ Notification Kit｜通知铃声支持应用沙箱音频

NotificationRequest.sound 支持引用应用沙箱音频，不再局限于应用内预置资源；权限隔离仅允许访问自身沙箱，兼顾个性化与安全。

import { notification } from '@kit.NotificationKit'

async function sendSandboxSoundNotify() {
  const req: notification.NotificationRequest = {
    id: 1001,
    content: {
      contentType: notification.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT,
      basicText: { title: "待办提醒", text: "自定义沙箱铃声通知" }
    },
    // 直接使用沙箱内音频文件
    sound: { uri: 'file://data/storage/el2/base/xxx/custom_ring.mp3' }
  }
  await notification.publishNotification(req)
}

✅ Speech Kit｜AICaptionComponent 字幕样式 & 语种配置

AI 字幕组件支持初始化指定源语言、目标语言、字号、字体颜色，适配外语学习、听力辅助、暗光观影、视障友好场景。

import { speech } from '@kit.SpeechKit'

@Entry
@Component
struct AICaptionCustomDemo {
  @State aiCaption: speech.AICaptionComponent | null = null
  build() {
    Column() {
      speech.AICaption({
        srcLang: 'en-US',
        dstLang: 'zh-CN',
        fontSize: 24,
        fontColor: '#ffffff'
      }).onReady((ins)=>this.aiCaption=ins)
    }
  }
}

✅ Vision Kit｜CardRecognition 新增港澳台通行证识别

卡证识别控件新增 港澳居民来往内地通行证、台湾居民来往大陆通行证，政务、酒店、金融实名核验场景可减少第三方 OCR 依赖，降低包体积与接入成本。

import { vision } from '@kit.VisionKit'

async function startPassportRecognition() {
  const cardRec = new vision.CardRecognition()
  // 支持通行证类型枚举，直接调用识别
  const result = await cardRec.startRecognition(vision.CardType.HK_MACAU_MAINLAND_PASS)
  console.info("证件识别结果：", JSON.stringify(result))
}