承接上篇《基于ArkTS的状态管理机制深度解析》本文基于已调通的 DevEco Studio 6.1 API23 环境实测 Marquee 组件在 HarmonyOS 6.1 中的三项增强并给出可直接复用的电商长标题场景代码。一、前言从环境地狱爬出来后的第一份实测前两周卡在 SDK Lock 和 API 12/23 双环境切换的兼容坑里差点以为赶不上共创季稿事节。昨天终于把 DevEco Studio 6.1 Compile SDK 6.1.0 (API 23) 的环境调通第一时间翻了官方 API23 更新日志发现Marquee 组件的优化非常克制且实用——不是堆参数而是精准戳中旧版的三个痛点。之前做电商类 Demo 时长商品标题溢出屏幕是常态旧版本 Marquee 没法自定义首尾间距两段文本衔接像连体婴也没有原生点击暂停交互很僵硬。这次实测下来新特性的适配成本极低改 2 行代码效果提升却很明显特意整理成实操文给同样在踩 API23 坑的新手朋友。二、API23 Marquee 新特性拆解对照旧版翻官方 API23 变更日志Marquee 这次动了三个点咱们逐个对特性旧版API 12 及以下API23 新增强适用场景首尾间距无文本首尾硬接新增spacing: number单位 vp电商标题、通知栏避免衔接生硬滚动速度只能靠step间接控速不直观新增scrollAmount: number单位 vp/秒不同屏幕尺寸精准控速交互需自己写定时器暂停原生支持.onClick()绑定状态变量点击标题暂停查看、再次点击恢复 一个认知点spacing和scrollAmount的参数类型是numberAPI23 内部已默认按 vp 处理不要再包100vp字符串——这点后面踩坑节会展开。三、代码实现API23 专属复制可用3.1 完整代码Index.ets// 必须导包否则 Color.Grey 会报 Cannot find name Color import { Color } from kit.ArkUI Entry Component struct MarqueeDemo { // 控制跑马灯暂停/播放 State isPaused: boolean false // 长文本模拟电商超长商品标题 private longText: string 【API23新特性】HarmonyOS 6.1 定制款超长商品标题支持自定义间距和点击暂停适配多端设备 // 点击计数状态反馈用 State clickCount: number 0 build() { Column({ space: 30 }) { // —— 页面标题 —— Text(HarmonyOS 6.1 Marquee 新特性演示) .fontSize(24) .fontWeight(FontWeight.Bold) .margin({ top: 20 }) // 旧版本效果对照组的存在感很重要 Text(旧版本效果无间距/无点击暂停) .fontSize(16) .fontColor(Color.Grey) Marquee({ start: true, step: 2, loop: -1, fromStart: true, src: this.longText }) .width(300) .height(40) .backgroundColor(#f5f5f5) .padding(10) .margin({ bottom: 20 }) // API23 新版本核心亮点 Text(API23 新特性效果自定义间距 点击暂停) .fontSize(16) .fontColor(Color.Grey) Marquee({ start: !this.isPaused, // 绑定暂停状态 step: 2, loop: -1, fromStart: true, src: this.longText, spacing: 100, // 【API23】两段文本间距 100vp scrollAmount: 30 // 【API23】每秒滚动 30vp }) .width(300) .height(40) .backgroundColor(#e8f4ff) .padding(10) // 【API23 原生点击暂停不用自己写定时器】 .onClick(() { this.isPaused !this.isPaused this.clickCount }) // —— 状态反馈区让交互生效肉眼可见—— Column({ space: 10 }) { Text(当前状态${this.isPaused ? 已暂停 : 滚动中}) .fontSize(18) .fontColor(this.isPaused ? Color.Red : Color.Green) Text(点击次数${this.clickCount}) .fontSize(16) Text(提示点击上方蓝色区域可暂停/恢复) .fontSize(14) .fontColor(Color.Grey) } .margin({ top: 20 }) } .width(100%) .height(100%) .alignItems(HorizontalAlign.Center) } }3.2 代码里的三个API23 标记点spacing: 100旧版没有文本首尾不再黏在一起scrollAmount: 30替代旧版靠step猜速度的别扭写法.onClick()直接绑State不用自己维护setInterval做暂停/恢复框架接管四、运行效果远程模拟器实拍环境DevEco Studio 6.1 → Device Manager →Remote Emulator → Phone API23。状态表现初始态上方灰底跑马灯旧版 下方蓝底跑马灯API23版同时滚动状态区显示滚动中点击蓝底跑马灯蓝底停下状态切为已暂停点击次数 1再点击蓝底恢复滚动状态切回滚动中五、踩坑记录官方文档没写的细节5.1spacing传100vp反而报错最开始我按所有尺寸加 vp的旧习惯写了spacing: 100vp编译器直接甩Type string is not assignable to type number查了 API23 源码签名才发现spacing和scrollAmount的参数类型是number内部已按 vp 换算传纯数字100就行。这个坑官方文档示例里没强调新手极易按旧惯性踩。5.2Color.Grey报Cannot find name Color代码里用了Color.Grey / Red / Green但忘了导包// 必须加这一行否则编译器不认 Color import { Color } from kit.ArkUI这个坑在前一篇 State 文里也提过——ArkTS 的枚举类基本都要显式导包养成用枚举先导包的肌肉记忆能省很多事。5.3 Preview 又双叒叕不刷新改完spacing切 Preview还是跑的旧效果。老办法File → Invalidate Caches → Invalidate and Restart清完再开 Preview 才认新参数。这个属于 DevEco 6.1 的通病三篇文里反复出现已经能构成系列共性踩坑了。六、总结与延伸Marquee 在 API23 的这次增强定位很清晰——不是让你能用而是让你好用。spacing解决视觉衔接、scrollAmount解决控速直觉、onClick State解决交互 boilerplate三个点都打在旧版的痛处上。适配成本 vs 收益比改 2 行代码加两个参数 绑一个 onClick就能让电商长标题、首页公告栏、行情滚动这类场景的体验上一个台阶性价比很高。 下一篇预告把这颗 Marquee 嵌进电商商品列表页结合上一篇的State 即将展开的Link做父子状态传递实现点击商品卡片 → 标题暂停 底部弹详情的小交互把 API23 新特性和状态管理串成一条线。
【共创季稿事节】HarmonyOS 6.1 API23新特性实战：Marquee跑马灯组件进阶用法
承接上篇《基于ArkTS的状态管理机制深度解析》本文基于已调通的 DevEco Studio 6.1 API23 环境实测 Marquee 组件在 HarmonyOS 6.1 中的三项增强并给出可直接复用的电商长标题场景代码。一、前言从环境地狱爬出来后的第一份实测前两周卡在 SDK Lock 和 API 12/23 双环境切换的兼容坑里差点以为赶不上共创季稿事节。昨天终于把 DevEco Studio 6.1 Compile SDK 6.1.0 (API 23) 的环境调通第一时间翻了官方 API23 更新日志发现Marquee 组件的优化非常克制且实用——不是堆参数而是精准戳中旧版的三个痛点。之前做电商类 Demo 时长商品标题溢出屏幕是常态旧版本 Marquee 没法自定义首尾间距两段文本衔接像连体婴也没有原生点击暂停交互很僵硬。这次实测下来新特性的适配成本极低改 2 行代码效果提升却很明显特意整理成实操文给同样在踩 API23 坑的新手朋友。二、API23 Marquee 新特性拆解对照旧版翻官方 API23 变更日志Marquee 这次动了三个点咱们逐个对特性旧版API 12 及以下API23 新增强适用场景首尾间距无文本首尾硬接新增spacing: number单位 vp电商标题、通知栏避免衔接生硬滚动速度只能靠step间接控速不直观新增scrollAmount: number单位 vp/秒不同屏幕尺寸精准控速交互需自己写定时器暂停原生支持.onClick()绑定状态变量点击标题暂停查看、再次点击恢复 一个认知点spacing和scrollAmount的参数类型是numberAPI23 内部已默认按 vp 处理不要再包100vp字符串——这点后面踩坑节会展开。三、代码实现API23 专属复制可用3.1 完整代码Index.ets// 必须导包否则 Color.Grey 会报 Cannot find name Color import { Color } from kit.ArkUI Entry Component struct MarqueeDemo { // 控制跑马灯暂停/播放 State isPaused: boolean false // 长文本模拟电商超长商品标题 private longText: string 【API23新特性】HarmonyOS 6.1 定制款超长商品标题支持自定义间距和点击暂停适配多端设备 // 点击计数状态反馈用 State clickCount: number 0 build() { Column({ space: 30 }) { // —— 页面标题 —— Text(HarmonyOS 6.1 Marquee 新特性演示) .fontSize(24) .fontWeight(FontWeight.Bold) .margin({ top: 20 }) // 旧版本效果对照组的存在感很重要 Text(旧版本效果无间距/无点击暂停) .fontSize(16) .fontColor(Color.Grey) Marquee({ start: true, step: 2, loop: -1, fromStart: true, src: this.longText }) .width(300) .height(40) .backgroundColor(#f5f5f5) .padding(10) .margin({ bottom: 20 }) // API23 新版本核心亮点 Text(API23 新特性效果自定义间距 点击暂停) .fontSize(16) .fontColor(Color.Grey) Marquee({ start: !this.isPaused, // 绑定暂停状态 step: 2, loop: -1, fromStart: true, src: this.longText, spacing: 100, // 【API23】两段文本间距 100vp scrollAmount: 30 // 【API23】每秒滚动 30vp }) .width(300) .height(40) .backgroundColor(#e8f4ff) .padding(10) // 【API23 原生点击暂停不用自己写定时器】 .onClick(() { this.isPaused !this.isPaused this.clickCount }) // —— 状态反馈区让交互生效肉眼可见—— Column({ space: 10 }) { Text(当前状态${this.isPaused ? 已暂停 : 滚动中}) .fontSize(18) .fontColor(this.isPaused ? Color.Red : Color.Green) Text(点击次数${this.clickCount}) .fontSize(16) Text(提示点击上方蓝色区域可暂停/恢复) .fontSize(14) .fontColor(Color.Grey) } .margin({ top: 20 }) } .width(100%) .height(100%) .alignItems(HorizontalAlign.Center) } }3.2 代码里的三个API23 标记点spacing: 100旧版没有文本首尾不再黏在一起scrollAmount: 30替代旧版靠step猜速度的别扭写法.onClick()直接绑State不用自己维护setInterval做暂停/恢复框架接管四、运行效果远程模拟器实拍环境DevEco Studio 6.1 → Device Manager →Remote Emulator → Phone API23。状态表现初始态上方灰底跑马灯旧版 下方蓝底跑马灯API23版同时滚动状态区显示滚动中点击蓝底跑马灯蓝底停下状态切为已暂停点击次数 1再点击蓝底恢复滚动状态切回滚动中五、踩坑记录官方文档没写的细节5.1spacing传100vp反而报错最开始我按所有尺寸加 vp的旧习惯写了spacing: 100vp编译器直接甩Type string is not assignable to type number查了 API23 源码签名才发现spacing和scrollAmount的参数类型是number内部已按 vp 换算传纯数字100就行。这个坑官方文档示例里没强调新手极易按旧惯性踩。5.2Color.Grey报Cannot find name Color代码里用了Color.Grey / Red / Green但忘了导包// 必须加这一行否则编译器不认 Color import { Color } from kit.ArkUI这个坑在前一篇 State 文里也提过——ArkTS 的枚举类基本都要显式导包养成用枚举先导包的肌肉记忆能省很多事。5.3 Preview 又双叒叕不刷新改完spacing切 Preview还是跑的旧效果。老办法File → Invalidate Caches → Invalidate and Restart清完再开 Preview 才认新参数。这个属于 DevEco 6.1 的通病三篇文里反复出现已经能构成系列共性踩坑了。六、总结与延伸Marquee 在 API23 的这次增强定位很清晰——不是让你能用而是让你好用。spacing解决视觉衔接、scrollAmount解决控速直觉、onClick State解决交互 boilerplate三个点都打在旧版的痛处上。适配成本 vs 收益比改 2 行代码加两个参数 绑一个 onClick就能让电商长标题、首页公告栏、行情滚动这类场景的体验上一个台阶性价比很高。 下一篇预告把这颗 Marquee 嵌进电商商品列表页结合上一篇的State 即将展开的Link做父子状态传递实现点击商品卡片 → 标题暂停 底部弹详情的小交互把 API23 新特性和状态管理串成一条线。
