diff --git a/ArkUIKit/Animation/README_zh.md b/ArkUIKit/Animation/README_zh.md index bb1aeec79a7cf04b8a9250fe7ab67cb28537f1b9..b2a467777077d71c8e1a46b3b087f2341eead06a 100644 --- a/ArkUIKit/Animation/README_zh.md +++ b/ArkUIKit/Animation/README_zh.md @@ -9,22 +9,22 @@ 4. [关键帧动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-keyframeAnimateTo.md)。 5. [页面间转场](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-page-transition-animation.md)。 6. [组件内转场](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-transition-animation-component.md)。 -7. [共享元素转场](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-transition-animation-shared-elements.md)。 +7. [共享元素转场](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-shared-element-transition.md)。 8. [路径动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-motion-path-animation.md)。 9. [粒子动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-particle-animation.md)。 -10. [帧动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-animator.md)。 +10. [帧动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-animator.md)。 11. [显式动画立即下发](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-explicit-animatetoimmediately.md)。 12. [旋转屏动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-rotation-transition-animation.md)。 -13. [模糊动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-blur-effect.md) -14. [自定义属性动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-custom-attribute-animation.md) -15. [组件动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-component-animation.md) +13. [模糊动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-blur-effect.md)。 +14. [自定义属性动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-custom-attribute-animation.md)。 +15. [组件动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-component-animation.md)。 16. [传统曲线](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-traditional-curve.md)。 17. [弹簧曲线](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-spring-curve.md)。 18. [模态转场](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-modal-transition.md)。 +19. [实现属性动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-attribute-animation-apis.md)。 ### 效果预览 - | 首页 | |------------------------------------| | ![](screenshots/device/image1.png) | @@ -59,7 +59,7 @@ entry/src/main/ets/ | |---animateToImmediately // 显式动画立即下发 | | |---template1 | | | |---Index.ets -| |---animation // 属性动画（animation） +| |---animation // 实现属性动画 | | |---template1 | | | |---Index.ets | | |---template2 @@ -210,70 +210,94 @@ entry/src/ohosTest/ ``` ### 具体实现 -1. 自定义属性动画 - 数值类型可动画属性功能封装在AnimatablePropertyModule，源码参考：[Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/AnimatableProperty/template1/Index.ets) +1. 显示动画（animateTo）：提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。源码参考：[animateTo/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/animateTo/template1/Index.ets) + * 提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。 + * 同属性动画，布局类改变宽高的动画，内容都是直接到终点状态，例如文字、Canvas的内容等，如果要内容跟随宽高变化，可以使用renderFit属性配置。 +2. 属性动画 (animation)：组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。源码参考：[animation/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/animation/template1/Index.ets) + * 支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。布局类改变宽高的动画，内容都是直接到终点状态，例如文字、Canvas的内容等，如果要内容跟随宽高变化，可以使用renderFit属性配置。 +3. 动画衔接：使用animation接口作用的属性值，即可产生动画。源码参考：[cohesion/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/SupportingAgingFriendly/entry/src/main/ets/pages/cohesion/template1/Index.ets) + * 对于桌面翻页类从跟手到离手触发动画的场景，离手后动画的初始速度应承继手势速度，避免由于速度不接续导致停顿感的产生。 + * 系统已提供动画与动画、手势与动画之间的衔接能力，保证各类场景下动画平稳光滑地过渡的同时，尽可能降低开发难度。 + * 开发者仅需在animateTo动画闭包中改变属性值或者改变animation接口作用的属性值，即可产生动画。 +4. 关键帧动画：在UIContext中提供keyframeAnimateTo接口来指定若干个关键帧状态，实现分段的动画。源码参考：[keyframeAnimateTo/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/keyframeAnimateTo/template1/Index.ets) + * 在UIContext中提供keyframeAnimateTo接口来指定若干个关键帧状态，实现分段的动画。 + * 同属性动画，布局类改变宽高的动画，内容都是直接到终点状态，例如文字、Canvas的内容等，如果要内容跟随宽高变化，可以使用renderFit属性配置。 +5. 页面间转场：当路由(router)进行切换时，可以通过在pageTransition函数中自定义页面入场和页面退场的转场动效。源码参考：[pageTransition/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/pageTransition/template1/Index.ets) + * 当路由(router)进行切换时，可以通过在pageTransition函数中自定义页面入场和页面退场的转场动效。 + * 设置PageTransitionOptions参数（如duration、curve、delay等），结合CommonTransition的slide（滑入滑出方向）、translate（平移）、scale（缩放）、opacity（透明度）等方法定义动画效果。 + * 可以通过onEnter/onExit回调逐帧处理转场进度（progress从0到1）； +6. 组件内转场：主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效。源码参考：[compTransition/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/compTransition/template1/Index.ets) + * 通过transition属性配置转场参数，在组件插入和删除时显示过渡动效。 +7. 共享元素转场 (一镜到底)：共享元素转场是一种界面切换时对相同或者相似的两个元素做的一种位置和大小匹配的过渡动画效果，也称一镜到底动效。源码参考：[shareTransition/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/SupportingAgingFriendly/entry/src/main/ets/pages/shareTransition/template1/Index.ets) + * 不新建容器并直接变化原容器。通过在已有容器上增删组件触发transition，搭配组件属性动画实现一镜到底效果。 + * 新建容器并跨容器迁移组件。利用Stack内后定义组件在最上方的特性控制组件在跨节点迁移后位z序最高。 + * 新建容器并跨容器迁移组件。利用Navigation的自定义导航转场动画能力实现一镜到底动效。共享元素转场期间，组件由消失页面迁移至出现页面。 + * 新建容器并跨容器迁移组件。实现半模态转场（bindSheet）的同时，组件从初始界面做一镜到底动画到半模态页面的效果，可以使用这样的设计思路。将SheetOptions中的mode设置为SheetMode.EMBEDDED，该模式下新起的页面可以覆盖在半模态弹窗上，页面返回后该半模态依旧存在，半模态面板内容不丢失。在半模态转场的同时设置一全模态转场（bindContentCover）页面无转场出现，该页面仅有需要做共享元素转场的组件，通过属性动画，展示组件从初始界面至半模态页面的一镜到底动效，并在动画结束时关闭页面，并将该组件迁移至半模态页面。 + * 使用geometryTransition共享元素转场。geometryTransition用于组件内隐式共享元素转场，在视图状态切换过程中提供丝滑的上下文继承过渡体验。 + * geometryTransition的使用方式为对需要添加一镜到底动效的两个组件使用geometryTransition接口绑定同一id，这样在其中一个组件消失同时另一个组件创建出现的时候，系统会对二者添加一镜到底动效。 + * geometryTransition绑定两个对象的实现方式使得geometryTransition区别于其他方法，最适合用于两个不同对象之间完成一镜到底。 +8. 路径动画：设置组件进行位移动画时的运动路径。源码参考：[motionPath/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/motionPath/template1/Index.ets) + * 可通过motionPath设置组件进行位移动画时的运动路径。 +9. 粒子动画：粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。源码参考：[particle/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/particle/template1/Index.ets) + * 动画元素是一个个粒子，这些粒子可以是圆点、图片。 + * 通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画，来营造一种氛围感。 +10. 帧动画：通过向应用提供onFrame逐帧回调，帧动画使开发者能够在应用的每一帧设置属性值，从而实现组件属性值变化的自然过渡，营造出动画效果。源码参考：[animator/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/animator/template1/Index.ets) + * 使用帧动画ohos.animator开发者可每帧修改UI侧属性值，UI侧属性实时更新。 + * 在属性动画UI侧只计算动画最终状态，动画过程为渲染值在改变，UI侧一直为动画最终状态，不感知实时渲染值。 + * 帧动画在动画过程中即可实时响应，而属性动画按最终状态响应。 +11. 显式动画立即下发：animateToImmediately接口用来提供显式动画立即下发功能。同时加载多个属性动画的情况下，使用该接口可以立即执行闭包代码中状态变化导致的过渡动效。源码参考：[animateToImmediately/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/animateToImmediately/template1/Index.ets) + * 与animateTo相比，animateToImmediately能即时将生成的动画指令发送至渲染层执行，无需等待vsync信号，从而在视觉效果上实现部分动画的优先呈现。 + * 当应用的主线程存在耗时操作，且需提前更新部分用户界面时，此接口可有效缩短应用的响应延迟。 + * animateToImmediately仅支持渲染层上的属性动画提前执行，而无法使UI侧的逐帧属性动画提前。 +12. 旋转屏动画：旋转屏动画主要分为两类：布局切换的旋转屏动画和透明度变化的旋转屏动画，旨在实现屏幕显示方向变化时的自然过渡。源码参考：[rotation/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/rotation/template1/Index.ets) + * 布局切换时的旋转屏动画，是在屏幕显示方向改变时，为窗口与应用视图同步旋转而设计的大小和位置过渡动画。 + * 这种布局切换的旋转屏动画是系统默认的，便于开发者实现。当屏幕显示方向变化时，系统会生成窗口旋转动画，并自动调整窗口大小以匹配旋转后的尺寸。 + * 在此过程中，窗口会通知对应的应用，要求其根据新的窗口大小重新布局，产生与窗口旋转动画参数相同的布局动画。 + * 透明度变化的旋转屏动画在屏幕显示方向变化时启用，当窗口进行旋转动画时，为旋转过程中新增或删除的组件添加默认透明度转场，以实现组件的优雅出现和消失。 + * 此功能通过监听窗口旋转事件，在事件中切换组件的视图效果，如果消失视图的根节点和新出现视图的根节点未设置转场效果，会为其自动添加默认透明度转场（即TransitionEffect.OPACITY），展现出透明度的渐隐和渐显效果。 +13. 模糊动画：使用backdropBlur为组件添加背景模糊。源码参考：[animationBlur/template1/blurEffectsExample.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/SupportingAgingFriendly/entry/src/main/ets/pages/animationBlur/template1/blurEffectsExample.ets) + * 模糊和阴影效果可以让物体看起来更加立体，使得动画更加生动。 + * 提供了丰富的效果接口，开发者可快速打造出精致、个性化的效果。 + * 常用的模糊、阴影和色彩效果。 +14. 自定义属性动画：数值类型可动画属性功能封装在AnimatablePropertyModule，源码参考：[Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/AnimatableProperty/template1/Index.ets) * 自定义可动画属性接口：使用@AnimatableExtend装饰器为 Text 组件封装animatableWidth方法，内部调用系统width属性接口，源码参考上述AnimatablePropertyExample中对应方法。 * 动画触发与使用：在AnimatablePropertyExample组件中，通过@State修饰的textWidth变量控制宽度值，为animatableWidth绑定animation配置动画参数，在 Button 的onClick事件中修改textWidth触发动画，实现 Text 组件宽度的动画效果。 - 自定义类型可动画属性功能封装在AnimatedShapeModule，源码参考：[Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/AnimatableProperty/template2/Index.ets) + 自定义类型可动画属性功能封装在AnimatedShapeModule，源码参考：[Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/AnimatableProperty/template2/Index.ets) * 自定义可动画数据类型：实现PointClass和PointVector类，分别继承数组并实现AnimatableArithmetic接口的add、subtract、multiply、equals等方法，支持动画框架对自定义点集合类型的计算，源码参考上述AnimatedShape中对应类的实现。 * 自定义可动画属性接口：使用@AnimatableExtend装饰器为 Polyline 组件封装animatablePoints方法，内部调用系统points属性接口，源码参考上述AnimatedShape中对应方法。 * 动画触发与使用：在AnimatedShape组件中，通过@State修饰的polyline1Vec等变量控制图形点集合，为animatablePoints绑定animation配置动画参数，在 Polyline 的onClick事件中切换点集合变量触发动画，实现 Polyline 图形形状的动画效果。 -2. 帧动画：通过向应用提供onFrame逐帧回调，帧动画使开发者能够在应用的每一帧设置属性值，从而实现组件属性值变化的自然过渡，营造出动画效果。源码参考[animator/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/animator/template1/Index.ets) - * 使用帧动画ohos.animator开发者可每帧修改UI侧属性值，UI侧属性实时更新。 - * 在属性动画UI侧只计算动画最终状态，动画过程为渲染值在改变，UI侧一直为动画最终状态，不感知实时渲染值。 - * 帧动画在动画过程中即可实时响应，而属性动画按最终状态响应。 -3. 模糊动画：使用backdropBlur为组件添加背景模糊。源码参考[animationBlur/template1/blurEffectsExample.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/SupportingAgingFriendly/entry/src/main/ets/pages/animationBlur/template1/blurEffectsExample.ets) - * 模糊和阴影效果可以让物体看起来更加立体，使得动画更加生动。 - * 提供了丰富的效果接口，开发者可快速打造出精致、个性化的效果。 - * 常用的模糊、阴影和色彩效果。 -4. 动画衔接：使用animation接口作用的属性值，即可产生动画。源码参考[cohesion/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/SupportingAgingFriendly/entry/src/main/ets/pages/cohesion/template1/Index.ets) - * 对于桌面翻页类从跟手到离手触发动画的场景，离手后动画的初始速度应承继手势速度，避免由于速度不接续导致停顿感的产生。 - * 系统已提供动画与动画、手势与动画之间的衔接能力，保证各类场景下动画平稳光滑地过渡的同时，尽可能降低开发难度。 - * 开发者仅需在animateTo动画闭包中改变属性值或者改变animation接口作用的属性值，即可产生动画。 -5. 组件动画 -组件默认动画功能封装在ComponentDefaultAnimationModule，源码参考：[Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/component/template1/Index.ets) +15. 组件动画：组件默认动画功能封装在ComponentDefaultAnimationModule，源码参考：[Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/component/template1/Index.ets) * 默认动画特性：ArkUI 部分基础组件（如 Checkbox、Button、List 等）内置了状态切换或交互反馈动画。例如 Checkbox 的勾选 / 取消动效、Button 的点击高亮反馈、List 的滑动过渡效果，这些动画无需开发者手动编写逻辑，能直观提示用户操作状态（如选中、点击生效）。 * 使用方式：直接声明组件并配置基础属性（如 Checkbox 的shape、size、select状态），当组件状态发生变更时（如通过交互修改select值），默认动画会自动触发，简化了基础交互场景的动效实现。 * 适用场景：适用于需要快速实现标准化交互反馈的场景，无需关注动画细节即可让界面具备基础生动性，减少开发工作量。 - Scroll 组件定制化动效封装在TaskSwitchModule，源码参考：[Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/component/template2/Index.ets) + Scroll 组件定制化动效封装在TaskSwitchModule，源码参考：[Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/component/template2/Index.ets) * 动效定制逻辑：通过Scroller和PanGesture手势监控滑动距离，结合WindowManager获取屏幕尺寸，动态计算子组件的仿射属性。例如根据滑动进度调整卡片的scale（中间卡片放大、边缘卡片正常）、translate（位移偏移）和zIndex（层级叠加），实现滑动时的立体层次感。 * 动画参数配置：为子组件绑定animation，设置不同曲线（如Curve.Smooth用于缩放过渡、curves.springMotion()用于位移弹性效果），确保滑动过程中动效自然流畅。 * 边界与校准处理：在手势结束回调中，通过计算滑动速度和偏移量，校准卡片最终位置（如左滑 / 右滑到极限时锁定位置，未满足切换距离时自动回位），保证交互体验一致性。 * 触发方式：支持滑动手势直接触发动效，也可通过点击 “Move to first/last” 按钮切换首尾位置，按钮点击会同步更新偏移量并触发动画。 - List 组件定制化动效封装在ListAutoSortModule，源码参考：[Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/component/template3/Index.ets) + List 组件定制化动效封装在ListAutoSortModule，源码参考：[Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/component/template3/Index.ets) * 动效核心实现：通过DragSortCtrl类管理列表项数据与视觉属性，该类封装了列表项移动逻辑（itemMove方法）和偏移量计算（onMove方法）。结合animateTo和createAnimator创建弹簧动画（使用interpolatingSpring曲线），在逐帧回调中更新translate属性，实现 Item 移动时的弹性过渡。 * 交互触发机制：为 ListItem 配置swipeAction，滑动 Item 后显示 “To TOP” 按钮，点击按钮时启动动画；通过attributeModifier动态应用ListItemModify中的偏移量，让列表项在移动过程中实时更新位置。 * 列表分组适配：支持将列表项分为多个ListItemGroup，动效会自动适配分组内的 Item 排列逻辑，确保移动时不破坏分组结构，保持界面布局合理性。 * 动画控制细节：通过listScroll.closeAllSwipeActions确保滑动操作完成后再启动动画，避免交互冲突；动画结束后自动更新列表数据顺序，实现视觉与数据的同步。 -6. 旋转屏动画：旋转屏动画主要分为两类：布局切换的旋转屏动画和透明度变化的旋转屏动画，旨在实现屏幕显示方向变化时的自然过渡。源码参考[rotation/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/rotation/template1/Index.ets) - * 布局切换时的旋转屏动画，是在屏幕显示方向改变时，为窗口与应用视图同步旋转而设计的大小和位置过渡动画。 - * 这种布局切换的旋转屏动画是系统默认的，便于开发者实现。当屏幕显示方向变化时，系统会生成窗口旋转动画，并自动调整窗口大小以匹配旋转后的尺寸。 - * 在此过程中，窗口会通知对应的应用，要求其根据新的窗口大小重新布局，产生与窗口旋转动画参数相同的布局动画。 - * 透明度变化的旋转屏动画在屏幕显示方向变化时启用，当窗口进行旋转动画时，为旋转过程中新增或删除的组件添加默认透明度转场，以实现组件的优雅出现和消失。 - * 此功能通过监听窗口旋转事件，在事件中切换组件的视图效果，如果消失视图的根节点和新出现视图的根节点未设置转场效果，会为其自动添加默认透明度转场（即TransitionEffect.OPACITY），展现出透明度的渐隐和渐显效果。 -7. 传统曲线：传统曲线基于数学公式，创造形状符合开发者预期的动画曲线。源码参考[traditionalCurve/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/SupportingAgingFriendly/entry/src/main/ets/pages/traditionalCurve/template1/Index.ets) - * 以三阶贝塞尔曲线为代表，通过调整曲线控制点，可以改变曲线形状，从而带来缓入、缓出等动画效果。 - * 对于同一条传统曲线，由于不具备物理含义，其形状不会因为用户行为发生任何改变，缺少物理动画的自然感和生动感。 - * 建议优先采用物理曲线创建动画，将传统曲线作为辅助用于极少数必要场景中。 -8. 弹簧曲线：使用animation接口作用的属性值，即可产生动画。源码参考[springCurve/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/SupportingAgingFriendly/entry/src/main/ets/pages/springCurve/template1/Index.ets) - * 阻尼弹簧曲线（以下简称弹簧曲线）对应的阻尼弹簧系统中，偏离平衡位置的物体一方面受到弹簧形变产生的反向作用力，被迫发生振动。 - * 另一方面，阻尼的存在为物体振动提供阻力。 - * 除阻尼为0的特殊情况，物体在振动过程中振幅不断减小，且最终趋于0，其轨迹对应的动画曲线自然连续。 -9. 共享元素转场 (一镜到底)：共享元素转场是一种界面切换时对相同或者相似的两个元素做的一种位置和大小匹配的过渡动画效果，也称一镜到底动效。源码参考[shareTransition/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/SupportingAgingFriendly/entry/src/main/ets/pages/shareTransition/template1/Index.ets) - * 不新建容器并直接变化原容器。通过在已有容器上增删组件触发transition，搭配组件属性动画实现一镜到底效果。 - * 新建容器并跨容器迁移组件。利用Stack内后定义组件在最上方的特性控制组件在跨节点迁移后位z序最高。 - * 新建容器并跨容器迁移组件。利用Navigation的自定义导航转场动画能力实现一镜到底动效。共享元素转场期间，组件由消失页面迁移至出现页面。 - * 新建容器并跨容器迁移组件。实现半模态转场（bindSheet）的同时，组件从初始界面做一镜到底动画到半模态页面的效果，可以使用这样的设计思路。将SheetOptions中的mode设置为SheetMode.EMBEDDED，该模式下新起的页面可以覆盖在半模态弹窗上，页面返回后该半模态依旧存在，半模态面板内容不丢失。在半模态转场的同时设置一全模态转场（bindContentCover）页面无转场出现，该页面仅有需要做共享元素转场的组件，通过属性动画，展示组件从初始界面至半模态页面的一镜到底动效，并在动画结束时关闭页面，并将该组件迁移至半模态页面。 - * 使用geometryTransition共享元素转场。geometryTransition用于组件内隐式共享元素转场，在视图状态切换过程中提供丝滑的上下文继承过渡体验。 - * geometryTransition的使用方式为对需要添加一镜到底动效的两个组件使用geometryTransition接口绑定同一id，这样在其中一个组件消失同时另一个组件创建出现的时候，系统会对二者添加一镜到底动效。 - * geometryTransition绑定两个对象的实现方式使得geometryTransition区别于其他方法，最适合用于两个不同对象之间完成一镜到底。 -10. 模态转场：模态转场是新的界面覆盖在旧的界面上，旧的界面不消失的一种转场方式。源码参考[modalTransition/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/modalTransition/template1/BindContentCoverDemo.ets) - * bindContentCover接口用于为组件绑定全屏模态页面，在组件出现和消失时可通过设置转场参数ModalTransition添加过渡动效。 - * bindSheet属性可为组件绑定半模态页面，在组件出现时可通过设置自定义或默认的内置高度确定半模态大小。构建半模态转场动效的步骤基本与使用bindContentCover构建全屏模态转场动效相同。 - * bindMenu属性为组件绑定弹出式菜单，通过点击触发。 - * bindContextMenu属性为组件绑定弹出式菜单，通过长按或右键点击触发。 - * bindPopup属性可为组件绑定弹窗，并设置弹窗，交互逻辑和显示状态。 - * 使用if语句实现模态转场。模态转场接口需要绑定到其他组件上，通过监听状态变量变化调起态界面。同时，也可以通过if语句，通过新增或删除组件实现模态转场效果。 +16. 传统曲线：传统曲线基于数学公式，创造形状符合开发者预期的动画曲线。源码参考：[traditionalCurve/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/SupportingAgingFriendly/entry/src/main/ets/pages/traditionalCurve/template1/Index.ets) + * 以三阶贝塞尔曲线为代表，通过调整曲线控制点，可以改变曲线形状，从而带来缓入、缓出等动画效果。 + * 对于同一条传统曲线，由于不具备物理含义，其形状不会因为用户行为发生任何改变，缺少物理动画的自然感和生动感。 + * 建议优先采用物理曲线创建动画，将传统曲线作为辅助用于极少数必要场景中。 +17. 弹簧曲线：使用animation接口作用的属性值，即可产生动画。源码参考：[springCurve/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/SupportingAgingFriendly/entry/src/main/ets/pages/springCurve/template1/Index.ets) + * 阻尼弹簧曲线（以下简称弹簧曲线）对应的阻尼弹簧系统中，偏离平衡位置的物体一方面受到弹簧形变产生的反向作用力，被迫发生振动。 + * 另一方面，阻尼的存在为物体振动提供阻力。 + * 除阻尼为0的特殊情况，物体在振动过程中振幅不断减小，且最终趋于0，其轨迹对应的动画曲线自然连续。 +18. 模态转场：模态转场是新的界面覆盖在旧的界面上，旧的界面不消失的一种转场方式。源码参考：[modalTransition/template1/Index.ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/modalTransition/template1/BindContentCoverDemo.ets) + * bindContentCover接口用于为组件绑定全屏模态页面，在组件出现和消失时可通过设置转场参数ModalTransition添加过渡动效。 + * bindSheet属性可为组件绑定半模态页面，在组件出现时可通过设置自定义或默认的内置高度确定半模态大小。构建半模态转场动效的步骤基本与使用bindContentCover构建全屏模态转场动效相同。 + * bindMenu属性为组件绑定弹出式菜单，通过点击触发。 + * bindContextMenu属性为组件绑定弹出式菜单，通过长按或右键点击触发。 + * bindPopup属性可为组件绑定弹窗，并设置弹窗，交互逻辑和显示状态。 + * 使用if语句实现模态转场。模态转场接口需要绑定到其他组件上，通过监听状态变量变化调起态界面。同时，也可以通过if语句，通过新增或删除组件实现模态转场效果。 +19. 实现属性动画：通过可动画属性改变引起UI上产生的连续视觉效果，即为属性动画。源码参考：[animation/template1//Index.ets](code/DocsSample/ArkUISample/Animation/entry/src/main/ets/pages/animation/template1/Index.ets) + * 属性动画是最基础易懂的动画，ArkUI提供三种动画接口animateTo、animation和keyframeAnimateTo驱动组件属性按照动画曲线等动画参数进行连续的变化，产生属性动画。 + ### 相关权限 diff --git a/ArkUIKit/AnimationNDK/README_zh.md b/ArkUIKit/AnimationNDK/README_zh.md index de94b0f1c5387fcb9506afddf36b7bd720229304..46dd2e0ebb72f2d12527b5832547111e080f0cd4 100644 --- a/ArkUIKit/AnimationNDK/README_zh.md +++ b/ArkUIKit/AnimationNDK/README_zh.md @@ -2,13 +2,17 @@ ## 介绍 +本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： + +1. [使用动画](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ndk-use-animation.md)。 + 本示例展示了keyFrameAnimeteto、animateTo、tranisation及animator动画。该工程中展示的接口详细描述可查如下链接： [native_animate.h](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/capi-native-animate-h.md)。 ## 效果预览 -| 预览 | 组件转场效果预览 | +| 帧动画效果预览 | 组件转场效果预览 | | -------------------------------------------- |--------------------------------------------------------| || | diff --git a/ArkUIKit/AppStorageV2/README.md b/ArkUIKit/AppStorageV2/README.md index 8817bd42b100004b0663d1acee0dd6ffe3556c91..60755b06d0cfb3cc8c160684b12ea9f50b0c0818 100644 --- a/ArkUIKit/AppStorageV2/README.md +++ b/ArkUIKit/AppStorageV2/README.md @@ -1,7 +1,8 @@ -# MVVM模式（状态管理V2）示例 +# AppStorageV2: 应用全局UI状态存储 ### 介绍 -本教程通过一个简单的待办事项应用示例，逐步引入了状态管理V2装饰器，并通过代码重构实现了MVVM架构。最终，将数据、逻辑和视图分层，使得代码结构更加清晰、易于维护。具体介绍链接： + +本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： 1. [AppStorageV2: 应用全局UI状态存储](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-new-appstoragev2.md)指南文档中示例代码片段的工程化，主要目标是实现指南中示例代码需要与sample工程文件同源。 diff --git a/ArkUIKit/ArkUIWindowSamples/CreateFloatWindow/README.md b/ArkUIKit/ArkUIWindowSamples/CreateFloatWindow/README.md index 3385f24ecfd2171ab3f8b4d9f771c3f284e29671..7324af48c7516ee5b8a551bc2c760a289354914c 100644 --- a/ArkUIKit/ArkUIWindowSamples/CreateFloatWindow/README.md +++ b/ArkUIKit/ArkUIWindowSamples/CreateFloatWindow/README.md @@ -61,7 +61,7 @@ entry/src/main/ets/ 1.本示例仅支持标准系统上运行, 支持设备：2in1。 -2.本示例为Stage模型，支持API Version 17及以上版本SDK。 +2.本示例为Stage模型，支持API Version 20及以上版本SDK。 3.本示例需要使用DevEco Studio 5.0.5 Release及以上版本才可编译运行。 diff --git a/ArkUIKit/ArkUIWindowSamples/CreateFloatWindow/entry/src/main/syscap.json b/ArkUIKit/ArkUIWindowSamples/CreateFloatWindow/entry/src/main/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUIWindowSamples/CreateFloatWindow/entry/src/main/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUIWindowSamples/CreateFloatWindow/entry/src/ohosTest/syscap.json b/ArkUIKit/ArkUIWindowSamples/CreateFloatWindow/entry/src/ohosTest/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUIWindowSamples/CreateFloatWindow/entry/src/ohosTest/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUIWindowSamples/CreateMainWindow/README.md b/ArkUIKit/ArkUIWindowSamples/CreateMainWindow/README.md index 443ee34707cc85d429fa22113be8b10ac222cf89..fba2c1e63fd9de9ccce787d96e623522554c9761 100644 --- a/ArkUIKit/ArkUIWindowSamples/CreateMainWindow/README.md +++ b/ArkUIKit/ArkUIWindowSamples/CreateMainWindow/README.md @@ -58,7 +58,7 @@ entry/src/main/ets/ 1.本示例仅支持标准系统上运行, 支持设备：华为手机、平板。 -2.本示例为Stage模型，支持API Version 17及以上版本SDK。 +2.本示例为Stage模型，支持API Version 20及以上版本SDK。 3.本示例需要使用DevEco Studio 5.0.5 Release及以上版本才可编译运行。 diff --git a/ArkUIKit/ArkUIWindowSamples/CreateMainWindow/entry/src/main/syscap.json b/ArkUIKit/ArkUIWindowSamples/CreateMainWindow/entry/src/main/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUIWindowSamples/CreateMainWindow/entry/src/main/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUIWindowSamples/CreateMainWindow/entry/src/ohosTest/syscap.json b/ArkUIKit/ArkUIWindowSamples/CreateMainWindow/entry/src/ohosTest/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUIWindowSamples/CreateMainWindow/entry/src/ohosTest/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUIWindowSamples/CreateSubWindow/README.md b/ArkUIKit/ArkUIWindowSamples/CreateSubWindow/README.md index 6c9246fd09021c7ce6460f1f65eb2e8d03c76880..2ffb5d8762955b012ffe2be7a99f648fa48935be 100644 --- a/ArkUIKit/ArkUIWindowSamples/CreateSubWindow/README.md +++ b/ArkUIKit/ArkUIWindowSamples/CreateSubWindow/README.md @@ -59,7 +59,7 @@ entry/src/main/ets/ 1.本示例仅支持标准系统上运行, 支持设备：华为手机、平板。 -2.本示例为Stage模型，支持API Version 17及以上版本SDK。 +2.本示例为Stage模型，支持API Version 20及以上版本SDK。 3.本示例需要使用DevEco Studio 5.0.5 Release及以上版本才可编译运行。 diff --git a/ArkUIKit/ArkUIWindowSamples/CreateSubWindow/entry/src/main/syscap.json b/ArkUIKit/ArkUIWindowSamples/CreateSubWindow/entry/src/main/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUIWindowSamples/CreateSubWindow/entry/src/main/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUIWindowSamples/CreateSubWindow/entry/src/ohosTest/syscap.json b/ArkUIKit/ArkUIWindowSamples/CreateSubWindow/entry/src/ohosTest/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUIWindowSamples/CreateSubWindow/entry/src/ohosTest/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUIWindowSamples/CreateSubWindow2/README.md b/ArkUIKit/ArkUIWindowSamples/CreateSubWindow2/README.md index 40e871de4fcb6d435de748b918841aaddc2a0226..5da5bf3e1a259e4254530de7f2dd5250c99004f2 100644 --- a/ArkUIKit/ArkUIWindowSamples/CreateSubWindow2/README.md +++ b/ArkUIKit/ArkUIWindowSamples/CreateSubWindow2/README.md @@ -60,7 +60,7 @@ entry/src/main/ets/ 1.本示例仅支持标准系统上运行, 支持设备：华为手机、平板。 -2.本示例为Stage模型，支持API Version 17及以上版本SDK。 +2.本示例为Stage模型，支持API Version 20及以上版本SDK。 3.本示例需要使用DevEco Studio 5.0.5 Release及以上版本才可编译运行。 diff --git a/ArkUIKit/ArkUIWindowSamples/CreateSubWindow2/entry/src/main/syscap.json b/ArkUIKit/ArkUIWindowSamples/CreateSubWindow2/entry/src/main/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUIWindowSamples/CreateSubWindow2/entry/src/main/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUIWindowSamples/CreateSubWindow2/entry/src/ohosTest/syscap.json b/ArkUIKit/ArkUIWindowSamples/CreateSubWindow2/entry/src/ohosTest/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUIWindowSamples/CreateSubWindow2/entry/src/ohosTest/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUIWindowSamples/ListenWindowStage/README.md b/ArkUIKit/ArkUIWindowSamples/ListenWindowStage/README.md index f5299968b1c99095a48e8cd30b7c332c0e3dbf9b..58dfdf935e0d5cdf8bddcb046af013c9150c607f 100644 --- a/ArkUIKit/ArkUIWindowSamples/ListenWindowStage/README.md +++ b/ArkUIKit/ArkUIWindowSamples/ListenWindowStage/README.md @@ -55,7 +55,7 @@ entry/src/main/ets/ 1.本示例仅支持标准系统上运行, 支持设备：华为手机、平板。 -2.本示例为Stage模型，支持API Version 17及以上版本SDK。 +2.本示例为Stage模型，支持API Version 20及以上版本SDK。 3.本示例需要使用DevEco Studio 5.0.5 Release及以上版本才可编译运行。 diff --git a/ArkUIKit/ArkUIWindowSamples/ListenWindowStage/entry/src/main/syscap.json b/ArkUIKit/ArkUIWindowSamples/ListenWindowStage/entry/src/main/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUIWindowSamples/ListenWindowStage/entry/src/main/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUIWindowSamples/ListenWindowStage/entry/src/ohosTest/syscap.json b/ArkUIKit/ArkUIWindowSamples/ListenWindowStage/entry/src/ohosTest/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUIWindowSamples/ListenWindowStage/entry/src/ohosTest/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUIWindowSamples/SetWindowSystemBarEnable/README.md b/ArkUIKit/ArkUIWindowSamples/SetWindowSystemBarEnable/README.md index bb4eedf22eca307bf8e049528805db0cdeddc27d..8b33876b45e931c7068d62f1f261165223b3a8c3 100644 --- a/ArkUIKit/ArkUIWindowSamples/SetWindowSystemBarEnable/README.md +++ b/ArkUIKit/ArkUIWindowSamples/SetWindowSystemBarEnable/README.md @@ -55,7 +55,7 @@ entry/src/main/ets/ 1.本示例仅支持标准系统上运行, 支持设备：华为手机、平板。 -2.本示例为Stage模型，支持API Version 17及以上版本SDK。 +2.本示例为Stage模型，支持API Version 20及以上版本SDK。 3.本示例需要使用DevEco Studio 5.0.5 Release及以上版本才可编译运行。 diff --git a/ArkUIKit/ArkUIWindowSamples/SetWindowSystemBarEnable/entry/src/main/syscap.json b/ArkUIKit/ArkUIWindowSamples/SetWindowSystemBarEnable/entry/src/main/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUIWindowSamples/SetWindowSystemBarEnable/entry/src/main/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUIWindowSamples/SetWindowSystemBarEnable/entry/src/ohosTest/syscap.json b/ArkUIKit/ArkUIWindowSamples/SetWindowSystemBarEnable/entry/src/ohosTest/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUIWindowSamples/SetWindowSystemBarEnable/entry/src/ohosTest/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUI_Binding/entry/src/main/syscap.json b/ArkUIKit/ArkUI_Binding/entry/src/main/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUI_Binding/entry/src/main/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArkUI_Binding/entry/src/ohosTest/syscap.json b/ArkUIKit/ArkUI_Binding/entry/src/ohosTest/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ArkUI_Binding/entry/src/ohosTest/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ArktsMvvmSample/README_zh.md b/ArkUIKit/ArktsMvvmSample/README_zh.md index 75ca8a973b832db7d200db7688f58fe4beb18658..e1967b553e46f7ee106992ac448ebafa4c8582b1 100644 --- a/ArkUIKit/ArktsMvvmSample/README_zh.md +++ b/ArkUIKit/ArktsMvvmSample/README_zh.md @@ -1,4 +1,4 @@ -# MVVM模式 +# MVVM模式（V1） ### 介绍 diff --git a/ArkUIKit/ArktsNewComputed/README_zh.md b/ArkUIKit/ArktsNewComputed/README_zh.md index 015bae0a4c0a149df415e9a764b764e89448b486..f7b4b87e141f4deed58346a0b721de86b7cfd37a 100644 --- a/ArkUIKit/ArktsNewComputed/README_zh.md +++ b/ArkUIKit/ArktsNewComputed/README_zh.md @@ -1,11 +1,10 @@ -# @Once：初始化同步一次 +# @Computed装饰器：计算属性 ### 介绍 -本示例展示了[@Once：初始化同步一次](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-new-once.md)装饰器的使用方法： +本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： -1. @Once用于期望变量仅初始化同步数据源一次，之后不再继续同步变化的场景； -2. 当@Once与@Param结合使用时，可以解除@Param无法在本地修改的限制，并能够触发UI刷新。此时，使用@Param和@Once的效果类似于@Local，但@Param和@Once还能接收外部传入的初始值； +1. [@Computed装饰器：计算属性](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-new-Computed.md) ### 效果预览 @@ -14,15 +13,6 @@ |-------------------------|-----------------------------|-----------------------------|-----------------------------|-----------------------------| | ![](screenshots/image1.png) | ![](screenshots/image2.png) | ![](screenshots/image3.png) | ![](screenshots/image4.png) | ![](screenshots/image5.png) | -### 具体实现 - -1. 到对应模块的官网文档，理解模块功能和使用说明 - -2. 补充对应的代码片段，确保可以运行 - -3. 拿真机，填写测试用例，运行项目 - -4. 拿真机对用例进行自动测试 ### 使用说明 @@ -38,6 +28,7 @@ entry/src/ │ │ └── pages │ │ ├── Index.ets │ │ └── ComputedInitParam.ets +│ │ └── ComputedProperty.ets │ │ └── ComputingPropertyResolution.ets │ │ └── CustomComponentUse.ets │ │ └── ObservedV2ClassUser.ets @@ -52,6 +43,14 @@ entry/src/ ``` +### 具体实现 + +1. @ComponentV2中@Computed装饰getter方法，避免UI重复计算，依赖状态变化仅重算一次； + +2. @ObservedV2类中@Computed依赖@Trace变量，异步初始化，依赖变化自动重算； + +3. @Computed计算结果可初始化子组件@Param，依赖变化时自动同步 + ### 相关权限 不涉及。 diff --git a/ArkUIKit/BuilderComponent/entry/.gitignore b/ArkUIKit/BuilderComponent/entry/.gitignore deleted file mode 100644 index e2713a2779c5a3e0eb879efe6115455592caeea5..0000000000000000000000000000000000000000 --- a/ArkUIKit/BuilderComponent/entry/.gitignore +++ /dev/null @@ -1,6 +0,0 @@ -/node_modules -/oh_modules -/.preview -/build -/.cxx -/.test \ No newline at end of file diff --git a/ArkUIKit/BuilderComponent/entry/src/ohosTest/ets/test/BuilderGuidesTest.test.ets b/ArkUIKit/BuilderComponent/entry/src/ohosTest/ets/test/BuilderGuidesTest.test.ets index 0fa4564bbf6dbd9232c3bad233f948f7a21b05fc..13ba8e81e888f62b681a9a62bf9bce74c507b618 100644 --- a/ArkUIKit/BuilderComponent/entry/src/ohosTest/ets/test/BuilderGuidesTest.test.ets +++ b/ArkUIKit/BuilderComponent/entry/src/ohosTest/ets/test/BuilderGuidesTest.test.ets @@ -336,7 +336,9 @@ export default function BuilderGuidesTest() { x: theComponentRect.right, y: theComponentPointFrom.y } - await driver.clickAt(theComponentPointFrom); + theComponent = await driver.findComponent(ON.text('1', MatchPattern.EQUALS)); + await theComponent.click(); + await driver.delayMs(1000); await driver.swipe(theComponentPointFrom.x, theComponentPointFrom.y, theComponentPointTo.x, theComponentPointTo.y, speed); theComponentBuilder = await driver.findComponent(ON.text('Global Builder', MatchPattern.EQUALS)); diff --git a/ArkUIKit/BuilderNode/entry/src/main/syscap.json b/ArkUIKit/BuilderNode/entry/src/main/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/BuilderNode/entry/src/main/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/BuilderNode/entry/src/ohosTest/syscap.json b/ArkUIKit/BuilderNode/entry/src/ohosTest/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/BuilderNode/entry/src/ohosTest/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ButtonAttribute/README_zh.md b/ArkUIKit/ButtonAttribute/README_zh.md index 6f485bf2dac1de6b4d2d2b5c15b6c6268c601aba..34b2ac874392fb919ad599bb1adb58c9847bdb6f 100644 --- a/ArkUIKit/ButtonAttribute/README_zh.md +++ b/ArkUIKit/ButtonAttribute/README_zh.md @@ -88,7 +88,7 @@ entry/src/ohosTest/ets 1.本示例仅支持标准系统上运行, 支持设备：Mate 70 Pro。 -2.本示例为Stage模型，支持API18版本full-SDK，版本号：5.1.0.107，镜像版本号：OpenHarmony_5.1.0 Release。 +2.本示例为Stage模型，支持API20版本full-SDK，版本号：5.1.0.107，镜像版本号：OpenHarmony_5.1.0 Release。 3.本示例需要使用DevEco Studio 5.0.5 Release (Build Version: 5.0.13.200， built on May 13, 2025)及以上版本才可编译运行。 diff --git a/ArkUIKit/ButtonAttribute/entry/src/main/syscap.json b/ArkUIKit/ButtonAttribute/entry/src/main/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ButtonAttribute/entry/src/main/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ButtonAttribute/entry/src/ohosTest/syscap.json b/ArkUIKit/ButtonAttribute/entry/src/ohosTest/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ButtonAttribute/entry/src/ohosTest/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ButtonComponent/README_zh.md b/ArkUIKit/ButtonComponent/README_zh.md index ff9180956e8a60edd87f57f5778fe7b0e24391a1..1e6487e2224acf1f71d21b4944fc536a25bdfd74 100644 --- a/ArkUIKit/ButtonComponent/README_zh.md +++ b/ArkUIKit/ButtonComponent/README_zh.md @@ -112,9 +112,9 @@ entry/src/ohosTest/ ### 约束与限制 -1.本示例仅支持标准系统上运行, 支持设备：RK3568。 +1.本示例仅支持标准系统上运行, 支持设备：wearable(优先使用), RK3568(需要更改“deviceTypes”) 。 -2.本示例为Stage模型，支持API21版本SDK，版本号：6.0.0.254，镜像版本号：OpenHarmony_5.0.2.57。 +2.本示例为Stage模型，支持API20版本SDK，版本号：6.0.0.254，镜像版本号：OpenHarmony_5.0.2.57。 3.本示例需要使用DevEco Studio NEXT Developer Preview2 (Build Version: 5.0.5.306， built on December 12, 2024)及以上版本才可编译运行。 diff --git a/ArkUIKit/ButtonList/README_zh.md b/ArkUIKit/ButtonList/README_zh.md index afa863073ea031c01b91928dc281c15b52707d49..7ee1c4887b4e24a435f7717cbf8d88c5e0032ac2 100644 --- a/ArkUIKit/ButtonList/README_zh.md +++ b/ArkUIKit/ButtonList/README_zh.md @@ -4,7 +4,7 @@ 本示例通过使用[ArkUI开发文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接: -1.[接入ArkTS页面](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ndk-access-the-arkts-page)。 +1. [接入ArkTS页面](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ndk-access-the-arkts-page.md) ### 效果预览 diff --git a/ArkUIKit/ChooseComponent/README_zh.md b/ArkUIKit/ChooseComponent/README_zh.md index 07f29630f3545baf30ef571a8e81f36ef3edf5b6..ded44d4b3c82d0c0f448c0260798a80be9479a55 100644 --- a/ArkUIKit/ChooseComponent/README_zh.md +++ b/ArkUIKit/ChooseComponent/README_zh.md @@ -1,12 +1,13 @@ -# ArkUI指南文档示例 +# ArkUI表单与选择组件指南文档示例 ### 介绍 本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： -1. [按钮 (Button)开发指导](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-components-button.md)。 -2. [单选框 (Radio)开发指导](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-components-radio-button.md)。 -3. [切换按钮 (Toggle)开发指导](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-components-switch.md)。 +1. [按钮 (Button)](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-components-button.md)。 +2. [单选框 (Radio)](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-components-radio-button.md)。 +3. [切换按钮 (Toggle)](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-components-switch.md)。 + ### 效果预览 | 首页 | 按钮组件目录 | 创建按钮场景示例 | @@ -53,8 +54,26 @@ entry/src/ohosTest/ |---ets | |---index.test.ets // 示例代码测试代码 ``` + ## 具体实现 -Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮、圆角矩形按钮。Button作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮 + +1. 按钮 (Button) + + * Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮、圆角矩形按钮。Button作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。 + * Button通过调用接口来创建，接口调用有两种形式，第一种通过label和ButtonOptions创建不包含子组件的按钮，第二种通过ButtonOptions创建包含子组件的按钮。 + * 设置按钮类型：Button有四种可选类型，分别为胶囊类型（Capsule）、圆形按钮（Circle）、普通按钮（Normal）和圆角矩形按钮（ROUNDED_RECTANGLE），通过type进行设置。 + +2. 单选框 (Radio) + + * Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。 + * Radio通过调用RadioOptions来创建，Radio支持设置选中状态和非选中状态的样式。 + * Radio添加事件：除支持通用事件外，Radio还用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为。 + +3. 切换按钮 (Toggle) + + * Toggle组件提供状态按钮样式、勾选框样式和开关样式，一般用于两种状态之间的切换。 + * Toggle通过调用ToggleOptions来创建，其对应接口描述是“Toggle(options: { type: ToggleType, isOn?: boolean })”。接口调用有两种形式，第一种是创建不包含子组件的Toggle，当ToggleType为Checkbox或者Switch时，用于创建不包含子组件的Toggle，第二种是创建包含子组件的Toggle，当ToggleType为Button时，只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会显示在按钮上。 + * Toggle自定义样式：通过selectedColor属性设置Toggle打开选中后的背景颜色。 ### 相关权限 @@ -68,9 +87,11 @@ Button是按钮组件，通常用于响应用户的点击操作，其类型包 1.本示例仅支持标准系统上运行, 支持设备：RK3568。 -2.本示例为Stage模型，支持API18版本SDK，版本号：5.1.0.56，镜像版本号：OpenHarmony_5.1.0.56。 +2.本示例为Stage模型，支持API20版本SDK，版本号：6.0.0.47，镜像版本号：OpenHarmony_6.0.0 Release。 + +3.本示例需要使用DevEco Studio 6.0.0 Release (Build Version: 6.0.0.858, built on September 24, 2025)及以上版本才可编译运行。 -3.本示例需要使用DevEco Studio NEXT Developer Preview2 (Build Version: 5.0.5.306， built on December 12, 2024)及以上版本才可编译运行。 +4.测试用例运行时候需要将时间限制设置大于150。 ### 下载 diff --git a/ArkUIKit/ChooseComponent/entry/src/main/syscap.json b/ArkUIKit/ChooseComponent/entry/src/main/syscap.json index 8c31ae70be25f4d1795885cb02f682f195da646f..21f22e262f2c9d14fe956f3b293d2b32e99a4330 100644 --- a/ArkUIKit/ChooseComponent/entry/src/main/syscap.json +++ b/ArkUIKit/ChooseComponent/entry/src/main/syscap.json @@ -2,6 +2,7 @@ { "devices": { "general": [ + "tablet", "default" ] }, diff --git a/ArkUIKit/ChooseComponent/entry/src/ohosTest/syscap.json b/ArkUIKit/ChooseComponent/entry/src/ohosTest/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..82b9fb6e91cfc81d5002f2fa687b706469458ac9 --- /dev/null +++ b/ArkUIKit/ChooseComponent/entry/src/ohosTest/syscap.json @@ -0,0 +1,25 @@ +{ + "devices": { + "general": [ + "tablet", + "default" + ] + }, + "production": { + "removedSysCaps": [ + "SystemCapability.HiviewDFX.HiDumper", + "SystemCapability.Security.DeviceAuth", + "SystemCapability.Multimedia.Media.AVTranscoder", + "SystemCapability.Tee.TeeClient", + "SystemCapability.Communication.Bluetooth.Core", + "SystemCapability.ArkUi.Graphics3D", + "SystemCapability.DistributedHardware.DeviceManager", + "SystemCapability.Multimedia.Drm.Core", + "SystemCapability.Advertising.Ads", + "SystemCapability.Customization.EnterpriseDeviceManager", + "SystemCapability.Security.DeviceSecurityLevel", + "SystemCapability.UserIAM.UserAuth.PinAuth", + "SystemCapability.Security.DataTransitManager" + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ChooseComponent/screenshots/device/image1.png b/ArkUIKit/ChooseComponent/screenshots/device/image1.png index 601206d1d753a54f606bdd9f1df32c6e755b31ac..f47a11ac6136b27b6e0abbaa931e165cdb52bc66 100644 Binary files a/ArkUIKit/ChooseComponent/screenshots/device/image1.png and b/ArkUIKit/ChooseComponent/screenshots/device/image1.png differ diff --git a/ArkUIKit/ChooseComponent/screenshots/device/image2.png b/ArkUIKit/ChooseComponent/screenshots/device/image2.png index eb04f65c824dde144cfd7c34adcb28bac6166832..b793dfbe04f3c9992da60c9167c924f3c6e1871f 100644 Binary files a/ArkUIKit/ChooseComponent/screenshots/device/image2.png and b/ArkUIKit/ChooseComponent/screenshots/device/image2.png differ diff --git a/ArkUIKit/ChooseComponent/screenshots/device/image3.png b/ArkUIKit/ChooseComponent/screenshots/device/image3.png index 29f949276660bf307aeecd7cbcc493998d2d9aa3..ba0ac2db3c8fdd82cce3b6bb99b9b33a68458837 100644 Binary files a/ArkUIKit/ChooseComponent/screenshots/device/image3.png and b/ArkUIKit/ChooseComponent/screenshots/device/image3.png differ diff --git a/ArkUIKit/ClipShape/entry/src/main/syscap.json b/ArkUIKit/ClipShape/entry/src/main/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ClipShape/entry/src/main/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ClipShape/entry/src/ohosTest/syscap.json b/ArkUIKit/ClipShape/entry/src/ohosTest/syscap.json new file mode 100644 index 0000000000000000000000000000000000000000..f05cf16b9d98a1c2c3e0743be84d8308047aa09a --- /dev/null +++ b/ArkUIKit/ClipShape/entry/src/ohosTest/syscap.json @@ -0,0 +1,15 @@ +{ + "devices": { + "general": [ + "default" + ], + "custom": [ + { + "xts": [ + "SystemCapability.Account.AppAccount", + "SystemCapability.Account.OsAccount" + ] + } + ] + } +} \ No newline at end of file diff --git a/ArkUIKit/ComponentsLayout/README_zh.md b/ArkUIKit/ComponentsLayout/README_zh.md index 9c4ae6121b7d82cb66fb2a1586549b80f41ea5c2..67d4ecb0a4cb38e3c114310fea4a03e91921bf75 100644 --- a/ArkUIKit/ComponentsLayout/README_zh.md +++ b/ArkUIKit/ComponentsLayout/README_zh.md @@ -25,8 +25,8 @@ entry/src/main/ets/ ### 具体实现 -* // 第一步：计算各子组件的大小。通过onMeasureSize：组件每次布局时触发，计算子组件的尺寸，其执行时间先于onPlaceChildren； -* // 第二步：放置各子组件的位置。通过onPlaceChildren：组件每次布局时触发，设置子组件的起始位置； +* 第一步：计算各子组件的大小。通过onMeasureSize：组件每次布局时触发，计算子组件的尺寸，其执行时间先于onPlaceChildren； +* 第二步：放置各子组件的位置。通过onPlaceChildren：组件每次布局时触发，设置子组件的起始位置； ### 相关权限 diff --git a/ArkUIKit/CustomCanvas/README_zh.md b/ArkUIKit/CustomCanvas/README_zh.md index 51af7b0d50d0567658b9c3e068d3c2ed1115acea..4e636931e16b24af79729791e32d9868e17d436a 100644 --- a/ArkUIKit/CustomCanvas/README_zh.md +++ b/ArkUIKit/CustomCanvas/README_zh.md @@ -2,9 +2,10 @@ ### 介绍 -本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： +本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： + +1. [使用画布绘制自定义图形 (Canvas)](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md) -1. [使用画布绘制自定义图形 (Canvas)] ### 效果预览 | 首页 | CanvasRenderingContext2D示例 diff --git a/ArkUIKit/CustomComponentsFreeze/README_zh.md b/ArkUIKit/CustomComponentsFreeze/README_zh.md index da5d7029187edf0738b034ce1fcde4e6eb93e791..bd15429639dabc200f078f7a28376ff21c5725b5 100644 --- a/ArkUIKit/CustomComponentsFreeze/README_zh.md +++ b/ArkUIKit/CustomComponentsFreeze/README_zh.md @@ -4,13 +4,7 @@ 本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接: -### 1.[线性容器(Column)](https://docs.openharmony.cn/pages/v4.1/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-column.md) - -### 2.[文本显示器(Text)](https://docs.openharmony.cn/pages/v5.1/en/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-text.md) - -### 3.[Button](https://docs.openharmony.cn/pages/v4.1/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-button.md) - -### 4[ 自定义组件冻结功能](https://docs.openharmony.cn/pages/v5.1/zh-cn/application-dev/ui/state-management/arkts-custom-components-freeze.md) +1. [自定义组件冻结功能（V1）](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-custom-components-freeze.md) ### 效果预览 | 页面1页面2跳转 | 页面2返回上一页 | TabContent创建 | LazyForEach中缓存的自定义组件进行冻结 | NavigationContentMsgStack会被设置成非激活态 | diff --git a/ArkUIKit/CustomLifecycle/README_zh.md b/ArkUIKit/CustomLifecycle/README_zh.md index d6801eaa3f4cff49915fad6d38a10ef508f8e0ad..f401ac43356de7fdc1017b77ebb2f4d690284ae8 100644 --- a/ArkUIKit/CustomLifecycle/README_zh.md +++ b/ArkUIKit/CustomLifecycle/README_zh.md @@ -5,6 +5,8 @@ 本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui) 中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的自定义组件生命周期并合理使用。 +1. [自定义组件生命周期](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-page-custom-components-lifecycle.md) + ### 效果预览 | 首页 | 交互类组件目录 | 生命周期示例 | diff --git a/ArkUIKit/DialogProject/entry/.gitignore b/ArkUIKit/DialogProject/entry/.gitignore deleted file mode 100644 index e2713a2779c5a3e0eb879efe6115455592caeea5..0000000000000000000000000000000000000000 --- a/ArkUIKit/DialogProject/entry/.gitignore +++ /dev/null @@ -1,6 +0,0 @@ -/node_modules -/oh_modules -/.preview -/build -/.cxx -/.test \ No newline at end of file diff --git a/ArkUIKit/DialogProject/entry/src/main/ets/pages/Menu/CreateMenu.ets b/ArkUIKit/DialogProject/entry/src/main/ets/pages/Menu/CreateMenu.ets index d8055982be84fd108d43a4fcd0601dbcc6478782..75165f3858ffc48a76358c3801dff01b50fe9338 100644 --- a/ArkUIKit/DialogProject/entry/src/main/ets/pages/Menu/CreateMenu.ets +++ b/ArkUIKit/DialogProject/entry/src/main/ets/pages/Menu/CreateMenu.ets @@ -114,7 +114,7 @@ export struct menuExample { .height(50) // [Start create_right_click_menu] - Button('click for Menu') + Button('Right-click for Menu') .bindContextMenu(this.MyMenu, ResponseType.RightClick) // [End create_right_click_menu] .width(160) diff --git a/ArkUIKit/DialogProject/entry/src/main/ets/pages/Menu/PopVibrateMenu.ets b/ArkUIKit/DialogProject/entry/src/main/ets/pages/Menu/PopVibrateMenu.ets index b8587ebe005fa92c64eb1c69e35194c21f092884..ac63ac3532c287680c301c61def1afa18ab15077 100644 --- a/ArkUIKit/DialogProject/entry/src/main/ets/pages/Menu/PopVibrateMenu.ets +++ b/ArkUIKit/DialogProject/entry/src/main/ets/pages/Menu/PopVibrateMenu.ets @@ -89,7 +89,7 @@ export struct PopVibrateMenuExample { // [Start popVibrate_menu] Button('click for Menu') .id('click for Menu') - .bindContextMenu(this.MyMenu, ResponseType.RightClick, { hapticFeedbackMode: HapticFeedbackMode.ENABLED}) + .bindMenu(this.MyMenu, { hapticFeedbackMode: HapticFeedbackMode.ENABLED}) // [End popVibrate_menu] .width(160) .height(50) diff --git a/ArkUIKit/DialogProject/entry/src/main/ets/pages/OverlayManager/OverlayManagerAlertDialog.ets b/ArkUIKit/DialogProject/entry/src/main/ets/pages/OverlayManager/OverlayManagerAlertDialog.ets index 04f912fc1fef338ed313795f23c83df4e6dd03bd..f0209b6feeef24f5cfebcd3537802a06b57aaa85 100644 --- a/ArkUIKit/DialogProject/entry/src/main/ets/pages/OverlayManager/OverlayManagerAlertDialog.ets +++ b/ArkUIKit/DialogProject/entry/src/main/ets/pages/OverlayManager/OverlayManagerAlertDialog.ets @@ -51,7 +51,6 @@ function builderOverlay(params: Params) { @Entry @Component export struct OverlayManagerAlertDialog { - @State message: string = 'ComponentContent'; private uiContext: UIContext = this.getUIContext(); private overlayNode: OverlayManager = this.uiContext.getOverlayManager(); private overlayContent:ComponentContent[] = []; diff --git a/ArkUIKit/DialogProject/entry/src/main/ets/pages/Toast/DefaultAndTopToast.ets b/ArkUIKit/DialogProject/entry/src/main/ets/pages/Toast/DefaultAndTopToast.ets index 602b3ace0a4c2fc1a151eb20a2e40aa5d211147e..3a01b95de18b71e63facb4b5c52b615d4577f3bc 100644 --- a/ArkUIKit/DialogProject/entry/src/main/ets/pages/Toast/DefaultAndTopToast.ets +++ b/ArkUIKit/DialogProject/entry/src/main/ets/pages/Toast/DefaultAndTopToast.ets @@ -14,7 +14,12 @@ */ // [Start toast_showDefaultAndTop] -import {promptAction} from '@kit.ArkUI'; +import { promptAction } from '@kit.ArkUI'; +import { BusinessError } from '@kit.BasicServicesKit'; +import { hilog } from '@kit.PerformanceAnalysisKit'; + +const TAG: string = '[Sample_dialogproject]'; +const DOMAIN: number = 0xFF00; @Entry @Component @@ -33,12 +38,18 @@ export struct DefaultAndTopToastExample { .height('100') .width('100%') .onClick(() => { - this.getUIContext().getPromptAction().showToast({ - message: 'ok, I am DEFAULT toast', - duration: 2000, - showMode: promptAction.ToastShowMode.DEFAULT, - bottom: 80 - }); + try { + this.getUIContext().getPromptAction().showToast({ + message: 'ok, I am DEFAULT toast', + duration: 2000, + showMode: promptAction.ToastShowMode.DEFAULT, + bottom: 80 + }); + } catch (error) { + let message = (error as BusinessError).message; + let code = (error as BusinessError).code; + hilog.error(DOMAIN, TAG, '%{public}s', 'showToast args error code is $\{code}, message is $\{message}'); + } }) Blank().height(200); @@ -50,12 +61,18 @@ export struct DefaultAndTopToastExample { .height('100') .width('100%') .onClick(() => { - this.getUIContext().getPromptAction().showToast({ - message: 'ok, I am TOP_MOST toast', - duration: 2000, - showMode: promptAction.ToastShowMode.TOP_MOST, - bottom: 85 - }); + try { + this.getUIContext().getPromptAction().showToast({ + message: 'ok, I am TOP_MOST toast', + duration: 2000, + showMode: promptAction.ToastShowMode.TOP_MOST, + bottom: 85 + }); + } catch (error) { + let message = (error as BusinessError).message; + let code = (error as BusinessError).code; + hilog.error(DOMAIN, TAG, '%{public}s', 'showToast args error code is $\{code}, message is $\{message}'); + } }) } // [StartExclude toast_showDefaultAndTop] diff --git a/ArkUIKit/DialogProject/entry/src/main/ets/pages/customdialog/CreateCustomDialogNew.ets b/ArkUIKit/DialogProject/entry/src/main/ets/pages/customdialog/CreateCustomDialogNew.ets index 7bfa2891d4006a438a641fc8c0f1b07ee9ecf087..232b343cc3086990ec5939855e3a7cda4ae75ae7 100644 --- a/ArkUIKit/DialogProject/entry/src/main/ets/pages/customdialog/CreateCustomDialogNew.ets +++ b/ArkUIKit/DialogProject/entry/src/main/ets/pages/customdialog/CreateCustomDialogNew.ets @@ -17,7 +17,7 @@ // [Start create_custom_dialog_new_customDialog_controller_default] @CustomDialog struct CustomDialogExample { - controller: CustomDialogController; + controller?: CustomDialogController; build() { Column() { diff --git a/ArkUIKit/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteraction.ets b/ArkUIKit/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteraction.ets index a9982e613173d1b893b5f79cc87e62a988942db2..8ed63b38774a13a8fff1429715f450e4b5cb2306 100644 --- a/ArkUIKit/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteraction.ets +++ b/ArkUIKit/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteraction.ets @@ -21,7 +21,7 @@ import { ComponentContent } from '@kit.ArkUI'; struct CustomDialogExample { cancel?: () => void; confirm?: () => void; - controller: CustomDialogController; + controller?: CustomDialogController; build() { Column() { @@ -37,7 +37,7 @@ struct CustomDialogExample { .lineHeight(21) } .onClick(() => { - this.controller.close(); + this.controller?.close(); }) .layoutWeight(1) .backgroundColor(Color.Transparent) @@ -52,7 +52,7 @@ struct CustomDialogExample { .fontColor($r('sys.color.font_emphasize')) } .onClick(() => { - this.controller.close(); + this.controller?.close(); }) .layoutWeight(1) .backgroundColor(Color.Transparent) diff --git a/ArkUIKit/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteractionUseConstructor.ets b/ArkUIKit/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteractionUseConstructor.ets index 61be94276dff34af1042fb226b8244669ccf03bf..6ec11d27812b07eafe6dd678fd15119270c4d674 100644 --- a/ArkUIKit/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteractionUseConstructor.ets +++ b/ArkUIKit/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteractionUseConstructor.ets @@ -23,7 +23,7 @@ struct CustomDialogExample { } confirm: () => void = () => { } - controller: CustomDialogController; + controller?: CustomDialogController; build() { Column() { @@ -32,14 +32,14 @@ struct CustomDialogExample { Flex({ justifyContent: FlexAlign.SpaceAround }) { Button('cancel') .onClick(() => { - this.controller.close(); + this.controller?.close(); if (this.cancel) { this.cancel(); } }).backgroundColor(0xffffff).fontColor(Color.Black) Button('confirm') .onClick(() => { - this.controller.close(); + this.controller?.close(); if (this.confirm) { this.confirm(); } diff --git a/ArkUIKit/DialogProject/entry/src/main/ets/pages/popup/CustomPopup.ets b/ArkUIKit/DialogProject/entry/src/main/ets/pages/popup/CustomPopup.ets index d277b38f855cd00f3190fefe9a2d165de64896cc..9dc68db4dc3405b3c9d8bb73dac5f222d75be8ed 100644 --- a/ArkUIKit/DialogProject/entry/src/main/ets/pages/popup/CustomPopup.ets +++ b/ArkUIKit/DialogProject/entry/src/main/ets/pages/popup/CustomPopup.ets @@ -31,29 +31,32 @@ export struct CustomPopupExample { build() { NavDestination() { - Column() { - Button('CustomPopupOptions') - .id('CustomPopupOptions') - .margin({ top: 300 }) - .onClick(() => { - this.customPopup = !this.customPopup; - }) - .bindPopup(this.customPopup, { - builder: this.popupBuilder, // 气泡的内容 - placement: Placement.Bottom, // 气泡的弹出位置 - popupColor: Color.Pink, // 气泡的背景色 - onStateChange: (e) => { - if (!e.isVisible) { - this.customPopup = false - } + Column() { + Button('CustomPopupOptions') + .id('CustomPopupOptions') + .margin({ top: 300 }) + .onClick(() => { + this.customPopup = !this.customPopup; + }) + .bindPopup(this.customPopup, { + builder: this.popupBuilder, // 气泡的内容 + placement: Placement.Bottom, // 气泡的弹出位置 + popupColor: Color.Pink, // 气泡的背景色 + backgroundBlurStyle: BlurStyle.NONE, + onStateChange: (e) => { + if (!e.isVisible) { + this.customPopup = false } - }) - } - .height('100%') + } + }) + } + .height('100%') } // [StartExclude custom_popup] .title($r('app.string.custom_popup')) + // [EndExclude custom_popup] } } + // [End custom_popup] \ No newline at end of file diff --git a/ArkUIKit/DialogProject/entry/src/ohosTest/ets/test/CustomDialog.test.ets b/ArkUIKit/DialogProject/entry/src/ohosTest/ets/test/CustomDialog.test.ets index 7a1ab7855d25950d4c4b26343af015c477f09c6e..74d015e1f8a8da7c40684af3f957774bbf880842 100644 --- a/ArkUIKit/DialogProject/entry/src/ohosTest/ets/test/CustomDialog.test.ets +++ b/ArkUIKit/DialogProject/entry/src/ohosTest/ets/test/CustomDialog.test.ets @@ -55,7 +55,6 @@ export default function CustomDialogTest() { await button_list.click(); let button_list1 = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.CustomDialog_nest')), MatchPattern.CONTAINS)); await button_list1.click(); - let button_list2 = await driver.findComponent(ON.text('Click', MatchPattern.CONTAINS)); await button_list2.click(); let button_list3 = await driver.findComponent(ON.text('confirm', MatchPattern.CONTAINS)); @@ -63,57 +62,67 @@ export default function CustomDialogTest() { let button_list4 = await driver.findComponent(ON.text('close', MatchPattern.CONTAINS)); await button_list4.click(); await driver.pressBack(); - await sleep(1000); + await sleep(2000); let button_createCustomDialog1 = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.CreateCustomDialogNew_title')), MatchPattern.CONTAINS)); await button_createCustomDialog1.click(); + await sleep(1000); let button_createCustomDialog1_click = await driver.findComponent(ON.text('click me', MatchPattern.CONTAINS)); await button_createCustomDialog1_click.click(); await driver.pressBack(); await driver.pressBack(); + await sleep(1000); + await driver.swipe(500, 1000, 500, 400); + await sleep(1000); let button_dialogInteractionUseConstructor = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.DialogInteractionUseConstructor_title')), MatchPattern.CONTAINS)); await button_dialogInteractionUseConstructor.click(); + await sleep(1000); let button_dialogInteractionUseConstructor_click = await driver.findComponent(ON.text('click me', MatchPattern.CONTAINS)); await button_dialogInteractionUseConstructor_click.click(); let button_dialogInteractionUseConstructor_confirm = await driver.findComponent(ON.text('confirm', MatchPattern.CONTAINS)); await button_dialogInteractionUseConstructor_confirm.click(); await driver.pressBack(); - - let stackList = await driver.findComponent(ON.type('List')); - await stackList.scrollSearch(ON.text(resource.resourceToString($r('app.string.DialogInteractionUseButton_title')))); + await sleep(2000); let button_dialogInteractionUseButton = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.DialogInteractionUseButton_title')), MatchPattern.CONTAINS)); await button_dialogInteractionUseButton.click(); + await sleep(1000); let button_dialogInteractionUseButton_click = await driver.findComponent(ON.text('click me', MatchPattern.CONTAINS)); await button_dialogInteractionUseButton_click.click(); let button_dialogInteractionUseButton_confirm = await driver.findComponent(ON.text('confirm', MatchPattern.CONTAINS)); await button_dialogInteractionUseButton_confirm.click(); let button_dialogInteractionUseButton_return = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.click_and_return')), MatchPattern.CONTAINS)); await button_dialogInteractionUseButton_return.click(); - await sleep(1000); + await sleep(3000); await driver.pressBack(); - await sleep(1000); + await sleep(2000); - await stackList.scrollSearch(ON.text(resource.resourceToString($r('app.string.DialogAnimationNew_title')))); + await driver.swipe(500, 1000, 500, 600); + await sleep(1000); let button_dialogAnimationNew = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.DialogAnimationNew_title')), MatchPattern.CONTAINS)); await button_dialogAnimationNew.click(); + await sleep(1000); let button_dialogAnimationNew_click = await driver.findComponent(ON.text('click me', MatchPattern.CONTAINS)); await button_dialogAnimationNew_click.click(); await driver.pressBack(); await driver.pressBack(); + await sleep(1000); - await stackList.scrollSearch(ON.text(resource.resourceToString($r('app.string.DialogStyleNew_title')))); let button_dialogStyleNew = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.DialogStyleNew_title')), MatchPattern.CONTAINS)); await button_dialogStyleNew.click(); + await sleep(1000); let button_dialogStyleNew_click = await driver.findComponent(ON.text('click me', MatchPattern.CONTAINS)); await button_dialogStyleNew_click.click(); await driver.pressBack(); await driver.pressBack(); + await sleep(1000); - await stackList.scrollSearch(ON.text(resource.resourceToString($r('app.string.NestDialogNew_title')))); + await driver.swipe(500, 1000, 500, 800); + await sleep(1000); let button_nestDialogNew = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.NestDialogNew_title')), MatchPattern.CONTAINS)); await button_nestDialogNew.click(); + await sleep(1000); let button_nestDialogNew_click = await driver.findComponent(ON.text('Click Me', MatchPattern.CONTAINS)); await button_nestDialogNew_click.click(); let button_nestDialogNew_open = await driver.findComponent(ON.text('Open Second Dialog Box and close this box', MatchPattern.CONTAINS)); @@ -123,18 +132,25 @@ export default function CustomDialogTest() { let button_nestDialogNew_close = await driver.findComponent(ON.text('Close Second Dialog Box', MatchPattern.CONTAINS)); await button_nestDialogNew_close.click(); await driver.pressBack(); + await sleep(1000); - await stackList.scrollToBottom() + await driver.swipe(500, 1000, 500, 300); + await sleep(1000); let button_dialogWithPhysicalBack = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.DialogWithPhysicalBack_title')), MatchPattern.CONTAINS)); await button_dialogWithPhysicalBack.click(); + await sleep(1000); let button_dialogWithPhysicalBack_click = await driver.findComponent(ON.text('click me', MatchPattern.CONTAINS)); await button_dialogWithPhysicalBack_click.click(); let button_dialogWithPhysicalBack_confirm = await driver.findComponent(ON.text('confirm', MatchPattern.CONTAINS)); await button_dialogWithPhysicalBack_confirm.click(); await driver.pressBack(); + await sleep(1000); + await driver.swipe(500, 1000, 500, 300); + await sleep(1000); let button_getDialogStatus = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.GetDialogStatus_title')), MatchPattern.CONTAINS)); await button_getDialogStatus.click(); + await sleep(1000); let button_button_getDialogStatus_click = await driver.findComponent(ON.text('click me', MatchPattern.CONTAINS)); await button_button_getDialogStatus_click.click(); let button_button_getDialogStatus_custom = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.search_by_dialog')), MatchPattern.CONTAINS)); @@ -144,10 +160,13 @@ export default function CustomDialogTest() { let button_button_getDialogStatus_close = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.close_widows')), MatchPattern.CONTAINS)); await button_button_getDialogStatus_close.click(); await driver.pressBack(); - await sleep(5000); + await sleep(1000); + await driver.swipe(500, 1000, 500, 300); + await sleep(1000); let button_dialogAvoidSoftKeyboard = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.DialogAvoidSoftKeyboard_title')), MatchPattern.CONTAINS)); await button_dialogAvoidSoftKeyboard.click(); + await sleep(1000); let text_dialogWithPhysicalBack_open = await driver.findComponent(ON.text(resource.resourceToString($r('app.string.open_windows')), MatchPattern.CONTAINS)); await text_dialogWithPhysicalBack_open.click(); await sleep(1000); diff --git a/ArkUIKit/DialogProject/entry/src/ohosTest/ets/test/Menu.test.ets b/ArkUIKit/DialogProject/entry/src/ohosTest/ets/test/Menu.test.ets index 2988a1703e2899cafbacb3a7db0875ee6280d546..7cd8b82138d27f0f2ddce7b1688320b53b8ee945 100644 --- a/ArkUIKit/DialogProject/entry/src/ohosTest/ets/test/Menu.test.ets +++ b/ArkUIKit/DialogProject/entry/src/ohosTest/ets/test/Menu.test.ets @@ -74,6 +74,8 @@ export default function MenuTest() { await driver.delayMs(1000); await driver.pressBack(); await driver.delayMs(1000); + await driver.pressBack(); + await driver.delayMs(1000); console.info('uitest: testPopVibrateMenu end'); done(); }) diff --git a/ArkUIKit/DialogProject/entry/src/ohosTest/ets/test/OpenCustomDialog.test.ets b/ArkUIKit/DialogProject/entry/src/ohosTest/ets/test/OpenCustomDialog.test.ets index 257bfe2aad121c5ea3d7ded971d335069f08ad5e..d8cca2cbe9c1664127db1ec9127ade818168e11d 100644 --- a/ArkUIKit/DialogProject/entry/src/ohosTest/ets/test/OpenCustomDialog.test.ets +++ b/ArkUIKit/DialogProject/entry/src/ohosTest/ets/test/OpenCustomDialog.test.ets @@ -80,7 +80,6 @@ export default function OpenCustomDialogTest() { await sleep(3000); await driver.pressBack(); await driver.pressBack(); - await driver.pressBack(); done() }) diff --git a/ArkUIKit/EnvirommentProjet/README_zh.md b/ArkUIKit/EnvirommentProjet/README_zh.md index 7907451a12261b1f149cf34d498a4092760dcc03..d176ccaf7da06a4a1fb4c56f95fff8789b236ce1 100644 --- a/ArkUIKit/EnvirommentProjet/README_zh.md +++ b/ArkUIKit/EnvirommentProjet/README_zh.md @@ -2,8 +2,8 @@ ### 介绍 -本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： - +本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： +**1. [Environment：设备环境查询](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkUISample/EnvirommentProjet/README_zh.md)。** ### 具体实现 1. 基本功能与原理 核心作用：查询设备环境信息，使应用能根据运行环境动态调整行为 diff --git a/ArkUIKit/EventDecorator/README.md b/ArkUIKit/EventDecorator/README.md index 6013019d5ab7c2b0387c64c1f0d1269e564b0e6d..2df2753415989881dd64fde7425f12857278489c 100644 --- a/ArkUIKit/EventDecorator/README.md +++ b/ArkUIKit/EventDecorator/README.md @@ -2,7 +2,7 @@ ### 介绍 -本工程主要实现了对以下指南文档中 [@Event装饰器：规范组件输](https://docs.openharmony.cn/pages/v6.0/zh-cn/application-dev/ui/state-management/arkts-new-event.md) 示例代码片段的工程化，主要目标是帮助开发者快速了解在@ComponentV2装饰的自定义组件中使用@Event装饰器。 +本工程主要实现了对以下指南文档中 [@Event装饰器：规范组件输出](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-new-event.md) 示例代码片段的工程化，主要目标是帮助开发者快速了解在@ComponentV2装饰的自定义组件中使用@Event装饰器。 ### 更改父组件中变量 diff --git a/ArkUIKit/EventProject/README_zh.md b/ArkUIKit/EventProject/README_zh.md index bf6f6dea0fac731c58ab5946acb85c34029adcc6..cbc7508851128b68e4f33ba3a4099722f2b42a7a 100644 --- a/ArkUIKit/EventProject/README_zh.md +++ b/ArkUIKit/EventProject/README_zh.md @@ -6,12 +6,12 @@ 1. [触屏事件](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.0.1-Release/zh-cn/application-dev/ui/arkts-common-events-touch-screen-event.md) 2. [键鼠事件](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.0.1-Release/zh-cn/application-dev/ui/arkts-common-events-device-input-event.md) -3. [焦点事件](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.0.1-Release/zh-cn/application-dev/ui/arkts-common-events-focus-event.md) -4. [拖拽事件](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.0.1-Release/zh-cn/application-dev/ui/arkts-common-events-drag-event.md) -5. [单一手势](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.0.1-Release/zh-cn/application-dev/ui/arkts-gesture-events-single-gesture.md) -6. [组合手势](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.0.1-Release/zh-cn/application-dev/ui/arkts-gesture-events-combined-gestures.md) -7. [手势拦截](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.0.1-Release/zh-cn/application-dev/ui/arkts-gesture-events-gesture-judge.md) -8. [统一拖拽](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/DocsSample/ArkUISample/EventProject) +3. [支持焦点处理](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-events-focus-event.md) +4. [支持统一拖拽](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-events-drag-event.md) +5. [单一手势](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-gesture-events-single-gesture.md) +6. [组合手势](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-gesture-events-combined-gestures.md) +7. [手势冲突处理](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-gesture-events-gesture-judge.md) +8. [支持键盘输入事件](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-interaction-development-guide-keyboard.md) ### 效果预览 | 首页 | 交互类组件目录 | 单一手势示例 | @@ -100,26 +100,14 @@ entry/src/ohosTest/ ``` ### 具体实现 -<<<<<<< TJS - -1、选择目标组件 -确定要在哪个 UI 组件上绑定手势（如 Column、Text、Image 等）。 -调用 .gesture() 方法 -使用 .gesture(Gesture) 方法将手势绑定到组件上。 -2、创建手势对象 -调用对应的手势构造函数，如 TapGesture()、PanGesture() 等，可传入参数配置行为。 -注册事件回调 -通过 .onAction()、.onActionStart()、.onActionUpdate()、.onActionEnd() 等方法监听手势状态变化。 -3、更新状态或执行逻辑 -在回调中修改 @State 变量、触发动画、调用函数等。 - -======= -焦点：指向当前应用界面上唯一的一个可交互元素，当用户使用键盘、电视遥控器、车机摇杆/旋钮等非指向性输入设备与应用程序进行间接交互时，基于焦点的导航和交互是重要的输入手段。 -焦点链：在应用的组件树形结构中，当一个组件获得焦点时，从根节点到该组件节点的整条路径上的所有节点都会处于焦点状态，形成一条连续的焦点链。 -走焦：指焦点在应用内的组件之间转移的行为。这一过程对用户是透明的，但开发者可以通过监听onFocus（焦点获取）和onBlur（焦点失去）事件来捕捉这些变化。关于走焦的具体方式和规则，详见走焦规范。 -焦点激活态：焦点激活是用来显示当前获焦组件焦点框的视觉样式。 -焦点传递规则:焦点传递是指当用户激活应用焦点系统时，焦点如何从根节点逐级向下传递到具体组件的过程。 ->>>>>>> master +1. 触屏事件指当手指/手写笔在组件上按下、滑动、抬起时触发的回调事件。包括点击事件、拖拽事件和触摸事件。 +2. 键鼠事件指键盘，鼠标外接设备的输入事件。支持的鼠标事件包含通过外设鼠标、触控板触发的事件。 +3. 使用外接键盘的按键走焦（TAB键/Shift+TAB键/方向键）、使用requestFocus申请焦点、clearFocus清除焦点、focusOnTouch点击申请焦点等接口导致的焦点转移。焦点激活态：焦点激活是用来显示当前获焦组件焦点框的视觉样式。 焦点传递规则:焦点传递是指当用户激活应用焦点系统时，焦点如何从根节点逐级向下传递到具体组件的过程。 +4. 从一个组件位置拖出（drag）数据并将其拖入（drop）到另一个组件位置，以触发响应。在这一过程中，拖出方提供数据，而拖入方负责接收和处理数据。这一操作使用户能够便捷地移动、复制或删除指定内容。 +5. 可以通过在拖动手势的回调函数中修改组件的布局位置信息来实现组件的拖动。 +6. Column组件上绑定了translate属性，通过修改该属性可以设置组件的位置移动。然后在该组件上绑定LongPressGesture和PanGesture组合而成的Sequence组合手势。当触发LongPressGesture时，更新显示的数字。当长按后进行拖动时，根据拖动手势的回调函数，实现组件的拖动。 +7. 嵌套滚动、通过过滤组件响应手势的范围来优化交互体验。手势拦截主要采用手势触发控制和手势响应控制两种方式实现。 +8. 物理按键产生的按键事件为非指向性事件，与触摸等指向性事件不同，其事件并没有坐标位置信息，所以其会按照一定次序向获焦组件进行派发，大多数文字输入场景下，按键事件都会优先派发给输入法进行处理，以便其处理文字的联想和候选词，应用可以通过onKeyPreIme提前感知事件。 ### 相关权限 不涉及。 diff --git a/ArkUIKit/FrameNode/README_zh.md b/ArkUIKit/FrameNode/README_zh.md index aaf5833ee9433abf3d598aa07126755e0d7befc6..03c0ee2beb2414ef0336e47098df74af5fe5b9e4 100644 --- a/ArkUIKit/FrameNode/README_zh.md +++ b/ArkUIKit/FrameNode/README_zh.md @@ -2,7 +2,9 @@ ### 介绍 -本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-user-defined-arktsNode-frameNode.md)中各场景的开发示例，展示在工程中，帮助开发者更好的理解并合理使用ArkUI提供的组件以及组件属性。通过该工程可以创建组件树FrameNode，FrameNode支持动态操作，如节点的增加、修改和删除。基础的FrameNode具备设置通用属性和事件回调的功能，同时提供完整的自定义能力，涵盖自定义测量、布局和绘制等方面。 +本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接: + +1. [自定义组件节点 (FrameNode)](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-user-defined-arktsNode-frameNode.md) ### 效果预览 diff --git a/ArkUIKit/FreezeV2/entry/src/main/ets/pages/freeze/template7/BuilderNode.ets b/ArkUIKit/FreezeV2/entry/src/main/ets/pages/freeze/template7/BuilderNode.ets index ba077eb61cf9bbe3c330c1af8f12a26fcdc0fc70..de9a3968b6d84832a67f0edcb19a4a8993065ee4 100644 --- a/ArkUIKit/FreezeV2/entry/src/main/ets/pages/freeze/template7/BuilderNode.ets +++ b/ArkUIKit/FreezeV2/entry/src/main/ets/pages/freeze/template7/BuilderNode.ets @@ -41,7 +41,7 @@ class Params { } } -// 定义一个BuildNodeChild组件，它包含一个message属性和一个index属性 +// 定义一个BuildNodeChild组件，它包含一个storage属性和一个index属性 @ComponentV2 struct BuildNodeChild { // 使用Params实例作为storage属性 diff --git a/ArkUIKit/GradientEffect/README_zh.md b/ArkUIKit/GradientEffect/README_zh.md index 71033c8ac20315cc037ff7cd60e96220e5680083..3fb7f7e5dd2de667ffac39f86c80e32d4d85f68f 100644 --- a/ArkUIKit/GradientEffect/README_zh.md +++ b/ArkUIKit/GradientEffect/README_zh.md @@ -1,16 +1,14 @@ -# ArkUI使用滚动类指南文档示例 +# ArkUI使用颜色渐变指南文档示例 ### 介绍 -本示例展示了[@Once：初始化同步一次](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-internationalization.md)UI国际化的使用方法： +本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： + +1. [颜色渐变](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-color-effect.md) -使用说明： -1. 该工程可以选择在模拟器和开发板上运行。 -2. 点击构建，即可在生成的应用中点击对应的按钮，观察自定义占位节点的不同应用。 -3. 进入”DocsSample/ArkUISample/GradientEffect/entry/src/ohosTest/ets/test/index.test.ets“文件，可以对本项目进行UI的自动化测试。 ### 效果预览 -| 首页 | 列表类组件目录 | 列表中显示数据示例 | +| 线性渐变效果 | 角度渐变效果 | 径向渐变效果 | |------------------------------------|------------------------------------|------------------------------------| | ![](screenshots/device/image1.png) | ![](screenshots/device/image2.png) | ![](screenshots/device/image3.png) | diff --git a/ArkUIKit/InterAction/README_zh.md b/ArkUIKit/InterAction/README_zh.md index 149129fa1bcab5e3d6d40d30e8fb8404bebb48e1..b77194ba6a1ab63212ff1bc78580e3e4a1dc8cf2 100644 --- a/ArkUIKit/InterAction/README_zh.md +++ b/ArkUIKit/InterAction/README_zh.md @@ -2,9 +2,14 @@ ### 介绍 -本示例通过使用[ArkUI指南文档](https://gitCode .com/openharmony/docs/tree/master/zh-cn/application-dev/ui) +本示例通过使用[ArkUI指南文档](https://gitCode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui) 中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。 +### 示例文档 +[交互基础机制说明](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-interaction-basic-principles.md) +[支持鼠标输入事件](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-interaction-development-guide-mouse.md) +[支持触屏输入事件](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-interaction-development-guide-touch-screen.md) + ### 效果预览 | 首页 | 交互类组件目录 | 单一手势示例 | @@ -55,17 +60,17 @@ entry/src/ohosTest/ ### 具体实现 -1、默认情况下，组件的响应热区即为组件自身的位置和大小，这与用户看到的范围相 +1. 默认情况下，组件的响应热区即为组件自身的位置和大小，这与用户看到的范围相 一致，从而最大程度地保证用户操作的手眼一致性。在极少数情况下，应用需调整热区 大小以限制或扩大组件响应的操作范围，这一功能通过组件的responseRegion接口实现。 响应热区影响指向性事件的派发，通过与组件自身区域的相对关系进行指定，可以指定一 个或多个区域，将组件的响应热区分割为多个部分； -2、鼠标事件回调。每当鼠标指针在绑定该API的组件内产生行为（MouseAction）时，触 +2. 鼠标事件回调。每当鼠标指针在绑定该API的组件内产生行为（MouseAction）时，触 发事件回调，参数为MouseEvent对象，表示触发此次的鼠标事件。该事件支持自定义冒泡 设置，默认父子冒泡； -3、重采样会合并同一个触点在同一帧内多次上报的move事件，并通过算法尽可能计算出一 +3. 重采样会合并同一个触点在同一帧内多次上报的move事件，并通过算法尽可能计算出一 个合适的坐标上报给应用； -4、在支持多指触控的触屏设备上，上报的事件中同时包含了窗口所有按压手指的信息，可 +4. 在支持多指触控的触屏设备上，上报的事件中同时包含了窗口所有按压手指的信息，可 以通过touches获取； ### 相关权限 @@ -92,6 +97,6 @@ entry/src/ohosTest/ git init git config core.sparsecheckout true echo code/DocsSample/ArkUISample/EventProject > .git/info/sparse-checkout -git remote add origin https://gitCode .com/openharmony/applications_app_samples.git +git remote add origin https://gitcode.com/openharmony/applications_app_samples.git git pull origin master ```` \ No newline at end of file diff --git a/ArkUIKit/MakeObserved/README_zh.md b/ArkUIKit/MakeObserved/README_zh.md index 55453145be87dbf443e62dd53b8ebe04b1f48bbd..aa7b48e7d11d59637bfd7a149bc142ba86137d90 100644 --- a/ArkUIKit/MakeObserved/README_zh.md +++ b/ArkUIKit/MakeObserved/README_zh.md @@ -2,7 +2,7 @@ ### 介绍 -本示例通过使用[ArkUI指南文档](https://docs.openharmony.cn/pages/v6.0/zh-cn/application-dev/ui/state-management/arkts-basic-syntax-overview.md)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： +本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： ### 1.[线性容器(Column)](https://docs.openharmony.cn/pages/v6.0/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-column.md) @@ -10,10 +10,9 @@ ### 3.[Button](https://docs.openharmony.cn/pages/v6.0/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-button.md) -### 3[makeObserved接口：将非观察数据变为可观察数据](https://docs.openharmony.cn/pages/v6.0/zh-cn/application-dev/ui/state-management/arkts-new-makeObserved.md) +### 4.[makeObserved接口：将非观察数据变为可观察数据](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-new-makeObserved.md) ## 预览效果 - ``` import { UIUtils } from '@kit.ArkUI'; class Person { @@ -88,24 +87,12 @@ makeObserved封装的观察对象，可以通过getTarget获取到其原始对 ![image1](![](screenshots/device/image10.jpeg) ![image1](![](screenshots/device/image11.jpeg) -## 具体实现 -1. 导入UIUtils模块并使用makeObserved接口 -2. 处理不同类型数据的可观察转换 -3. 与状态管理装饰器(@Local等)配合使用 -4. 支持集合类型(collections.Array/Map/Set)的可观察转换 -亮点功能： -- 与@Sendable装饰类配合使用，支持跨线程数据传递后的可观察转换 -- 处理JSON.parse返回的匿名对象的可观察转换 ## 使用说明 - ### 1.在进入主页面后，点击页面按钮进行查看 ## 工程目录结构 - - - ``` MakeObserved ├─ AppScope @@ -188,18 +175,24 @@ MakeObserved └─ README_zh.md ``` +## 具体实现 +1. 导入UIUtils模块并使用makeObserved接口 +2. 处理不同类型数据的可观察转换 +3. 与状态管理装饰器(@Local等)配合使用 +4. 支持集合类型(collections.Array/Map/Set)的可观察转换 +5. 为了将普通不可观察数据变为可观察数据，开发者可以使用makeObserved接口，makeObserved可以在@Trace无法标记的情况下使用。 -````` -### 相关权限 +亮点功能： +- 与@Sendable装饰类配合使用，支持跨线程数据传递后的可观察转换 +- 处理JSON.parse返回的匿名对象的可观察转换 +### 相关权限 不涉及。 ### 依赖 - 不涉及。 ### 约束与限制 - .本示例仅支持标准系统上运行, 支持设备：RK3568。 2.本示例为Stage模型，支持API22版本SDK，版本号：6.0.0.33，镜像版本号：OpenHarmony_6.0.0.33。 @@ -207,14 +200,12 @@ MakeObserved 3.本示例需要使用DevEco Studio 6.0.0 Canary1 (Build Version: 6.0.0.270， built on May 9, 2025)及以上版本才可编译运行。 ### 下载 - 如需单独下载本工程，执行如下命令： -```` +````` git init git config core.sparsecheckout true echo code/DocsSample/ArkUISample/MakeObserved > .git/info/sparse-checkout git remote add origin https://gitcode.com/openharmony/applications_app_samples.git git pull origin master -```` ````` \ No newline at end of file diff --git a/ArkUIKit/Modifier/README_zh.md b/ArkUIKit/Modifier/README_zh.md index 59051659a14799c939459af30f6967376843c85c..5daeaea85270e3ed0aaf9229ab91735f6b1a14dc 100644 --- a/ArkUIKit/Modifier/README_zh.md +++ b/ArkUIKit/Modifier/README_zh.md @@ -1,5 +1,5 @@ -# ArkUI使用弹窗指南文档示例 +# ArkUI使用内容修改器指南文档示例 ### 介绍 diff --git a/ArkUIKit/MultilevelGestureEvents/README_zh.md b/ArkUIKit/MultilevelGestureEvents/README_zh.md index e0de2b740327bbbdaf8dce3abeb0a2473562785c..e85650dd056164febed8323381c2e40a6ad4b5ba 100644 --- a/ArkUIKit/MultilevelGestureEvents/README_zh.md +++ b/ArkUIKit/MultilevelGestureEvents/README_zh.md @@ -1,10 +1,11 @@ -# ArkUI使用文本控件指南文档示例 +# 多层级手势事件指南 ### 介绍 本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： -1. [多层级手势事件](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-gesture-events-multi-level-gesture.md)。 +### 示例文档 +[多层级手势事件](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-gesture-events-multi-level-gesture.md)。 ### 效果预览 不涉及 @@ -17,7 +18,7 @@ 4. **常见多级手势应用**： 单击 + 双击：适用于图片或文档查看场景，如双击放大、单击退出； 滑动 + 缩放：适用于图表场景，如滑动移动视图、双指缩放查看细节； -长按 + 滑动：适用于拖拽场景，如长按后滑动以移动元素位置，满足复杂交互需求。 +长按 + 滑动：适用于拖拽场景，如长按后滑动以移动元素位置，满足复杂交互需求。 ### 工程目录 ``` diff --git a/ArkUIKit/NDKWaterFlowSample/README_zh.md b/ArkUIKit/NDKWaterFlowSample/README_zh.md index 9f38cdac6f78183cf3d8ccf67afc17dd9d5c0fbf..7a14cba2f07fe3e8cd987f0bc14eb6ba6a54a876 100644 --- a/ArkUIKit/NDKWaterFlowSample/README_zh.md +++ b/ArkUIKit/NDKWaterFlowSample/README_zh.md @@ -1,10 +1,8 @@ -# ArkUI 滚动类 示例 +# 使用瀑布流 ### 介绍 -本工程以 `ArkUI` (C-API)` 的方式实现瀑布流容器组件示例，演示原生节点的创建、复用、懒加载与 ETS 侧对接。该工程中展示的代码详细描述可查如下链接： - -1. [使用瀑布流](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ndk-waterflow.md)。 +本工程以 `ArkUI (C-API)` 的方式实现[使用瀑布流](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ndk-waterflow.md)，演示瀑布流容器组件原生节点的创建、复用、懒加载与 ETS 侧对接。 ### 效果预览 diff --git a/ArkUIKit/NativeRenderNodeSample/README_zh.md b/ArkUIKit/NativeRenderNodeSample/README_zh.md index e6bee308f8ae0b49c5cc26d4efabd82112aaf787..6293c932e880d810609fd584583bf99cb07ebf63 100644 --- a/ArkUIKit/NativeRenderNodeSample/README_zh.md +++ b/ArkUIKit/NativeRenderNodeSample/README_zh.md @@ -2,7 +2,7 @@ ### 介绍 -本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好的理解并合理使用ArkUI提供的组件以及组件属性。通过该工程可以创建RenderNode组件并可以设置、获取、重置组件对应节点属性 +本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好的理解并合理使用ArkUI提供的组件以及组件属性。通过该工程可以创建RenderNode组件并可以设置、获取、重置组件对应节点属性，接口详情请参考[native_render.h](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/capi-native-render-h.md)。 ### 使用说明 @@ -32,6 +32,14 @@ entry/src/main/ets/ | |---property.ets // RenderNode属性设置实现页面 ``` +### 效果预览 + +| 首页 | 应用页面 | +| ---- | -------------------------------------------------------- | +| | | +| | | +| | | + ### 具体实现 - 本示例展示获取渲染组件接入页面的使用方式，使用CAPI新增的RenderNodeUtils相关能力，通过接口构造渲染树，设置渲染节点的绘制属性等，而后将其挂载在CAPI的CUSTOM节点下即可实现。 diff --git a/ArkUIKit/NativeType/NativeNodeUtilsSample/README_zh.md b/ArkUIKit/NativeType/NativeNodeUtilsSample/README_zh.md index 91ae87fd457a24fe2d320722bb40d76d26a0b2c6..b1131aee45cf05f5e7d960792e74f552ff031955 100644 --- a/ArkUIKit/NativeType/NativeNodeUtilsSample/README_zh.md +++ b/ArkUIKit/NativeType/NativeNodeUtilsSample/README_zh.md @@ -16,9 +16,9 @@ 5. 点击设置capi侧主窗口Context，查看如何将ArkTS的上下文传到capi。 -6. 点击“展示自定义绘制页面”，查看绘画效果。 +6. 点击“展示自定义绘制页面”，查看绘画效果。具体实现请参考[自定义绘制](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-user-defined-draw.md)。 -7. 点击"展示自定义绘制容器页面"，查看容器效果。 +7. 点击"展示自定义绘制容器页面"，查看容器效果。具体实现请参考[自定义绘制](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-user-defined-draw.md)。 ## 效果预览 @@ -30,11 +30,13 @@ ### 具体实现 -- 本示例实现了多线程创建组件的能力，通过调用CAPI抛线程创建的接口，将组件创建操作放到其它线程执行，有效提高UI效率。 +- 本示例实现了多线程创建组件的功能，通过调用CAPI抛线程创建的接口，将组件创建操作放到其它线程执行，有效提高UI效率。 -- 实现了组件存储自定义属性的能力，开发者可以通过该能力，赋予组件一些特殊的字段接口，用以实现即时性的接口调用。 +- 实现了组件存储自定义属性的能力，开发者可以通过该能力，赋予组件一些特殊的字段接口，用以实现即时接口调用。 -- 实现了CAPI侧懒加载实现列表的能力，可复用已生成的列表项，减少创建/销毁的性能开销。 +- 实现了CAPI侧懒加载实现列表的能力，可复用已生成的列表项，减少创建/销毁的性能消耗。 + +- 自定义绘制实现：自定义节点的创建，通过ArkUI_NativeNodeAPI_1的create接口，传入ARKUI_NODE_CUSTOM创建自定义节点。在事件注册过程中，需将事件注册为绘制事件，通过查阅ArkUI_NodeCustomEventType枚举值获取事件类型及含义。 创建自定义节点：通过ArkUI_NativeNodeAPI_1的create接口，传入ARKUI_NODE_CUSTOM创建自定义节点。在事件注册时，将自定义节点、事件类型、事件ID和UserData作为参数传入。在回调函数中，通过获取自定义事件的事件类型、事件ID和UserData来执行不同的逻辑。 ### 工程目录 ``` @@ -81,7 +83,7 @@ entry/src/main/ets/ ```` git init git config core.sparsecheckout true -echo code/DocsSample/ArkUISample/NativeNodeSample > .git/info/sparse-checkout +echo code/DocsSample/ArkUISample/NativeNodeUtilsSample > .git/info/sparse-checkout git remote add origin https://gitcode.com/openharmony/applications_app_samples.git git pull origin master ```` \ No newline at end of file diff --git a/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/main/cpp/NativeEntry.h b/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/main/cpp/NativeEntry.h index 77d675f9da9276bb4d5f155aad4ab40f5eb15d99..9a4b547a101134c1c5b9947bde018e2a113e2d3d 100644 --- a/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/main/cpp/NativeEntry.h +++ b/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/main/cpp/NativeEntry.h @@ -61,6 +61,9 @@ namespace NativeModule { void DisposeRootNode() { // 从NodeContent上卸载组件并销毁Native组件。 + if (handle_ == nullptr || root_ == nullptr) { + return; + } OH_ArkUI_NodeContent_RemoveNode(handle_, root_->GetHandle()); root_.reset(); } diff --git a/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/main/ets/pages/Index.ets b/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/main/ets/pages/Index.ets index 99c71221e11b2cbe7f4bce291ae4d233fabfa4ff..281db73bd2be2ce78464813790ee28595c773bce 100644 --- a/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/main/ets/pages/Index.ets +++ b/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/main/ets/pages/Index.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import { NodeContent,UIContext } from '@kit.ArkUI'; +import { NodeContent, UIContext } from '@kit.ArkUI'; import entry from 'libentry.so'; @Component @@ -41,42 +41,26 @@ struct CAPIComponent { @Entry @Component struct Index { - @State isShow: boolean = false; @State message: string = 'CreateNodeTree'; build() { Flex() { Column() { - Text('CreateNodeTreeOnMultiThread') - .fontSize(18) - .fontWeight(FontWeight.Bold) - Button(this.message) - .onClick(() => { - this.isShow = !this.isShow; - if (this.isShow) { - this.message = 'DisposeNodeTree'; - } else { - this.message = 'CreateNodeTree'; - } - }) - if (this.isShow) { - CAPIComponent(); - } Button('ShowDrawPage') - .onClick(()=>{ + .onClick(() => { const uiContext: UIContext = this.getUIContext(); const router = uiContext.getRouter(); router.pushUrl({ - url:'pages/drawPage/DrawPage' + url: 'pages/drawPage/DrawPage' }) }) Button('ShowNativeUIPage') - .onClick(()=>{ + .onClick(() => { const uiContext: UIContext = this.getUIContext(); const router = uiContext.getRouter(); router.pushUrl({ - url:'pages/nativeUI/NativeUIPage' + url: 'pages/nativeUI/NativeUIPage' }) }) // app.string.Create_Component资源文件中的value值为'多实例创建组件' @@ -84,7 +68,7 @@ struct Index { const uiContext: UIContext = this.getUIContext(); const router = uiContext.getRouter(); router.pushUrl({ - url: 'pages/Index' + url: 'pages/Entry' }); }) // app.string.Custom_Attribute_Test资源文件中的value值为'自定义属性测试' @@ -105,7 +89,7 @@ struct Index { }) // 该接口作用为NDK侧保存主窗口实例，用户保护实例错误调用场景。 // app.string.Setting_NDKNativeWindows_Context资源文件中的value值为'设置NDK侧主窗口Context' - Button($r('app.string.Setting_NDKNativeWindows_Context')).onClick(()=> { + Button($r('app.string.Setting_NDKNativeWindows_Context')).onClick(() => { entry.getContext(this.getUIContext()); }) }.width('100%') diff --git a/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/main/ets/pages/nativeUI/NativeUIPage.ets b/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/main/ets/pages/nativeUI/NativeUIPage.ets index 7a062d69c47545f8383bcdc5d0b3262ba05593bb..a68a4b60fa756eceb6fdcb8b866229a4a2e3fecb 100644 --- a/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/main/ets/pages/nativeUI/NativeUIPage.ets +++ b/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/main/ets/pages/nativeUI/NativeUIPage.ets @@ -14,50 +14,55 @@ */ import { NodeContent } from '@kit.ArkUI'; -import render, { DestroyNativeRoot } from 'libentry.so'; +import render from 'libentry.so'; + @Entry @Component - struct NativeCustomPage { - @State flag:boolean=true; - @State text:string='ShowNativeUI'; - private nodeContent: NodeContent = new NodeContent(); - private isNodeCreated: boolean = true; + @State flag: boolean = false; + @State text: string = 'HideNativeUI'; + @State nodeContent: NodeContent = new NodeContent(); + onPageShow() { this.createNativeNodes(); } + onPageHide() { this.DestroyNativeRoot(); } + private createNativeNodes() { - if (render?.CreateNativeRoot && this.isNodeCreated) { - render.CreateNativeRoot(this.nodeContent); - this.isNodeCreated = true; - } + render.CreateNativeRoot(this.nodeContent); } + private DestroyNativeRoot() { - if (render?.DestroyNativeRoot && !this.isNodeCreated) { - render.DestroyNativeRoot(); - this.isNodeCreated = false; - } + render.DestroyNativeRoot(); } + build() { Column() { Row({ space: 16 }) { - Button('HideNativeUI') - .onClick(()=>{ - this.flag=false; - DestroyNativeRoot(); + Button(this.text) + .onClick(() => { + this.flag = !this.flag + if (this.flag) { + this.text = 'ShowNativeUI' + this.DestroyNativeRoot() + } else { + this.text = 'HideNativeUI' + this.createNativeNodes() + } }) } - if(this.flag){ - Column() { - ContentSlot(this.nodeContent); - } - .margin({top:50}) - .flexGrow(1) - .padding(16) - } + + if (!this.flag) { + Column() { + ContentSlot(this.nodeContent); + } + .margin({ top: 50 }) + .flexGrow(1) + .padding(16) + } } .width('100%') .height('100%') diff --git a/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/ohosTest/ets/test/nativeUI/NativeUIPageTest.test.ets b/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/ohosTest/ets/test/nativeUI/NativeUIPageTest.test.ets index cd4f531d4b99b313cf80ed0abeb95a12dfee4e26..b500bb027e1c19d2ea558309e814fc9b77eacb59 100644 --- a/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/ohosTest/ets/test/nativeUI/NativeUIPageTest.test.ets +++ b/ArkUIKit/NativeType/NativeNodeUtilsSample/entry/src/ohosTest/ets/test/nativeUI/NativeUIPageTest.test.ets @@ -21,7 +21,7 @@ export default function NativeUIPageTest() { // Defines a test suite. Two parameters are supported: test suite name and test suite function. let driver = Driver.create(); const delegator: abilityDelegatorRegistry.AbilityDelegator = abilityDelegatorRegistry.getAbilityDelegator(); - beforeAll(async() => { + beforeAll(async () => { // Presets an action, which is performed only once before all test cases of the test suite start. // This API supports only one parameter: preset action function. const want: Want = { @@ -35,7 +35,7 @@ export default function NativeUIPageTest() { // The number of execution times is the same as the number of test cases defined by **it**. // This API supports only one parameter: preset action function. }) - afterEach(async (done:Function) => { + afterEach(async (done: Function) => { // Presets a clear action, which is performed after each unit test case ends. // The number of execution times is the same as the number of test cases defined by **it**. // This API supports only one parameter: clear action function. @@ -57,6 +57,10 @@ export default function NativeUIPageTest() { const driver = Driver.create(); const button = await driver.findComponent(ON.text('ShowNativeUIPage')); await button.click(); + const button1 = await driver.findComponent(ON.text('HideNativeUI')); + await button1.click(); + const button2 = await driver.findComponent(ON.text('ShowNativeUI')); + await button2.click(); await driver.delayMs(1000); }) }) diff --git a/ArkUIKit/NdkGestureSetting/README_zh.md b/ArkUIKit/NdkGestureSetting/README_zh.md index 6636516ec3fe7c1ddf6f820322a7b40238afc70a..fb9932f5e5f8b6cb8c69295feffedeb560ae743b 100644 --- a/ArkUIKit/NdkGestureSetting/README_zh.md +++ b/ArkUIKit/NdkGestureSetting/README_zh.md @@ -48,9 +48,9 @@ entry/src/ohosTest/ 1.本示例仅支持标准系统上运行, 支持设备：RK3568。 -2.本示例为Stage模型，支持API20版本SDK，版本号：6.0.0.41，镜像版本号：OpenHarmony_6.0.0.41。 +2.本示例为Stage模型，支持API23版本SDK，版本号：6.1.0.19，镜像版本号：OpenHarmony_6.1.0.19。 -3.本示例需要使用DevEco Studio 5.0.5 Release (Build Version: 5.0.13.200, built on May 13, 2025)及以上版本才可编译运行。 +3.本示例需要使用DevEco Studio 6.0.1 Beta1 (Build Version: 6.0.1.246, built on October 31, 2025)及以上版本才可编译运行。 ### 下载 diff --git a/ArkUIKit/NdkNodeQueryOperate/README_zh.md b/ArkUIKit/NdkNodeQueryOperate/README_zh.md index 712a5570a5aab9a4700347a4ae0f7bdee1ff478f..1fbd32dfbd45b24451cb08e9d67dcdb64db76a7a 100644 --- a/ArkUIKit/NdkNodeQueryOperate/README_zh.md +++ b/ArkUIKit/NdkNodeQueryOperate/README_zh.md @@ -1,4 +1,4 @@ -# ArkUI查询和操作自定义节点知道文档 +# ArkUI查询和操作自定义节点指南 ## 介绍 @@ -14,6 +14,9 @@ | OH_ArkUI_NodeUtils_GetLastChildIndexWithoutExpand | 获取目标节点在树上的最后一个子节点的下标。 | | OH_ArkUI_NodeUtils_GetChildWithExpandMode | 用不同的展开模式获取对应下标的子节点。 | +### 示例文档 +[节点查询](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ndk-node-query-operate.md)。 + ## 效果预览 diff --git a/ArkUIKit/NdkScopeTask/README_zh.md b/ArkUIKit/NdkScopeTask/README_zh.md index d90b1c76d4391e166d49a8223f1f6a85325e0e60..48c3f6f909b30d1cc1c5db03fee48953efea9a43 100644 --- a/ArkUIKit/NdkScopeTask/README_zh.md +++ b/ArkUIKit/NdkScopeTask/README_zh.md @@ -2,7 +2,10 @@ ### 介绍 -本示例演示了如何使用OH_ArkUI_RunTaskInScope接口实现NDK多窗口场景下的跨实例组件操作。通过动态切换执行上下文，确保在页面B中安全地修改页面A创建的组件属性，避免因实例上下文不匹配导致的接口调用异常。[示例文档](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ndk-scope-task.md)。 +此示例展示了如何使用OH_ArkUI_RunTaskInScope接口实现多窗口场景下的跨实例组件操作。通过动态切换执行上下文，确保在页面PageB中安全地修改页面PageA创建的组件属性，避免因实例上下文不匹配导致的接口调用异常。 + +### 示例文档 +[组件操作](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ndk-scope-task.md)。 ### 使用说明 1. 安装编译生成的hap包，并启动应用程序； diff --git a/ArkUIKit/Prop/entry/src/main/ets/pages/PageNine.ets b/ArkUIKit/Prop/entry/src/main/ets/pages/PageNine.ets index 13d51af3f31c936a7412282a40cedd1acf842019..58b9be7363c73998b6dd7022f91fe0d95c216be1 100644 --- a/ArkUIKit/Prop/entry/src/main/ets/pages/PageNine.ets +++ b/ArkUIKit/Prop/entry/src/main/ets/pages/PageNine.ets @@ -56,6 +56,7 @@ struct Person { .margin(12) .fontColor('#FFFFFF') .onClick(() => { + // person被@State装饰，@State无法观测到嵌套类型的变化，直接点击该按钮，此时title已经发生变化，但是无法被观测到。 this.person.son.title = 'ArkUI'; }) Text(this.person.name) @@ -68,6 +69,7 @@ struct Person { .textAlign(TextAlign.Center) .fontColor('#e6000000') .onClick(() => { + // 点击该按钮，此次变化会被观测到，同时能够观察到Button('change Son title')点击后的效果。 this.person.name = 'Bye'; }) Text(this.person.son.title) diff --git a/ArkUIKit/ProviderConsumer/README_zh.md b/ArkUIKit/ProviderConsumer/README_zh.md index 7429f74f480219c98364dabe68b1e4dbd60d7fb7..2ee9c1dbb285fcb317889263743cb73fd5d5e73b 100644 --- a/ArkUIKit/ProviderConsumer/README_zh.md +++ b/ArkUIKit/ProviderConsumer/README_zh.md @@ -1,4 +1,4 @@ -# @Provider装饰器和@Consumer装饰器指南文档示例 +# @Provider装饰器和@Consumer装饰器：跨组件层级双向同步 ### 介绍 @@ -6,14 +6,16 @@ @Provider和@Consumer属于状态管理V2装饰器，所以只能在@ComponentV2中才能使用，在@Component中使用会编译报错。 +1. [@Provider装饰器和@Consumer装饰器：跨组件层级双向同步](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-new-Provider-and-Consumer.md) + 使用说明： 1. 该工程可以选择在模拟器和开发板上运行。 2. 点击构建，即可在生成的应用中点击对应的按钮，观察自定义占位节点的不同应用。 3. 进入”DocsSample/ArkUISample/ProviderConsumer/entry/src/ohosTest/ets/test/index.test.ets“文件，可以对本项目进行UI的自动化测试。 ### 效果预览 -| 首页 | 列表类组件目录 | 列表中显示数据示例 | -|------------------------------------|------------------------------------|------------------------------------| +| 首页 | 列表类组件目录 | +|------------------------------------|------------------------------------| | ![](screenshots/device/image1.png) | ![](screenshots/device/image2.png) | ### 使用说明 diff --git a/ArkUIKit/RenderingControl/README_zh.md b/ArkUIKit/RenderingControl/README_zh.md index 0962650c983a45204a94bda70963151481087e50..a12f5e4cdaa674137c670745905e953d07d07aaa 100644 --- a/ArkUIKit/RenderingControl/README_zh.md +++ b/ArkUIKit/RenderingControl/README_zh.md @@ -4,10 +4,10 @@ 本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： -1. [条件渲染](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/rendering-control/arkts-rendering-control-ifelse.md)。 -2. [循环渲染](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/rendering-control/arkts-rendering-control-foreach.md)。 -3. [可复用的循环渲染](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/rendering-control/arkts-new-rendering-control-repeat.md)。 -3. [数据懒加载](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/rendering-control/arkts-rendering-control-lazyforeach.md)。 +1. [if/else：条件渲染](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/rendering-control/arkts-rendering-control-ifelse.md)。 +2. [ForEach：循环渲染](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/rendering-control/arkts-rendering-control-foreach.md)。 +3. [Repeat：可复用的循环渲染](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/rendering-control/arkts-new-rendering-control-repeat.md)。 +3. [LazyForEach：数据懒加载](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/rendering-control/arkts-rendering-control-lazyforeach.md)。 ### 效果预览 diff --git a/ArkUIKit/RenderingControl/entry/src/main/ets/pages/RenderingForeach/ArticleListView.ets b/ArkUIKit/RenderingControl/entry/src/main/ets/pages/RenderingForeach/ArticleListView.ets index ee52f160faa63a09ed23193100846fc919be229c..ee4664edd01d422a4a35edd60ffe061d2d64a45c 100644 --- a/ArkUIKit/RenderingControl/entry/src/main/ets/pages/RenderingForeach/ArticleListView.ets +++ b/ArkUIKit/RenderingControl/entry/src/main/ets/pages/RenderingForeach/ArticleListView.ets @@ -29,7 +29,7 @@ class ArticleChangeSource { @Entry @Component struct ArticleListViewChangeSource { - @State isListReachEnd: boolean = false; + isListReachEnd: boolean = false; @State articleList: Array = [ new ArticleChangeSource('001', 'Article 1', 'Abstract'), new ArticleChangeSource('002', 'Article 2', 'Abstract'), diff --git a/ArkUIKit/RenderingControlContentslotNDK/README.md b/ArkUIKit/RenderingControlContentslotNDK/README.md index 028cad0bce4ece94275d4a4c2ff4efdc86beb198..ad8a30a44e2595228f316d8d546ea71839aadb55 100644 --- a/ArkUIKit/RenderingControlContentslotNDK/README.md +++ b/ArkUIKit/RenderingControlContentslotNDK/README.md @@ -1,10 +1,8 @@ -# RenderingControlContentslotNDK +# ContentSlot：混合开发 ## 介绍 -本示例为使用C-API接口构建UI->[渲染控制的混合开发](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/rendering-control/arkts-rendering-control-contentslot.md)的配套示例工程。 - -本示例展示了用于渲染并管理Native层使用C-API创建的组件。 +本示例为[ContentSlot：混合开发](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/rendering-control/arkts-rendering-control-contentslot.md)的配套示例工程，展示了用于渲染并管理Native层使用C-API创建的组件。 ## 效果预览 diff --git a/ArkUIKit/RequireDemo/README_zh.md b/ArkUIKit/RequireDemo/README_zh.md index efacb38b6dce820dc723c85f22b97cbd04c0728c..86ae58cf30682ef4ba4142d84ec68c07db1c7838 100644 --- a/ArkUIKit/RequireDemo/README_zh.md +++ b/ArkUIKit/RequireDemo/README_zh.md @@ -2,7 +2,9 @@ ### 介绍 -@Require是校验@Prop、@State、@Provide、@BuilderParam、@Param和普通变量(无状态装饰器修饰的变量)是否需要构造传参的一个装饰器。 +本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： + +1. [@Require装饰器：校验构造传参](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-require.md) ### 效果预览 @@ -10,8 +12,6 @@ |-------------------|------------------------------------|------------------------------------|--------------------------------------|--------------------------------------| | ![](screenshots/Screenshot_2025-10-24T173700.png) | ![](screenshots/Screenshot_2025-10-24T173714.png) | ![](screenshots/Screenshot_2025-10-24T173738.png) | ![](screenshots/Screenshot_2025-10-24T173811.png) | ![](screenshots/Screenshot_2025-10-24T173835.png) | - -不涉及。 ### 使用说明 1. 应用在启动后显示首页4个按钮。 @@ -43,6 +43,7 @@ entry/src/ 1. 当Child组件内使用@Require装饰器和@Prop、@State、@Provide、@BuilderParam、@Param和普通变量(无状态装饰器修饰的变量)结合使用时，父组件Index在构造Child时必须传参，否则编译不通过。 2. 使用@ComponentV2修饰的自定义组件ChildPage通过父组件ParentPage进行初始化，因为有@Require装饰@Param，所以父组件必须进行构造赋值。 3. 当Child组件内将@Require装饰器与@Prop、@State、@Provide、@BuilderParam、普通变量（无状态装饰器修饰的变量）结合使用时，若父组件Index在构造Child时未传递相应参数，则会导致编译失败。当ChildV2组件内将@Require装饰器与@Param结合使用时，若父组件Index在构造ChildV2时未传递相应参数，则同样会导致编译失败。 + ### 相关权限 不涉及。 diff --git a/ArkUIKit/ScrollableComponent/README_zh.md b/ArkUIKit/ScrollableComponent/README_zh.md index a3d01cde7a6495b68185dae531030d4c6c25b745..84128ae401725458f72a8ca6f919ebfc5e45fe75 100644 --- a/ArkUIKit/ScrollableComponent/README_zh.md +++ b/ArkUIKit/ScrollableComponent/README_zh.md @@ -4,13 +4,13 @@ 本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： -1. [创建列表 (List)](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.1.0-Release/zh-cn/application-dev/ui/arkts-layout-development-create-list.md)。 -2. [创建弧形列表 (ArcList)](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.1.0-Release/zh-cn/application-dev/ui/arkts-layout-development-create-arclist.md)（圆形屏幕推荐使用） -3. [创建网格 (Grid/GridItem)](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.1.0-Release/zh-cn/application-dev/ui/arkts-layout-development-create-grid.md)。 -4. [创建瀑布流 (WaterFlow)](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.1.0-Release/zh-cn/application-dev/ui/arkts-layout-development-create-waterflow.md) -5. [创建轮播 (Swiper)](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.1.0-Release/zh-cn/application-dev/ui/arkts-layout-development-create-looping.md)。 -6. [创建弧形轮播 (ArcSwiper)](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.1.0-Release/zh-cn/application-dev/ui/arkts-layout-development-arcswiper.md)（圆形屏幕推荐使用） -7. [选项卡 (Tabs)](https://gitcode.com/openharmony/docs/blob/OpenHarmony-5.1.0-Release/zh-cn/application-dev/ui/arkts-navigation-tabs.md) +1. [创建列表 (List)](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-layout-development-create-list.md)。 +2. [弧形列表 (ArcList)](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-layout-development-create-arclist.md)（圆形屏幕推荐使用） +3. [创建网格 (Grid/GridItem)](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-layout-development-create-grid.md)。 +4. [创建瀑布流 (WaterFlow)](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-layout-development-create-waterflow.md) +5. [创建轮播 (Swiper)](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-layout-development-create-looping.md)。 +6. [创建弧形轮播 (ArcSwiper)](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-layout-development-arcswiper.md)（圆形屏幕推荐使用） +7. [选项卡 (Tabs)](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-navigation-tabs.md) ### 效果预览 | 首页 | 列表类组件目录 | 列表中显示数据示例 | diff --git a/ArkUIKit/StateManagement/README_zh.md b/ArkUIKit/StateManagement/README_zh.md index df1962eb91cf2fc4fcadab137e9f49013511eedf..60fc7e5d11cbf5e944f58bc84aec4bfa745fbfb3 100644 --- a/ArkUIKit/StateManagement/README_zh.md +++ b/ArkUIKit/StateManagement/README_zh.md @@ -1,4 +1,4 @@ -# 状态管理最佳实践指南文档示例 +# 状态管理优秀实践指南文档示例 ### 介绍 @@ -8,10 +8,11 @@ ### 效果预览 -| 避免与否在for、while等循环逻辑中频繁读取状态变量的效果 | 使用临时变量替换状态变量或者直接操作状态变量的效果图 | 使用@ObjectLink和@Prop深拷贝的效果 | 使用状态变量或者不使用强行更新非状态变量的效果 | 精准与否控制状态变量关联的组件数的效果 | -| ------------------------------------ | --------------------------------------------- | --------------------------------------------------- | ------------------------------------ | -| ![](screenshots/image1.png) | ![](screenshots/image1.png) | ![](screenshots/image2.png) -| ![](screenshots/image3.png) | ![](screenshots/image4.png) | +避免与否在for、while等循环逻辑中频繁读取状态变量的效果 + +| 打印日志 | 打印日志1 | 打印日志2 | 打印 | +|-------------------------|----------------------------|-----------------------------|-----------------------------| +|![](screenshots/image1.png)| ![](screenshots/image2.png)| ![](screenshots/image3.png) | ![](screenshots/image4.png) | ### 使用说明 diff --git a/ArkUIKit/StateStyle/README_zh.md b/ArkUIKit/StateStyle/README_zh.md index c6eeaf21200fefd71213c87f897a2365936c6c17..5965a79def8f6c3178970b0ca6adc79ad4b1add9 100644 --- a/ArkUIKit/StateStyle/README_zh.md +++ b/ArkUIKit/StateStyle/README_zh.md @@ -1,9 +1,16 @@ -# ArkUI使用支持交互事件指南文档示例 +# 手势响应指南 ### 介绍 -本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui) +1. 本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui) 中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。 +2. 单击作为常用的手势，可以方便地使用onClick接口实现。尽管被称为事件，它实际上是基本手势类型，等同于将count配置为1的TapGesture，即单击手势。 +3. 组合手势由多种单一手势组合而成，通过在GestureGroup中使用不同的GestureMode来声明该组合手势的类型，支持顺序识别、并行识别和互斥识别三种类型。 +4. 多层级手势事件指父子组件嵌套时，父子组件均绑定了手势或事件。在该场景下，手势或者事件的响应受到多个因素的影响，相互之间发生传递和竞争，容易出现预期外的响应。 +5. 手势冲突是指多个手势识别器在同一组件或重叠区域同时识别时产生竞争，导致识别结果不符合预期。 + +### 示例文档 +[stateStyles：多态样式](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-statestyles.md) ### 效果预览 @@ -42,10 +49,9 @@ entry/src/ohosTest/ ### 具体实现 -stateStyles 通过为组件的不同内部状态（如 normal、focused、pressed 等） -绑定对应的样式规则，实现动态的多态视觉效果，其使用方式是在组件上调用 -.stateStyles({}) 方法，传入一个以状态名为键的对象，每个状态内通过链式调 -用设置通用样式属性，从而在用户交互时自动切换外观，提升用户体验。 +1. stateStyles 通过为组件的不同内部状态（如 normal、focused、pressed 等）。 +2. 绑定对应的样式规则，实现动态的多态视觉效果，其使用方式是在组件上调用。 +3. stateStyles({}) 方法，传入一个以状态名为键的对象，每个状态内通过链式调用设置通用样式属性，从而在用户交互时自动切换外观，提升用户体验。 ### 相关权限 diff --git a/ArkUIKit/StateTrack/README_zh.md b/ArkUIKit/StateTrack/README_zh.md index a305e784bfc33a1b6e373eb440168925da0da6dc..34eb3ff7549fe61b980c3ca5c7848bef95becce2 100644 --- a/ArkUIKit/StateTrack/README_zh.md +++ b/ArkUIKit/StateTrack/README_zh.md @@ -1,4 +1,4 @@ -# ArkUI@Track装饰器指南文档示例 +# @Track装饰器：class对象属性级更新 ### 介绍 @@ -6,7 +6,7 @@ stateTrack 本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/tree/master/zh-cn/application-dev/ui) 中各场景的开发示例，展示在工程中，帮助开发者更好地理解@Track装饰器：class对象属性并合理使用。该工程中展示的代码详细描述可查如下链接： -1. [class属性级更新说明](https://gitcode.com/tianlongdevcode/docs_zh/blob/master/zh-cn/application-dev/ui/state-management/arkts-track.md)。 +1. [class属性级更新说明](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-track.md) ### [class属性级更新说明] @@ -73,6 +73,6 @@ entry/src/ohosTest/ git init git config core.sparsecheckout true echo code/DocsSample/ArkUISample/StateTrack > .git/info/sparse-checkout -git remote add origin https://gitCode.com/openharmony/applications_app_samples.git +git remote add origin https://gitcode.com/openharmony/applications_app_samples.git git pull origin master ```` \ No newline at end of file diff --git a/ArkUIKit/StyledStringNDK/README.md b/ArkUIKit/StyledStringNDK/README.md index f6498c7cf0d08a490494d5a37ebfb50dbc581aaf..30b66c1187d6dc7579d7b7f3bc2dce188e9b90c7 100644 --- a/ArkUIKit/StyledStringNDK/README.md +++ b/ArkUIKit/StyledStringNDK/README.md @@ -1,4 +1,4 @@ -# StyledStringNDK +# Text组件的文本绘制与显示 ## 介绍 diff --git a/ArkUIKit/TextComponent/README_zh.md b/ArkUIKit/TextComponent/README_zh.md index ab15c9cac147f5fbd448da360d086a64195f6548..1e437719c514ca469483a0fb971f601037bf1fce 100644 --- a/ArkUIKit/TextComponent/README_zh.md +++ b/ArkUIKit/TextComponent/README_zh.md @@ -6,7 +6,7 @@ 本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-components-text-display.md)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： 1. [文本显示 (Text/Span)](https://gitCode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-components-text-display.md)。 -2. [文本输入 (TextInput/TextArea)](https://gitCode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-components-text-input.md)。 +2. [文本输入 (TextInput/TextArea/Search)](https://gitCode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-components-text-input.md)。 3. [富文本 (RichEditor)](https://gitCode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-components-richeditor.md)。 4. [图标小符号 (SymbolGlyph/SymbolSpan)](https://gitCode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-common-components-symbol.md)。 5. [属性字符串 (StyledString/MutableStyledString)](https://gitCode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-styled-string.md)。 @@ -196,6 +196,6 @@ entry/src/ohosTest/ git init git config core.sparsecheckout true echo code/DocsSample/ArkUISample/TextComponent > .git/info/sparse-checkout -git remote add origin https://gitCode.com/openharmony/applications_app_samples.git +git remote add origin https://gitcode.com/openharmony/applications_app_samples.git git pull origin master ```` \ No newline at end of file diff --git a/ArkUIKit/arktsobservedandobjectlink/.gitignore b/ArkUIKit/arktsobservedandobjectlink/.gitignore deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/ArkUIKit/arktsobservedandobjectlink/entry/.gitignore b/ArkUIKit/arktsobservedandobjectlink/entry/.gitignore deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/ArkUIKit/arktsobservedandobjectlink/entry/src/main/ets/pages/ObservedAndObjectLinkFAQs/BasicNesting.ets b/ArkUIKit/arktsobservedandobjectlink/entry/src/main/ets/pages/ObservedAndObjectLinkFAQs/BasicNesting.ets index d2566368a72810e603e3e3a12363250d1e834d49..ea8e6674e8b103db27b0881917b433751faababd 100644 --- a/ArkUIKit/arktsobservedandobjectlink/entry/src/main/ets/pages/ObservedAndObjectLinkFAQs/BasicNesting.ets +++ b/ArkUIKit/arktsobservedandobjectlink/entry/src/main/ets/pages/ObservedAndObjectLinkFAQs/BasicNesting.ets @@ -69,7 +69,7 @@ class Cousin extends Parent { } setChild(childId: number): void { - return this.child.setChildId(childId); + this.child.setChildId(childId); } } diff --git a/ArkUIKit/checkpage/README_zh.md b/ArkUIKit/checkpage/README_zh.md index cdca3139ac567d0d2a78c94e43241f71437f4b39..457cd69687703b32db4ce90d9beb0d3df470b2b0 100644 --- a/ArkUIKit/checkpage/README_zh.md +++ b/ArkUIKit/checkpage/README_zh.md @@ -1,8 +1,8 @@ -# ArkUI页面检查指南文档示例 +# 检查页面布局示例工程 ## 介绍 -本示例通过使用[ArkUI指南文档](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-inspector-overview.md) +本示例通过使用[检查页面布局](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-inspector-overview.md) 中各场景的开发示例，展示在工程中，帮助开发者更好的理解并合理使用inspector双向定位能力，在DevEco Studio中快速定位组件、修改属性和调试组件，以提高开发效率。 diff --git a/ArkUIKit/internationalization/README_zh.md b/ArkUIKit/internationalization/README_zh.md index fc1384ead5aae7df973cb896ed25ba4e36d7346e..d1f2f817fa779745f7c3b836b0d9beafff2ad791 100644 --- a/ArkUIKit/internationalization/README_zh.md +++ b/ArkUIKit/internationalization/README_zh.md @@ -2,7 +2,7 @@ ### 介绍 -本示例展示了[@Once：初始化同步一次](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-color-effect.md)色彩的使用方法： +本示例展示了[UI国际化](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-internationalization.md)的使用方法： 使用说明： 1. 该工程可以选择在模拟器和开发板上运行。 @@ -10,8 +10,8 @@ 3. 进入”DocsSample/ArkUISample/internationalization/entry/src/ohosTest/ets/test/index.test.ets“文件，可以对本项目进行UI的自动化测试。 ### 效果预览 -| 首页 | 列表类组件目录 | 列表中显示数据示例 | -|------------------------------------|------------------------------------|------------------------------------| +| 界面布局和边框设置 | 自定义绘制Canvas组件 | +|------------------------------------|------------------------------------| | ![](screenshots/device/image1.png) | ![](screenshots/device/image2.png) | ### 使用说明 diff --git a/ArkUIKit/wrapbuilder/README.md b/ArkUIKit/wrapbuilder/README.md index e192ed79a2f7f479f2552dc12367c9770f7e434f..7d68ca10fee664810817493f42b593252eadff91 100644 --- a/ArkUIKit/wrapbuilder/README.md +++ b/ArkUIKit/wrapbuilder/README.md @@ -1,4 +1,4 @@ -# com.samples.wrapbuilder +# wrapBuilder：封装全局@Builder ## 介绍 @@ -19,7 +19,7 @@ 从API version 12开始，wrapBuilder支持在元服务中使用。 -[@ComponentV2装饰器](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-new-componentV2.md)。 +[@ComponentV2装饰器](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-create-custom-components.md#componentv2)。 [wrapBuilder：封装全局@Builder](https://gitcode.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/state-management/arkts-wrapBuilder.md)。