已合并
fix: 完善 trackImage 系列属性支持 #36
fix: 完善 trackImage 系列属性支持 #36
已合并
mazheng创建于 9月8日
mazheng
9月8日

修改点

1. JS 侧:轨道图片属性真正下发

  • src/Slider.tsx:新增 resolveImageSource(),对 trackImage / minimumTrackImage / maximumTrackImage 统一走 Image.resolveAssetSource(web 平台直通),并作为 props 传给原生组件——此前这三个属性在 JS 侧根本没有传下去。

2. C++ 侧:打通三个轨道图片属性 + 修正事件重复上报

  • Props.h / Props.cpp:取消 maximumTrackImage、minimumTrackImage、trackImage 三个成员及其 convertRawProp 调用的注释,使其参与 props 解析。
  • SliderJSIBinder.h:补充三个属性的 JSI 声明("object")。
  • SliderNapiBinder.h:把三个 ImageSource::uri 通过 addProperty 下发到 ArkTS 侧。
  • SliderEventEmiRequestHandler.h:VALUE_CHANGE 分支删除 eventEmitter->onChange(event1),只保留 onRNCSliderValueChange。

3. ArkTS 侧:SliderDescriptorWrapper.ets

  • 抽出静态方法 resolveImageResource(uri),统一处理 asset://、file://assets/src/assets/、裸文件名三种 uri 形态。
  • 新增 trackImageSource / minimumTrackImageSource / maximumTrackImageSource 三个 getter,与 source(thumbImage)复用同一套解析。
  • source 返回类型由 Resource 放宽为 Resource | undefined;BlockStyle 改为先取 this.source,有值才返回 IMAGE 类型。

4. ArkTS 侧:Slider.ets

  • build() 拆为两条渲染路径:未设置任何轨道图时保持原有单 Slider 结构;设置了轨道图时改用 Stack 分层渲染——整轨底图(trackImage)+ 按 getFillRatio() 裁切宽/高的 minimumTrackImage / maximumTrackImage + 轨道与已选中色置为 Color.Transparent 的原生 Slider。
  • 新增 TRACK_IMAGE_THICKNESS = 6 常量与 getFillRatio() / ratioToPercent() / hasAnyTrackImage() 辅助方法。
  • descriptor 变更回调中同步刷新 lowerLimit / upperLimit,并对当前值重新 clamp;取值判断改为 this.descriptor.rawProps.value !== undefined。
  • 全文件双引号字符串统一为单引号(CodeCheck G.TYP.04)。

5. 工程化与资料

  • example 依赖的本地 tgz 文件名与本次 pre-release 版本同步。
  • package.json 5.1.3-beta.1 → 5.1.3-beta.2。
  • CHANGELOG.md 新增 v5.1.3-beta.2 条目;README.md/README_en.md 补充轨道图片说明。

根因分析

① trackImage 系列属性完全无效

整条链路断开:

  • src/Slider.tsx 的 render 里只处理了 thumbImage,三个 trackImage 属性从未出现在传给原生组件的 props 中。
  • Props.h / Props.cpp 中三个字段连同 convertRawProp 一起被注释掉,C++ 侧没有这三个成员。
  • SliderJSIBinder.h / SliderNapiBinder.h 没有声明和下发,ArkTS 侧 SliderProps 也没有对应字段。
  • ArkUI 原生 Slider 组件本身不提供轨道图片能力(只有 trackColor / selectedColor / blockStyle),即便属性传到位也无法直接映射,必须自己分层绘制。

② onValueChange 一次变化回调两次

SliderEventEmiRequestHandler.h 的 VALUE_CHANGE 分支同时发出 onChange 和 onRNCSliderValueChange 两个事件,而 JS 侧把这两个事件都绑定到了同一个 onValueChange 处理函数上,导致用户回调被重复触发。

③ lowerLimit / upperLimit 在 props 更新后不刷新

lowerLimit / upperLimit 只在 aboutToAppear() 里赋值一次,descriptor 变更回调里却拿它们去 clamp 新值。JS 侧更新后 native 仍按旧边界裁剪。

另外 this.descriptor.rawProps.value ? value : this.SliderValue 用真值判断:value 为 0(合法且常见的滑块值)时为 falsy,会被当成「未传 value」而丢弃这次更新。


方案说明

ArkUI Slider 没有轨道图片能力,只能自绘。选择「分层 Stack + 透明原生轨道」而不是完全自绘滑块,是为了保留原生的手势、无障碍与 slideRange 行为,只替换视觉层。未设置轨道图时完全走原有代码路径,保证默认外观与既有行为零变化。

三层图片各自包一层带 alignContent 的独立 Stack(而不是用 offset/padding 定位),是为了让 horizontal / vertical / reverse 四种组合下的对齐方向都由 Alignment 表达,避免手算偏移量在反向场景下算错。

ImageFit.Fill 为整图拉伸,不实现 iOS 的 cap-inset 边缘/中心像素拉伸——圆角和装饰性边框会变形。这一差异已在 README 中显式说明,未做隐式行为对齐。


