@deveco-test/deveco-code 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/package.json +6 -5
  3. package/resources/deveco/skills/customize-deveco/.deveco-builtin +1 -0
  4. package/resources/deveco/skills/customize-deveco/SKILL.md +469 -0
  5. package/resources/deveco/skills/deveco-cli/.deveco-builtin +1 -0
  6. package/resources/deveco/skills/deveco-cli/SKILL.md +240 -0
  7. package/resources/deveco/skills/hmos-arkui-develop-skill/.deveco-builtin +1 -0
  8. package/resources/deveco/skills/hmos-arkui-develop-skill/SKILL.md +83 -0
  9. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/01-layout.md +629 -0
  10. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/02-basic-components.md +645 -0
  11. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/03-data-display.md +81 -0
  12. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/04-selectors.md +76 -0
  13. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/05-media.md +60 -0
  14. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/06-advanced.md +32 -0
  15. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/07-security.md +30 -0
  16. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/08-state-decorators.md +79 -0
  17. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/09-animation.md +111 -0
  18. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/10-gesture.md +59 -0
  19. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/11-dialog-menu.md +92 -0
  20. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/12-navigation.md +81 -0
  21. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/13-rendering.md +22 -0
  22. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/14-extension.md +22 -0
  23. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/15-theme-style.md +10 -0
  24. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/16-enums.md +87 -0
  25. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/17-resources.md +1379 -0
  26. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/18-error-code.md +24 -0
  27. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-apis/_index.md +75 -0
  28. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/00-arkts-syntax.md +229 -0
  29. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/01-import.md +116 -0
  30. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/02-uicontext.md +56 -0
  31. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/03-component.md +105 -0
  32. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/04-build.md +41 -0
  33. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/05-state.md +300 -0
  34. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/06-rendering.md +67 -0
  35. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/07-attribute-params.md +219 -0
  36. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/08-navigation.md +102 -0
  37. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/09-dialog.md +72 -0
  38. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/10-style.md +90 -0
  39. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/11-extension.md +54 -0
  40. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/12-layout.md +69 -0
  41. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/13-performance.md +27 -0
  42. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/14-deprecated.md +28 -0
  43. package/resources/deveco/skills/hmos-arkui-develop-skill/references/quick-rules/_index.md +79 -0
  44. package/resources/deveco/skills/hmos-runtime-fix-skill/.deveco-builtin +1 -0
  45. package/resources/deveco/skills/hmos-runtime-fix-skill/SKILL.md +187 -0
  46. package/resources/deveco/skills/hmos-runtime-fix-skill/SKILL_CN.md +160 -0
  47. package/resources/deveco/skills/hmos-runtime-fix-skill/evals/evals.json +17 -0
  48. package/resources/deveco/skills/hmos-runtime-fix-skill/reference/businesserror_patterns.md +17 -0
  49. package/resources/deveco/skills/hmos-runtime-fix-skill/reference/error_patterns.md +31 -0
  50. package/resources/deveco/skills/hmos-runtime-fix-skill/reference/fault-mode-library.md +57 -0
  51. package/resources/deveco/skills/hmos-runtime-fix-skill/reference/outofmemoryerror_patterns.md +19 -0
  52. package/resources/deveco/skills/hmos-runtime-fix-skill/reference/rangeerror_patterns.md +15 -0
  53. package/resources/deveco/skills/hmos-runtime-fix-skill/reference/referenceerror_patterns.md +23 -0
  54. package/resources/deveco/skills/hmos-runtime-fix-skill/reference/syntaxerror_patterns.md +14 -0
  55. package/resources/deveco/skills/hmos-runtime-fix-skill/reference/typeerror_patterns.md +19 -0
  56. package/resources/deveco/skills/hmos-runtime-fix-skill/reference/urierror_patterns.md +17 -0
  57. package/resources/deveco/skills/hmos-runtime-fix-skill/scripts/collect-hilog.mjs +120 -0
  58. package/resources/deveco/skills/hmos-runtime-fix-skill/scripts/jscrash-report.mjs +138 -0
  59. package/resources/deveco/skills/hmos-runtime-fix-skill/scripts/parse-jscrash-log.mjs +126 -0
  60. package/resources/deveco/skills/hmos-runtime-fix-skill/scripts/shared/deveco-cli.mjs +79 -0
  61. package/resources/deveco/skills/hmos-runtime-fix-skill/scripts/shared/jscrash-parse.mjs +389 -0
  62. package/resources/deveco/skills/hmos-runtime-fix-skill/scripts/shared/utils.mjs +27 -0