测试情况

本仓库未引入自动化单测框架(无 __tests__ / *.test.*),验证以 example 工程 + 真机手动执行为主。

手动验证

  • 同时展示设置 / 未设置 trackImage 的两个 Slider,视觉差异符合预期;minimumTrackImage / maximumTrackImage 随取值变化分层裁切正确。
  • horizontal / vertical / reverse 四种组合下轨道图对齐正确。
  • 一次值变化 onValueChange 只回调一次(此前两次)。
  • 动态更新 lowerLimit / upperLimit 后 clamp 按新边界生效;value=0 不再被当作「未传值」丢弃。
  • 未设置任何轨道图时走原有渲染分支,默认外观与手势行为无变化。
  • src/Slider.tsx、src/index.ts、src/RNCSliderNativeComponent.ts 通过 esbuild 解析校验。
  • CI:编译 / 静态检查(CodeCheck)以流水线结果为准。

资料修改

  • 是否已在 README 说明该接口/功能的变化:是。README.md/README_en.md 已说明本实现使用 ImageFit.Fill 整图拉伸、不实现 iOS cap-inset 拉伸,并把三个 trackImage 属性的鸿蒙支持列由「否」改为「是」。
  • 是否已在 README 和 package.json 修改了版本信息:部分。package.json 已由 5.1.3-beta.1 改为 5.1.3-beta.2,CHANGELOG.md 已新增条目;README 顶部版本表未刷新(本次为 pre-release,计划正式 release 时统一更新)。

依赖关系变更

  • 无新增运行时依赖。
  • trackImage / minimumTrackImage / maximumTrackImage 三个属性开始生效,属增量能力,无 breaking change。
  • onValueChange 由一次变化回调两次收敛为一次——属于向上游语义对齐的行为修正,依赖「回调两次」的业务代码需要留意。
  • harmony/slider.har 已同步更新,其内嵌的 ArkTS 与 C++ 源码均与本次改动保持一致(含事件去重与 limit 刷新修复)。
    ⚠️ 注意:该 har 整体仍是较早版本的构建产物——内含的 C++ 源码、oh-package.json5 版本号、以及 ArkTS 源码的格式化风格均落后于仓库源码。合入前建议在 DevEco 中完整重新构建并提交,否则本次 C++ 侧改动不会随 har 交付。

Checklist

  • 关联 Issue:#29
  • 根因分析和方案说明已补全
  • 已列出手动验证项及结果
  • 兼容性影响和依赖关系影响已完成分析 —— har 待完整重新构建后再勾选
likedislike
Pull Request已成功合入, 合并人@openharmony_ci
(感谢 mazheng 的贡献)
openharmony_ci
openharmony_ci成员
9月8日 评论:

感谢提交 Pull Requests !此PR未通过DCO校验。
校验失败可能原因:

1. 未签署“DCO协议”(开发者原创声明协议),在线签署、查看签署状态。

2. Commits 中未包含 Signed-off-by信息,参考FAQ处理。

修复上述问题后,在PR的评论框输入“check dco” ,单击”评论”,系统将再次进行DCO校验。

当前检测到如下Commits 未包含Signed-off-by信息:


Thanks for submitting a pull request. This pull request has not passed the DCO check.
Possible causes:

1. You have not signed the Developer Certificate of Origin (DCO). Sign the DCO and check DCO status.

2. The commits do not contain the Signed-off-by information. To resolve this issue, see FAQs.

After resolving the preceding issues, enter check dco in the comment box of this pull request and click Comment. The system will check DCO status again.

The following commits do not contain the Signed-off-by information:

likedislike
openharmony_ciopenharmony_ci成员
9月8日 添加了label:dco检查失败
Mmazheng
9月8日 强制推送  1 个提交:621dde10-fix: 补充ref.updateValue 命令式 API 实现;完善设置trackimage功能
openharmony_ci
openharmony_ci成员
9月8日 评论:

感谢提交 Pull Requests!
Thanks for submitting a pull request.

likedislike
openharmony_ciopenharmony_ci成员
9月8日 删除了label:dco检查失败
此处折叠了120条消息 查看更多
openharmony_ciopenharmony_ci成员
24 天前 添加了label:静态检查成功
openharmony_ciopenharmony_ci成员
24 天前 通过测试
openharmony_ci
openharmony_ci成员
24 天前 评论:

代码门禁通过
您可以通过如下链接查看门禁报告:http://dcp.openharmony.cn/workbench/cicd/detail/6aa902d364650f998bfdf037/runlist

静态检查:

# check type result report
1 codeCheck pass >>>

编译测试:
# Device build result package
1 rntpc_br_rnoh0.82 success >>>

likedislike
openharmony_ciopenharmony_ci成员
24 天前 关闭了关联的issue
openharmony_ciopenharmony_ci成员
24 天前 合入了pull request,合并节点 SHA:7bf641089c5cea17a084b1f4def3f1aba6571635