@@ -0,0 +1,81 @@
1
+ ## 3. 数据展示组件
2
+
3
+
4
+ > **组件索引**:`Gauge`、`DataPanel`、`QRCode`、`CalendarPicker / TextClock / TextTimer 速查`
5
+
6
+ ### Gauge
7
+
8
+ 仪表盘组件。
9
+
10
+ **构造:** `Gauge(options: GaugeOptions)`
11
+
12
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
13
+ |------|------|------|--------|------|
14
+ | value | number | 是 | — | 当前值 |
15
+ | min | number | 否 | 0 | 最小值 |
16
+ | max | number | 否 | 100 | 最大值 |
17
+
18
+ **属性方法:**
19
+
20
+ | 方法 | 签名 | 默认值 | 说明 |
21
+ |------|------|--------|------|
22
+ | .value | `.value(value: number)` | — | 当前值 |
23
+ | .startAngle | `.startAngle(value: number)` | 0 | 起始角度 |
24
+ | .endAngle | `.endAngle(value: number)` | 360 | 结束角度 |
25
+ | .colors | `.colors(value: Array)` | — | 颜色分段 |
26
+ | .strokeWidth | `.strokeWidth(value: Length)` | 4vp | 线宽 |
27
+ | .description | `.description(value: CustomBuilder)` | — | 描述区域 |
28
+ | .trackShadow | `.trackShadow(value: ShadowOptions)` | — | 轨道阴影 |
29
+ | .indicator | `.indicator(value: GaugeIndicatorOptions)` | — | 指示器 |
30
+
31
+ ---
32
+
33
+ ### DataPanel
34
+
35
+ 数据面板。
36
+
37
+ **构造:** `DataPanel(options: DataPanelOptions)`
38
+
39
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
40
+ |------|------|------|--------|------|
41
+ | values | number[] | 是 | — | 数据值(最多9项) |
42
+ | max | number | 否 | 100 | 最大值 |
43
+ | type | DataPanelType | 否 | Circle | 类型(Line/Circle) |
44
+
45
+ **属性方法:**
46
+
47
+ | 方法 | 签名 | 默认值 | 说明 |
48
+ |------|------|--------|------|
49
+ | .closeEffect | `.closeEffect(value: boolean)` | false | 关闭动效 |
50
+ | .valueColors | `.valueColors(value: Array\<ResourceColor \| LinearGradient\>)` | — | 数据颜色 |
51
+ | .trackBackgroundColor | `.trackBackgroundColor(value: ResourceColor)` | — | 轨道背景色 |
52
+ | .strokeWidth | `.strokeWidth(value: Length)` | 24vp | 线宽 |
53
+ | .trackShadow | `.trackShadow(value: ShadowOptions)` | — | 轨道阴影 |
54
+
55
+ ---
56
+
57
+ ### QRCode
58
+
59
+ 二维码组件。
60
+
61
+ **构造:** `QRCode(value: string)`
62
+
63
+ **属性方法:**
64
+
65
+ | 方法 | 签名 | 默认值 | 说明 |
66
+ |------|------|--------|------|
67
+ | .color | `.color(value: ResourceColor)` | Black | 二维码颜色 |
68
+ | .backgroundColor | `.backgroundColor(value: ResourceColor)` | White | 背景色 |
69
+ | .contentOpacity | `.contentOpacity(value: number)` | 1.0 | 内容透明度 |
70
+
71
+ ---
72
+
73
+ ### CalendarPicker / TextClock / TextTimer 速查
74
+
75
+ | 组件 | 构造签名 | 核心属性 | 核心事件 |
76
+ |------|---------|---------|---------|
77
+ | **CalendarPicker** | `CalendarPicker(options?: CalendarPickerOptions)` | `.selectedDate(Date)` `.edgeAlign(CalendarAlign)` `.startDate(Date)` `.endDate(Date)` | `.onDateChange(callback)` |
78
+ | **TextClock** | `TextClock(options?: {timeZoneOffset?, is24Hour?})` | `.format(string)` | `.onDateChange(callback)` |
79
+ | **TextTimer** | `TextTimer(options?: {isCountDown?, count?, controller?})` | `.format(string)` `.fontColor()` `.fontSize()` | `.onTimer(callback)` |
80
+
81
+ ---
@@ -0,0 +1,76 @@
1
+ ## 4. 选择器组件
2
+
3
+
4
+ > **组件索引**:`DatePicker`、`TimePicker`、`TextPicker`、`PatternLock`、`Stepper / StepperItem 速查`
5
+
6
+ ### DatePicker
7
+
8
+ 日期选择器。
9
+
10
+ **构造:** `DatePicker(options?: DatePickerOptions)`
11
+
12
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
13
+ |------|------|------|--------|------|
14
+ | start | Date | 否 | 1970-1-1 | 起始日期 |
15
+ | end | Date | 否 | 2100-12-31 | 结束日期 |
16
+ | selected | Date | 否 | 当前日期 | 选中日期 |
17
+ | lunar | boolean | 否 | false | 农历 |
18
+
19
+ **属性方法:** `.lunar(boolean)`
20
+
21
+ **事件:** `.onDateChange(callback)` `.onDateAccept(callback)`
22
+
23
+ ---
24
+
25
+ ### TimePicker
26
+
27
+ 时间选择器。
28
+
29
+ **构造:** `TimePicker(options?: TimePickerOptions)`
30
+
31
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
32
+ |------|------|------|--------|------|
33
+ | selected | Date | 否 | 当前时间 | 选中时间 |
34
+ | useMilitaryTime | boolean | 否 | true | 24小时制 |
35
+
36
+ **事件:** `.onChange(callback)`
37
+
38
+ ---
39
+
40
+ ### TextPicker
41
+
42
+ 文本选择器。
43
+
44
+ **构造:** `TextPicker(options?: TextPickerOptions)`
45
+
46
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
47
+ |------|------|------|--------|------|
48
+ | range | string[] \| Resource | 否 | — | 数据范围 |
49
+ | selected | number | 否 | 0 | 选中索引 |
50
+ | value | string | 否 | — | 选中值 |
51
+
52
+ **属性方法:** `.canLoop(boolean)` `.defaultPickerItemHeight(number)`
53
+
54
+ **事件:** `.onChange(callback)` `.onAccept(callback)`
55
+
56
+ ---
57
+
58
+ ### PatternLock
59
+
60
+ 图案密码锁。
61
+
62
+ **构造:** `PatternLock(options?: PatternLockOptions)`
63
+
64
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
65
+ |------|------|------|--------|------|
66
+ | controller | PatternLockController | 否 | — | 控制器 |
67
+ | sideLength | number | 否 | 300vp | 边长 |
68
+ | circleRadius | number | 否 | 14vp | 圆点半径 |
69
+ | regularColor | ResourceColor | 否 | #FF182431 | 常规颜色 |
70
+ | selectedColor | ResourceColor | 否 | #FF182431 | 选中颜色 |
71
+ | activeColor | ResourceColor | 否 | #FF182431 | 激活颜色 |
72
+ | pathColor | ResourceColor | 否 | #FF317AF7 | 路径颜色 |
73
+
74
+ **属性方法:** `.autoReset(boolean)` `.challengeResult(PatternLockChallengeResult)`
75
+
76
+ **事件:** `.onPatternComplete(callback: (input: number[]) => void)`
@@ -0,0 +1,60 @@
1
+ ## 5. 媒体与绘图组件
2
+
3
+ ### Video
4
+
5
+ 视频播放组件。
6
+
7
+ **构造:** `Video(value: VideoOptions)`
8
+
9
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
10
+ |------|------|------|--------|------|
11
+ | src | string \| Resource | 是 | — | 视频源 |
12
+ | currentProgressRate | number \| PlaybackSpeed | 否 | 1 | 播放倍速 |
13
+ | previewUri | string \| Resource \| PixelMap | 否 | — | 预览图 |
14
+ | controller | VideoController | 否 | — | 控制器 |
15
+
16
+ **属性方法:**
17
+
18
+ | 方法 | 签名 | 默认值 | 说明 |
19
+ |------|------|--------|------|
20
+ | .muted | `.muted(value: boolean)` | false | 静音 |
21
+ | .autoPlay | `.autoPlay(value: boolean)` | false | 自动播放 |
22
+ | .controls | `.controls(value: boolean)` | true | 显示控制栏 |
23
+ | .loop | `.loop(value: boolean)` | false | 循环播放 |
24
+ | .objectFit | `.objectFit(value: ImageFit)` | Cover | 填充方式 |
25
+
26
+ **事件:**
27
+
28
+ | 事件 | 签名 | 说明 |
29
+ |------|------|------|
30
+ | .onStart | `.onStart(event: () => void)` | 播放开始 |
31
+ | .onPause | `.onPause(event: () => void)` | 暂停 |
32
+ | .onFinish | `.onFinish(event: () => void)` | 播放完成 |
33
+ | .onError | `.onError(event: () => void)` | 错误 |
34
+ | .onPrepared | `.onPrepared(callback: Callback<PreparedInfo>)` | 准备完成,PreparedInfo 有 `.duration` 属性(秒) |
35
+ | .onSeeking | `.onSeeking(callback: Callback<PlaybackInfo>)` | 拖动进度,PlaybackInfo 有 `.time` 属性(秒) |
36
+ | .onUpdate | `.onUpdate(callback: Callback<PlaybackInfo>)` | 播放进度更新,PlaybackInfo 有 `.time` 属性(秒) |
37
+
38
+ > 注意:onUpdate/onPrepared 回调参数是**对象**不是 number。不存在 onTimeUpdate。
39
+ > 官方示例写法:`.onUpdate((e?: TimeObject) => { if (e) { let t = e.time } })`
40
+
41
+ ---
42
+
43
+ ### Canvas / Shape 绘图速查
44
+
45
+ | 组件/接口 | 构造签名 | 核心方法/属性 |
46
+ |-----------|---------|-------------|
47
+ | **Canvas** | `Canvas(context?: CanvasRenderingContext2D)` | 子组件方式使用,context 提供 2D 绑定 |
48
+ | **CanvasRenderingContext2D** | `new CanvasRenderingContext2D(settings?)` | `fillRect/strokeRect/clearRect/drawImage/fillText/strokeText/arc/beginPath/closePath/moveTo/lineTo/bezierCurveTo/quadraticCurveTo/rotate/scale/translate/save/restore/clip/createLinearGradient/createRadialGradient` |
49
+ | **OffscreenCanvas** | `new OffscreenCanvas(width, height)` | 离屏渲染 |
50
+ | **Path2D** | `new Path2D()` | `addPath/arc/arcTo/bezierCurveTo/ellipse/lineTo/moveTo/quadraticCurveTo/rect` |
51
+ | **Shape** | `Shape(options?: {viewPort})` | `.fill()` `.stroke()` `.strokeWidth()` `.strokeDashArray()` `.strokeLineCap()` `.antiAlias()` |
52
+ | **Rect** | `Rect(options?)` | `.width()` `.height()` `.radiusWidth()` `.radiusHeight()` `.fill()` `.stroke()` |
53
+ | **Circle** | `Circle(options?)` | `.width()` `.height()` `.fill()` `.stroke()` |
54
+ | **Ellipse** | `Ellipse(options?)` | `.width()` `.height()` `.fill()` `.stroke()` |
55
+ | **Line** | `Line(options?)` | `.startPoint()` `.endPoint()` `.fill()` `.stroke()` `.strokeWidth()` |
56
+ | **Polyline** | `Polyline(options?)` | `.points(Array\<Point\>)` `.fill()` `.stroke()` |
57
+ | **Polygon** | `Polygon(options?)` | `.points(Array\<Point\>)` `.fill()` `.stroke()` |
58
+ | **Path** | `Path(options?)` | `.commands(string)` `.fill()` `.stroke()` |
59
+
60
+ ---
@@ -0,0 +1,32 @@
1
+ ## 6. 高级/组合组件
2
+
3
+ | 组件 | 构造签名 | 分类 | 核心说明 |
4
+ |------|---------|------|---------|
5
+ | **XComponent** | `XComponent({id, type: XComponentType, libraryname?, controller?})` | 渲染 | 支持 EGL/OpenGLES 渲染,type: surface/texture/component |
6
+ | **RichEditor** | `RichEditor(options: {controller?: RichEditorController})` | 编辑 | 富文本编辑器,支持图文混排、自定义菜单 |
7
+ | **RichText** | `RichText(content: string)` | 展示 | 富文本展示,支持 HTML 子集 |
8
+ | **TreeView** | `TreeView({treeController, itemProvider})` | 树形 | 树形列表 |
9
+ | **Chip** | `Chip(options: ChipOptions)` | 标签 | `{label?, icon?, allowClose?, enabled?, backgroundColor?}` |
10
+ | **ChipGroup** | `ChipGroup(options)` | 标签组 | 管理多个 Chip |
11
+ | **ComposeListItem** | `ComposeListItem(options)` | 列表项 | 组合列表项 |
12
+ | **ComposeTitleBar** | `ComposeTitleBar(options)` | 标题栏 | 主标题栏 |
13
+ | **EditableTitleBar** | `EditableTitleBar(options)` | 标题栏 | 可编辑标题栏 |
14
+ | **SelectTitleBar** | `SelectTitleBar(options)` | 标题栏 | 选择型标题栏 |
15
+ | **TabTitleBar** | `TabTitleBar(options)` | 标题栏 | Tab 型标题栏 |
16
+ | **ToolBar / ToolBarV2** | `ToolBar(options)` / `ToolBarV2(options)` | 工具栏 | 底部工具栏 |
17
+ | **SubHeader / SubHeaderV2** | `SubHeader(options)` | 子标题 | 分组标题 |
18
+ | **Filter** | `Filter(options)` | 过滤器 | 筛选 |
19
+ | **SwipeRefresher** | `SwipeRefresher(options)` | 刷新 | 下拉刷新 |
20
+ | **SegmentButton / V2** | `SegmentButton(options)` | 分段按钮 | — |
21
+ | **ProgressButton / V2** | `ProgressButton(options)` | 进度按钮 | — |
22
+ | **DownloadFileButton** | `DownloadFileButton(options)` | 下载按钮 | — |
23
+ | **ArcButton** | `ArcButton(options)` | 圆形按钮 | 手表端 |
24
+ | **ArcSlider** | `ArcSlider(options)` | 圆形滑块 | 手表端 |
25
+ | **SplitLayout** | `SplitLayout(options)` | 分栏布局 | — |
26
+ | **FoldSplitContainer** | `FoldSplitContainer(options)` | 折叠分栏 | — |
27
+ | **MultiNavigation** | `MultiNavigation(options)` | 多级导航 | — |
28
+ | **GridObjectSortComponent** | `GridObjectSortComponent(options)` | 排序 | 网格排序 |
29
+ | **ExceptionPrompt** | `ExceptionPrompt(options)` | 提示 | 异常提示 |
30
+ | **FullScreenLaunchComponent** | `FullScreenLaunchComponent(options)` | 全屏启动 | — |
31
+
32
+ ---
@@ -0,0 +1,30 @@
1
+ ## 7. 安全组件
2
+
3
+ ### SaveButton / PasteButton
4
+
5
+ 免权限安全按钮。
6
+
7
+ **构造:**
8
+
9
+ ```typescript
10
+ SaveButton(options: SaveButtonOptions)
11
+ PasteButton(options: PasteButtonOptions)
12
+ ```
13
+
14
+ **通用属性方法 (Security 组件特有):**
15
+
16
+ | 方法 | 说明 |
17
+ |------|------|
18
+ | `.iconColor(color)` | 图标颜色 |
19
+ | `.fontColor(color)` | 字体颜色 |
20
+ | `.bgColor(color)` | 背景颜色 |
21
+ | `.borderWidth(Length)` | 边框宽度 |
22
+ | `.borderRadius(Length)` | 圆角 |
23
+ | `.iconSize(Size)` | 图标尺寸 |
24
+ | `.fontWeight(FontWeight)` | 字重 |
25
+ | `.fontSize(Length)` | 字号 |
26
+ | `.fontStyle(FontStyle)` | 字体样式 |
27
+ | `.description(ResourceStr)` | 描述文本 |
28
+ | `.textIconSpace(Length)` | 文字图标间距 |
29
+
30
+ ---
@@ -0,0 +1,79 @@
1
+ ## 8. 状态管理装饰器
2
+
3
+
4
+ > **组件索引**:`V1 装饰器`、`V1 全局状态 API`、`V2 装饰器 (API 12+)`、`V2 全局状态 API`
5
+
6
+ ### V1 装饰器
7
+
8
+ | 装饰器 | 适用场景 | 装饰变量类型 | 说明 |
9
+ |--------|---------|-------------|------|
10
+ | **@State** | 组件内状态 | Object/class/string/number/boolean | 观察第一层属性变化,触发 UI 刷新 |
11
+ | **@Prop** | 父→子单向 | 同 @State | 父组件单向传递,子组件本地副本 |
12
+ | **@Link** | 父↔子双向 | 同 @State | 双向同步,需用 `$变量` 传递 |
13
+ | **@Observed** | 类装饰器 | class | 观察类实例的嵌套属性变化 |
14
+ | **@ObjectLink** | 嵌套对象 | @Observed 装饰的类实例 | 配合 @Observed 实现嵌套观测 |
15
+ | **@Provide / @Consume** | 跨层级 | 同 @State | 祖先提供,后代消费 |
16
+ | **@Watch** | 变量监听 | 追加在其他装饰器后 | `@Watch('onChanged')` 变化时回调 |
17
+ | **@Builder** | UI 复用 | 函数 | 声明式 UI 描述函数。参数传递方式决定是否刷新(见下表) |
18
+ | **@BuilderParam** | UI 插槽 | @Builder 函数 | 接收外部传入的 UI,类型必须与传入的 @Builder 匹配 |
19
+ | **@LocalBuilder** | 本地 UI | 函数 | 不追踪外部依赖变化;@ComponentV2 中优先用 @LocalBuilder 替代 @Builder |
20
+
21
+ **@Builder 参数传递方式速查**(完整错误用法对照见 `common-mistakes/12-builder-params.md`):
22
+
23
+ | 传递方式 | 调用形式 | 状态变量变化是否刷新 | 限制 |
24
+ |---------|---------|-------------------|------|
25
+ | 按值传递(默认) | `builder(this.label)` 或 `builder(label: string)` | ❌ 不刷新 | 简单类型参数默认按值 |
26
+ | 按引用传递 | `builder({ paramA1: this.label })` 单参数对象字面量 | ✅ 刷新 | 仅 1 个参数且为对象字面量才生效;多参数不刷新 |
27
+ | 按回调传递(API 20+) | `builder(UIUtils.makeBinding(() => this.x, setter))` | ✅ 刷新且可在 Builder 内修改 | 需传 SetterCallback 才能回写 |
28
+
29
+ > ⚠️ 高频坑:按值传状态变量不刷新 / 两个及以上参数不刷新 / @Builder 内改入参报 140109 / @Builder 内建组件传整个对象不刷新。
30
+ | **@Extend** | 样式扩展 | 组件类型 | `@Extend(Text) function myStyle() {}` |
31
+ | **@Styles** | 通用样式 | 无参 | `@Styles function myStyles() {}` |
32
+ | **@StateStyles** | 多态样式 | — | {normal, pressed, disabled, focused, selected} |
33
+ | **@AnimatableExtend** | 动画扩展 | 可动画属性 | 自定义可动画扩展 |
34
+ | **@Reusable** | 组件复用 | @Component | 实现 `aboutToReuse` |
35
+ | **@Require** | 必填参数 | 变量 | 标记参数为必填 |
36
+
37
+ ### V1 全局状态 API
38
+
39
+ | API | 签名/用法 | 说明 |
40
+ |-----|----------|------|
41
+ | **AppStorage** | `.setOrCreate(key, value)` `.get(key)` `.set(key)` `.delete(key)` | 应用级全局状态 |
42
+ | **@StorageLink** | `@StorageLink('key') var: type` | 与 AppStorage 双向同步 |
43
+ | **@StorageProp** | `@StorageProp('key') var: type` | 与 AppStorage 单向同步 |
44
+ | **LocalStorage** | `new LocalStorage()` `.setOrCreate()` `.get()` | 页面/模块级状态 |
45
+ | **@LocalStorageLink** | `@LocalStorageLink('key') var: type` | 与 LocalStorage 双向同步 |
46
+ | **@LocalStorageProp** | `@LocalStorageProp('key') var: type` | 与 LocalStorage 单向同步 |
47
+ | **PersistentStorage** | `.persistProp('key', default)` `.deleteProp()` | 持久化存储 |
48
+ | **Environment** | `.envProp('key', value)` | 环境变量 |
49
+
50
+ ### V2 装饰器 (API 12+)
51
+
52
+ | 装饰器 | 适用场景 | 说明 |
53
+ |--------|---------|------|
54
+ | **@Local** | 组件内状态 | 替代 @State |
55
+ | **@Param** | 父→子传递 | 替代 @Prop/@Link |
56
+ | **@Once** | 追加 @Param | 仅初始化同步一次 |
57
+ | **@Event** | 子→父回调 | `@Event onValueChange: (val) => void` |
58
+ | **@Provider / @Consumer** | 跨层级 | V2 版 |
59
+ | **@Monitor** | 属性监听 | `@Monitor('p1','p2') onPChange(mon: IMonitor) {}` |
60
+ | **@SyncMonitor** | 同步监听 | 同步版本 |
61
+ | **@Computed** | 计算属性 | `@Computed get name(): string {}` |
62
+ | **@ObservedV2** | 类装饰器 | V2 版深度观测 |
63
+ | **@Trace** | 属性追踪 | `@Trace name: string = ''` |
64
+ | **@Type** | 类型标记 | 序列化类型 |
65
+ | **@ReusableV2** | 组件复用 | V2 版 |
66
+ | **@Binding** | 双向绑定 | V2 版双向绑定 |
67
+
68
+ ### V2 全局状态 API
69
+
70
+ | API | 签名 | 说明 |
71
+ |-----|------|------|
72
+ | **AppStorageV2** | `.connect(this, 'key', type?)` | V2 应用级状态 |
73
+ | **PersistenceV2** | `.connect(this, 'key', type?)` | V2 持久化 |
74
+ | **makeObserved** | `makeObserved(target)` | 将对象变为可观测 |
75
+ | **canBeObserved** | `canBeObserved(target)` | 判断是否可观测 |
76
+ | **getTarget** | `getTarget(proxy)` | 获取 Proxy 原始对象 |
77
+ | **addMonitor / clearMonitor** | `addMonitor(obj, prop, cb)` / `clearMonitor(id)` | 动态监听 |
78
+
79
+ ---
@@ -0,0 +1,111 @@
1
+ ## 9. 动画 API
2
+
3
+
4
+ > **组件索引**:`属性动画`、`动画曲线`、`转场动画`、`帧动画`
5
+
6
+ ### 属性动画
7
+
8
+ | API | 签名 | 参数说明 |
9
+ |-----|------|---------|
10
+ | **animateTo** | `animateTo(value: AnimateParam, event: () => void)` | 显式动画 |
11
+
12
+ > **核心语义**:`event` 闭包内必须放**状态变更**(如 `this.width = 200`),框架会对闭包内的状态变化自动插入过渡动画。闭包内不放状态变更则无动画效果。
13
+ >
14
+ > **推荐写法**:`this.getUIContext()?.animateTo({ duration: 1000, curve: Curve.EaseOut }, () => { this.widthSize = 200 })`
15
+ >
16
+ > **注意**:全局 animateTo 已从 API 18 开始废弃,推荐通过 `this.getUIContext().animateTo()` 调用。禁止在 aboutToAppear/aboutToDisappear 中调用动画。
17
+ | **animateToImmediately** | `animateToImmediately(value: AnimateParam, event: () => void)` | 立即播放 |
18
+ | **.animation** | `.animation(value: AnimateParam)` | 隐式属性动画(链式) |
19
+ | **keyframeAnimateTo** | `keyframeAnimateTo(context, keyframes, options?)` | 关键帧动画 |
20
+
21
+ > **关键约束**:`.animation()` 必须放在**被动画属性之后**,且它会作用于该组件上**所有**属性变化(不只是前一个)。建议只对需要动画的属性链末尾添加 `.animation()`,避免不相关的属性变化也被动画化。
22
+
23
+ **AnimateParam:**
24
+
25
+ | 参数 | 类型 | 默认值 | 说明 |
26
+ |------|------|--------|------|
27
+ | duration | number | 1000 | 时长(ms) |
28
+ | curve | Curve \| ICurve | Ease | 曲线 |
29
+ | delay | number | 0 | 延迟(ms) |
30
+ | iterations | number | 1 | 迭代次数 |
31
+ | playMode | PlayMode | Normal | 播放模式 |
32
+ | tempo | number | 1.0 | 速率 |
33
+ | direction | AnimationDirection | — | 方向 |
34
+ | fill | FillMode | None | 填充模式 |
35
+ | onFinish | () => void | — | 完成回调 |
36
+
37
+ ### 动画曲线
38
+
39
+ > **注意:** `curves.springCurve` 需要 **4 个参数** `(velocity, mass, stiffness, damping)`,如 `curves.springCurve(10, 1, 228, 30)`,不能只传 2 个。不存在 `curves.easeInOut()`,缓动用 `curves.initCurve(Curve.EaseInOut)`。
40
+ >
41
+ > **命名空间区别**:`curves.*`(如 curves.springCurve)需要 `import { curves } from '@kit.ArkUI'`;`Curve.*`(如 Curve.EaseInOut)是全局枚举,不需要 import。
42
+
43
+ | 曲线 | 签名 | 说明 |
44
+ |------|------|------|
45
+ | **预设曲线** | `Curve.Linear/Ease/EaseIn/EaseOut/EaseInOut/FastOutSlowIn/...` | 13种预设 |
46
+ | **贝塞尔** | `Curve.cubicBezierCurve(x1,y1,x2,y2)` | 三阶贝塞尔 |
47
+ | **弹簧** | `curves.springCurve(velocity,mass,stiffness,damping)` | **必须 4 参数**,需 `import { curves } from '@kit.ArkUI'` |
48
+ | **弹簧运动** | `Curve.springMotion(response?,dampingFraction?,velocity?)` | 弹簧物理运动 |
49
+ | **响应弹簧** | `Curve.responsiveSpringMotion(response?,dampingFraction?,velocity?)` | 响应式 |
50
+ | **插值弹簧** | `Curve.interpolatingSpring(velocity,mass,stiffness,damping)` | 插值弹簧 |
51
+ | **自定义** | `Curve.customCurve(interpolate: (t) => number)` | 自定义 |
52
+ | **初始化曲线** | `curves.initCurve(Curve.EaseInOut)` | 获取预设曲线实例 |
53
+
54
+ ### 转场动画
55
+
56
+ | API | 签名 | 说明 |
57
+ |-----|------|------|
58
+ | **.transition** | `.transition(value: TransitionEffect \| TransitionOptions)` | 出现/消失过渡 |
59
+ | **TransitionEffect** | `.OPACITY / .SLIDE / .FADE / .MOVE / .ROTATE / .SCALE / .ASYMMETRIC / .IDENTITY` | 可组合 |
60
+
61
+ ### TransitionEffect 组合用法
62
+
63
+ 通过 `.combine()` 链式组合多个转场效果,通过 `.animation()` 指定动画参数:
64
+
65
+ ```typescript
66
+ // 组合多个效果
67
+ TransitionEffect.OPACITY
68
+ .combine(TransitionEffect.scale({ x: 0, y: 0 }))
69
+ .combine(TransitionEffect.rotate({ angle: 90 }))
70
+ .animation({ duration: 300, curve: Curve.Friction })
71
+
72
+ // 非对称转场(出现和消失不同效果)
73
+ TransitionEffect.asymmetric(
74
+ TransitionEffect.scale({ x: 0, y: 0 }), // 出现效果
75
+ TransitionEffect.rotate({ angle: 90 }) // 消失效果
76
+ )
77
+
78
+ // 从边缘滑入
79
+ TransitionEffect.move(TransitionEdge.END) // TransitionEdge: TOP/BOTTOM/START/END
80
+ ```
81
+
82
+ 可用效果:OPACITY, SLIDE, scale({x,y}), rotate({angle}), opacity(value), translate({x,y}), move(TransitionEdge), asymmetric(appear, disappear)
83
+ 组合方法:`.combine(otherEffect)` 链式调用
84
+ 动画参数:`.animation({ duration, curve, delay })` 可附加在任何效果上
85
+
86
+ | **.sharedTransition** | `.sharedTransition(id, options?)` | 共享元素转场 |
87
+ | **.geometryTransition** | `.geometryTransition(id, options?)` | 几何转场 |
88
+ | **PageTransition** | `PageTransitionEnter / PageTransitionExit` | 页面转场 |
89
+
90
+ ### PageTransition 用法
91
+
92
+ ```typescript
93
+ // 页面入场
94
+ PageTransitionEnter({ duration: 500, curve: Curve.EaseOut })
95
+ .slide(SlideEffect.Right)
96
+
97
+ // 页面出场
98
+ PageTransitionExit({ duration: 500, curve: Curve.EaseIn })
99
+ .slide(SlideEffect.Left)
100
+ ```
101
+
102
+ SlideEffect 枚举:Left / Right / Up / Down
103
+
104
+ ### 帧动画
105
+
106
+ | API | 签名 | 说明 |
107
+ |-----|------|------|
108
+ | **Animator** | `animator.create({duration, easing, delay, fill, direction, iterations, begin, end})` | 创建动画 |
109
+ | **AnimatorResult** | `.play()` `.pause()` `.cancel()` `.reverse()` `.finish()` | 控制方法 |
110
+
111
+ ---
@@ -0,0 +1,59 @@
1
+ ## 10. 手势与事件
2
+
3
+
4
+ > **组件索引**:`基础手势`、`组合手势`、`手势绑定`、`通用事件`、`拖拽事件`
5
+
6
+ ### 基础手势
7
+
8
+ | 手势 | 构造签名 | 参数 |
9
+ |------|---------|------|
10
+ | **TapGesture** | `TapGesture(value?: number)` | `count?:1` `fingers?:1` |
11
+ | **LongPressGesture** | `LongPressGesture(options?)` | `fingers?:1` `repeat?:true` `duration?:500` |
12
+ | **PanGesture** | `PanGesture(options?)` | `fingers?:1` `distance?:5vp` `direction?:All` |
13
+ | **PinchGesture** | `PinchGesture(options?)` | `fingers?:2` `distance?:3vp` |
14
+ | **RotationGesture** | `RotationGesture(options?)` | `fingers?:2` `angle?:1deg` |
15
+ | **SwipeGesture** | `SwipeGesture(options?)` | `fingers?:1` `direction?:All` `speed?:100` |
16
+
17
+ ### 组合手势
18
+
19
+ | 类型 | 签名 | 说明 |
20
+ |------|------|------|
21
+ | **GestureGroup** | `GestureGroup(mode: GestureMode, ...gestures)` | Sequence/Parallel/Exclusive |
22
+
23
+ ### 手势绑定
24
+
25
+ | 方法 | 说明 |
26
+ |------|------|
27
+ | `.gesture(gesture, mask?)` | 绑定手势(子组件优先) |
28
+ | `.priorityGesture(gesture, mask?)` | 优先于子组件 |
29
+ | `.parallelGesture(gesture, mask?)` | 与子组件并行 |
30
+
31
+ ### 通用事件
32
+
33
+ | 事件 | 签名 | 说明 |
34
+ |------|------|------|
35
+ | .onClick | `.onClick((event: ClickEvent) => void)` | 点击,ClickEvent: {x,y,timestamp,target,source} |
36
+ | .onTouch | `.onTouch((event: TouchEvent) => void)` | 触摸,TouchEvent: {touches,changedTouches,type} |
37
+ | .onHover | `.onHover((isHover, event) => void)` | 鼠标悬停 |
38
+ | .onMouse | `.onMouse((event: MouseEvent) => void)` | 鼠标事件 |
39
+ | .onKeyEvent | `.onKeyEvent((event: KeyEvent) => void)` | 按键事件 |
40
+ | .onFocus | `.onFocus(() => void)` | 获取焦点 |
41
+ | .onBlur | `.onBlur(() => void)` | 失去焦点 |
42
+ | .onAppear | `.onAppear(() => void)` | 挂载 |
43
+ | .onDisappear | `.onDisappear(() => void)` | 卸载 |
44
+ | .onAreaChange | `.onAreaChange((old, new) => void)` | 区域变化 |
45
+ | .onSizeChange | `.onSizeChange((old, new) => void)` | 尺寸变化 |
46
+ | .onVisibleChange | `.onVisibleChange((isVisible) => void)` | 可见性变化 |
47
+
48
+ ### 拖拽事件
49
+
50
+ | 事件 | 签名 | 说明 |
51
+ |------|------|------|
52
+ | .onDragStart | `.onDragStart((event) => CustomBuilder \| DragItemInfo)` | 拖拽开始 |
53
+ | .onDragEnter | `.onDragEnter((event) => void)` | 拖入 |
54
+ | .onDragMove | `.onDragMove((event) => void)` | 移动 |
55
+ | .onDragLeave | `.onDragLeave((event) => void)` | 离开 |
56
+ | .onDrop | `.onDrop((event) => void)` | 释放 |
57
+ | .onDragEnd | `.onDragEnd((event) => void)` | 结束 |
58
+
59
+ ---
@@ -0,0 +1,92 @@
1
+ ## 11. 弹窗/菜单/模态
2
+
3
+
4
+ > **组件索引**:`弹窗 API`、`菜单`、`Popup`、`模态`
5
+
6
+ ### 弹窗 API
7
+
8
+ | API | 签名 | 核心参数 |
9
+ |-----|------|---------|
10
+ | **AlertDialog** | `AlertDialog.show(options)` | `{title?, message, alignment?, primaryButton?, secondaryButton?, buttons?[]}` |
11
+ | **ActionSheet** | `ActionSheet.show(options)` | `{title, message?, confirm, cancel?, sheets: SheetInfo[]}` |
12
+ | **CustomDialog** | `new CustomDialogController(options)` | `{builder, alignment?, autoCancel?, customStyle?}`;调用 `.open()` `.close()` |
13
+ | **Toast** | `promptAction.showToast({message, duration?, bottom?})` | `{message, duration?, bottom?, showMode?}` |
14
+ | **DatePickerDialog** | `DatePickerDialog.show(options)` | `{start?, end?, selected?, lunar?, onDateAccept?: (value: Date) => void, onDateChange?: (value: Date) => void}` |
15
+ | **TimePickerDialog** | `TimePickerDialog.show(options)` | `{selected?, useMilitaryTime?, onAccept?: (value: TimePickerResult) => void}` |
16
+ | **TextPickerDialog** | `TextPickerDialog.show(options)` | `{range, selected?, onAccept?: (value: TextPickerResult) => void}` |
17
+ | **CalendarPickerDialog** | `CalendarPickerDialog.show(options)` | `{selected?, onAccept?: (value: Date) => void, onCancel?, onChange?: (value: Date) => void}` |
18
+
19
+ **AlertDialog 按钮结构:**
20
+
21
+ > **按钮结构**:`{ value: string, action?: () => void, enabled?: boolean, defaultFocus?: boolean, style?: DialogButtonStyle }`
22
+ > ⚠️ 用 `value` 不用 `text`(AI 常误写为 text)
23
+
24
+ - AlertDialog 的 primaryButton/secondaryButton 和 buttons 数组中每个元素用 **`value`** 不是 `text`:`{ value: '确定', action: () => {} }`
25
+ - ActionSheet 的选项列表用 **`sheets`** 不是 `buttons`,每个选项用 **`title`** 不是 `text`:`{ title: '选项', icon?, action }`
26
+ - confirm 字段也是 `{ value, action }` 格式
27
+
28
+ ### CustomDialogController 使用模式(两步)
29
+
30
+ 步骤 1:用 @CustomDialog 装饰器定义弹窗组件
31
+ ```typescript
32
+ @CustomDialog
33
+ struct MyDialog {
34
+ controller: CustomDialogController
35
+
36
+ build() {
37
+ Column() {
38
+ Text('对话框内容')
39
+ Button('关闭')
40
+ .onClick(() => { this.controller.close() })
41
+ }
42
+ }
43
+ }
44
+ ```
45
+
46
+ 步骤 2:在父组件中创建控制器并调用
47
+ ```typescript
48
+ @Component
49
+ struct Parent {
50
+ dialogController: CustomDialogController = new CustomDialogController({
51
+ builder: MyDialog(),
52
+ alignment: DialogAlignment.Center,
53
+ autoCancel: true,
54
+ customStyle: false
55
+ })
56
+
57
+ build() {
58
+ Button('打开弹窗')
59
+ .onClick(() => { this.dialogController.open() })
60
+ }
61
+ }
62
+ ```
63
+
64
+ > **注意**:CustomDialogController 只能在 @Component/@ComponentV2 struct 内部定义并赋值才有效。控制器必须在 @CustomDialog 组件中声明为属性才能调用 close()。
65
+
66
+ ### 菜单
67
+
68
+ | 组件/方法 | 签名 | 核心参数 |
69
+ |-----------|------|---------|
70
+ | **MenuItem** | `MenuItem(options)` | `{value, icon?, startIcon?, endIcon?, selected?, onChange?}` |
71
+ | **MenuItemGroup** | `MenuItemGroup(options)` | `{header?, footer?}` |
72
+ | **.bindMenu** | `.bindMenu(content: MenuElement[] \| CustomBuilder)` | 绑定菜单 |
73
+ | **.bindContextMenu** | `.bindContextMenu(content, responseType)` | 右键/长按菜单,responseType:`ResponseType.LongPress` / `ResponseType.RightClick` |
74
+
75
+ ### Popup
76
+
77
+ | 方法 | 签名 | 核心参数 |
78
+ |------|------|---------|
79
+ | **.bindPopup** | `.bindPopup(show: boolean, options)` | `{message, placement?, offset?, showInSubWindow?, mask?, onStateChange?}` |
80
+
81
+ > **bindPopup 回调注意:** `onStateChange` 回调参数是 `{ isVisible: boolean }` **对象**,不是原始 boolean。正确写法:`onStateChange: (event: PopupStateEvent) => { this.show = event.isVisible }`
82
+
83
+ ### 模态
84
+
85
+ | 方法 | 签名 | 核心参数 |
86
+ |------|------|---------|
87
+ | **.bindSheet** | `.bindSheet($$isShow, builder, options?)` | options: `{detents?, height?, preferType?, dragBar?, backgroundColor?, blurStyle?, title?, showInSubWindow?, enableOutsideInteractive?, onWillDismiss?, onWillAppear?, onAppear?, onWillDisappear?, onDisappear?}`。注意:没有 `sheetSize` 字段,用 `detents` 或 `height` |
88
+ | **.bindContentCover** | `.bindContentCover(isShow, builder, options?)` | `{modalTransition?}` |
89
+
90
+ > **⚠️ $$ 双向绑定必须**:第一个参数必须用 `$$this.showXxx`,不能用 `this.showXxx`。只有用 $$ 绑定,设置 showXxx = false 时面板才会关闭。
91
+
92
+ ---