diff --git a/zh-cn/third-party-cases/Readme-CN.md b/zh-cn/third-party-cases/Readme-CN.md index 1d09990eb795c177d6f8b9d6ba2fb78ac2ec00ba..f6a74f8252f5ff301db4edcb848507d960a44714 100644 --- a/zh-cn/third-party-cases/Readme-CN.md +++ b/zh-cn/third-party-cases/Readme-CN.md @@ -10,7 +10,7 @@ - [如何按字母分组展示联系人](how-to-group-contacts-with-alphabet.md) - [如何实现列表项的新增和删除](how-to-add-delete-listitems.md) - [如何通过显示动画实现书籍翻页动效](book-flip-animation.md) -- [如何为同一组件在不同场景下绑定不同的业务逻辑](how-to-bind-different-operations-for-one-component.md) +- [如何为同一组件在不同场景下绑定不同的业务逻辑](different-operations-for-one-component.md) diff --git a/zh-cn/third-party-cases/book-flip-animation.md b/zh-cn/third-party-cases/book-flip-animation.md index c724301c3e38c128f420dc1278e6310638283024..10723d3f731809c3c51c880a598bbd7168b7008d 100644 --- a/zh-cn/third-party-cases/book-flip-animation.md +++ b/zh-cn/third-party-cases/book-flip-animation.md @@ -1,39 +1,41 @@ -## 如何通过显示动画实现书籍翻页动效 +# 如何通过显示动画实现书籍翻页动效 -### 场景介绍 +## 场景介绍 -翻页动效是应用开发中常见的动效场景，常见的如书籍翻页、日历翻页等。本文就为大家举例讲解如何通过ArkUI提供的显示动画接口[animateTo](https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md/)实现书籍翻页的效果。 +翻页动效是应用开发中常见的动效场景，常见的如书籍翻页、日历翻页等。本文就为大家举例讲解如何通过ArkUI提供的显示动画接口[animateTo](../application-dev/reference/arkui-ts/ts-explicit-animation.md)实现书籍翻页的效果。 -### 效果呈现 +## 效果呈现 本例最终实现效果如下： ![翻页动效示例图](figures/book-flip-animation.gif) -### 环境要求 +## 环境要求 -- IDE：DevEco Studio 3.1.1.301 -- SDK：3.2.2.6（API9） +- IDE：DevEco Studio 3.1 Beta1 +- SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release) -### 实现思路 +## 实现思路 如图，我们分上下两层、左右两侧建立4个文本组件（下文用A、B、C、D代称），左右两侧分别代表打开书籍的左右两面，上下两层堆叠放置。 当B沿旋转轴旋转180度覆盖在A上时，就体现为翻页效果。一个翻页动作的完成包括以下几步： -1、B沿旋转轴旋转180度。 -2、B旋转时，D会在右侧显示出来，作为书籍的下一页，此时D承载的内容要变为下一页的内容。 -3、B旋转到左侧后，A承载的内容变为B的内容。 -4、由于A和B互为镜像，所以A显示为B的内容后，需要以A的中间为轴旋转180度。 -5、B重新旋转到右边，其承载的内容变为下一页的内容。 + +1. B沿旋转轴旋转180度。 +2. B旋转时，D会在右侧显示出来，作为书籍的下一页，此时D承载的内容要变为下一页的内容。 +3. B旋转到左侧后，A承载的内容变为B的内容。 +4. 由于A和B互为镜像，所以A显示为B的内容后，需要以A的中间为轴旋转180度。 +5. B重新旋转到右边，其承载的内容变为下一页的内容。 + ***说明：C用来占位，不需要做动作。*** 连续重复上述动作即可实现连续翻页动效。 ![翻页动效](figures/book-flip-logic.png) -### 开发步骤 +## 开发步骤 1. 创建文本组件 - 首先，我们看到动效中用到了4个文本组件，我们可以定义一个文本组件，然后对其进行重复调用。创建时我们为其添加[rotate](https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md/)属性，用来控制组件的旋转。 - 由于各组件旋转的角度和旋转中心不同，需要父组件在调用时传入对应的参数，所以我们为对应变量添加[@Prop](https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/ui/ts-component-states-prop.md/)装饰器，用来控制变量传递。具体代码如下： + 首先，我们看到动效中用到了4个文本组件，我们可以定义一个文本组件，然后对其进行重复调用。创建时我们为其添加[rotate](../application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md)属性，用来控制组件的旋转。 + 由于各组件旋转的角度和旋转中心不同，需要父组件在调用时传入对应的参数，所以我们为对应变量添加[@Prop](../application-dev/quick-start/arkts-prop.md)装饰器，用来控制变量传递。具体代码如下： ``` @Component struct BookCard{ @@ -66,7 +68,7 @@ } ``` 2. 创建父组件框架 - 由于文本组件分为上下两层，所以我们在父组件中采用[Stack](https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md/)组件进行层叠布局。同时使用[Divider](https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md/)组件作为书籍两个页面间的分隔线。具体代码如下： + 由于文本组件分为上下两层，所以我们在父组件中采用[Stack](../application-dev/reference/arkui-ts/ts-container-stack.md)组件进行层叠布局。同时使用[Divider](../application-dev/reference/arkui-ts/ts-basic-components-divider.md)组件作为书籍两个页面间的分隔线。具体代码如下： ``` @Entry @Component @@ -105,7 +107,7 @@ 最后我们通过以下几点来为静态的组件添加动效： - 根据**实现思路**章节的分析，在父组件中定义对应的变量，并在调用子组件时分别传入子组件。 - 自定义book_animate函数，在其中使用animateTo方法添加动画效果，同时控制动画的时长，以及动画过程中各元素状态的改变。 - - 在[aboutToAppear](https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md/)方法中，使用[setInterval](https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/apis/js-apis-timer.md/)方法重复调用book_animate函数，以实现连续翻页动效。 + - 在[aboutToAppear](../application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md#abouttoappear)方法中，使用[setInterval](../application-dev/reference/apis/js-apis-timer.md)方法重复调用book_animate函数，以实现连续翻页动效。 具体代码如下： ``` @Entry @@ -177,7 +179,7 @@ ``` 通过以上步骤我们就可以实现翻页动效了。 -### 完整代码 +## 完整代码 示例完整代码如下： ``` @Component diff --git a/zh-cn/third-party-cases/how-to-bind-different-operations-for-one-component.md b/zh-cn/third-party-cases/different-operations-for-one-component.md similarity index 96% rename from zh-cn/third-party-cases/how-to-bind-different-operations-for-one-component.md rename to zh-cn/third-party-cases/different-operations-for-one-component.md index 3450214bf9c5e81c06119d151b230a6d49797ce6..8a053e2c181ee79c2778394b392004fd6b6b240f 100644 --- a/zh-cn/third-party-cases/how-to-bind-different-operations-for-one-component.md +++ b/zh-cn/third-party-cases/different-operations-for-one-component.md @@ -1,28 +1,28 @@ -## 如何为同一组件在不同场景下绑定不同的业务逻辑 +# 如何为同一组件在不同场景下绑定不同的业务逻辑 -### 场景介绍 +## 场景介绍 我们在应用开发过程中经常遇到这样的场景：在不同的地方需要呈现同样的UI效果，为了简化处理，我们往往会把对应的UI元素封装成自定义组件，然后在用到的地方进行调用。但是，通常情况下，UI展示往往伴随着动态交互，而且在不同场景下需要做不同的交互处理。 *比如：A、B两个页面都有返回按钮，但是在A页面中点击返回按钮是返回上一页，在B页面点击返回按钮是直接退出当前应用。同样是点击返回按钮，但是业务处理逻辑是不同的。* 那么在不同场景下调用同一组件的时候如何实现不同的交互逻辑呢？这就引出了本文要讲的内容。 -### 实现思路 +## 实现思路 要使同一组件实现不同效果，我们很容易就想到通过变量传参进行控制，而不是直接在程序中采用固定值，这样我们就可以根据不同场景传入不同参数从而实现不同效果。 我们通常使用传参的方式改变组件的属性，比如：大小、边框、背景色、字体等等，同样的，我们也可以通过传参的方式改变组件绑定的业务逻辑，只不过，此时我们传入的是方法，然后在对应方法中写入具体的业务逻辑。 接下来我们用一个简单的例子讲解如何实现。 -### 开发示例 +## 开发示例 本示例将在一个页面中两次引用同一个按钮，然后为两次引用加入不同的处理逻辑，第一次引用中，点击按钮跳转到‘’Hello World!’‘页面；第二次引用中，点击按钮跳转到’‘Hello ArkTS!’‘页面。 -#### 环境要求 +### 环境要求 - IDE：DevEco Studio 3.1 Beta1 - SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release) -#### 开发步骤 +### 开发步骤 1. 创建按钮组件 首先，让我们创建被引用的按钮组件。 这里需要注意的是，由于按钮要绑定不同的处理逻辑，所以我们在点击事件中不要写入固定的处理逻辑，而是传入一个自定义的空方法，该方法的逻辑在父组件中实现，然后传入。具体代码如下： - ``` + ```ts @Component struct ChildComponent{ @State button_text:string = 'hi' @@ -42,7 +42,7 @@ 2. 在父组件中引用按钮组件 接下来，我们在父组件中引用两次第1步中创建的按钮组件。具体代码如下： - ``` + ```ts @Entry @Component struct FuncTransition{ @@ -63,7 +63,7 @@ 3. 在父组件中传入处理逻辑 以上两步已经把我们的页面框架搭好了，接下来就是给按钮组件传入处理逻辑了，这也是最重要的一步。 我们在第1步中为按钮组件的点击事件绑定了一个空函数，现在我们在父组件中创建一个带有具体处理逻辑的函数，并将其传入按钮组件中。在父组件中可以通过为同一函数传入不同参数来为两个按钮组件绑定不同逻辑，也可以通过不同函数来实现，本例中采用前者进行实现。具体代码如下： - ``` + ```ts import router from '@ohos.router' @Entry @Component @@ -94,9 +94,9 @@ ![相同子组件不同业务逻辑](figures/different-operations-one-component.gif) -### 完整代码 +## 完整代码 示例完整代码如下： -``` +```ts import router from '@ohos.router' @Entry @Component diff --git a/zh-cn/third-party-cases/how-to-add-delete-listitems.md b/zh-cn/third-party-cases/how-to-add-delete-listitems.md index 4b8b16570289637d1553e0ee478338640bd7fa16..a172516162a828b3c8ffcf412dda83837d65b61f 100644 --- a/zh-cn/third-party-cases/how-to-add-delete-listitems.md +++ b/zh-cn/third-party-cases/how-to-add-delete-listitems.md @@ -1,15 +1,15 @@ -## 如何实现列表项的新增和删除 +# 如何实现列表项的新增和删除 -### 场景介绍 +## 场景介绍 列表的编辑模式用途十分广泛，常见于待办事项管理、文件管理、备忘录的记录管理等应用场景。在列表的编辑模式下，新增和删除列表项是最基础的功能，其核心是对列表项对应的数据集合进行数据添加和删除。 下面以待办事项管理为例，介绍如何快速实现新增和删除列表项功能。 -### 环境要求 +## 环境要求 - IDE：DevEco Studio 3.1 Beta1 - SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release) -### 新增列表项 +## 新增列表项 如下图所示，当用户点击添加按钮时，将弹出列表项选择界面，用户点击确定后，列表中新增对应项目。 @@ -17,7 +17,7 @@ ![新增列表](figures/add-item.gif) -#### 开发步骤 +### 开发步骤 1. 定义列表项数据结构和初始化列表数据，构建列表整体布局和列表项。 以待办事项管理为例，首先定义待办事项的数据结构： @@ -81,7 +81,7 @@ ``` -### 删除列表项 +## 删除列表项 如下图所示，当用户长按列表项进入删除模式时，提供用户删除列表项选择的交互界面，用户勾选完成后点击删除按钮，列表中删除对应的项目。 @@ -89,7 +89,7 @@ ![删除列表](figures/delete-item.gif) -#### 开发步骤 +### 开发步骤 1. 列表的删除功能一般进入编辑模式后才可使用，所以需要提供编辑模式的入口。 以待办列表为例，通过LongPressGesture()监听列表项的长按事件，当用户长按列表项时，进入编辑模式。 @@ -153,7 +153,7 @@ }) ... ``` -### 完整示例代码 +## 完整示例代码 新增和删除列表项的实现共涉及三个文件，各文件完整代码如下： 1. 待办事项数据结构代码（ToDo.ets）： ```ts diff --git a/zh-cn/third-party-cases/how-to-group-contacts-with-alphabet.md b/zh-cn/third-party-cases/how-to-group-contacts-with-alphabet.md index 3ae912c62d6357dcf83d65d6d9cb5dadcfca2499..1d76c81255b6c221d1c32eb1dc62298237dd85f1 100644 --- a/zh-cn/third-party-cases/how-to-group-contacts-with-alphabet.md +++ b/zh-cn/third-party-cases/how-to-group-contacts-with-alphabet.md @@ -1,29 +1,30 @@ -## 如何按字母分组展示联系人（仅UI） +# 如何按字母分组展示联系人（仅UI） -### 场景说明 +## 场景说明 在通讯录中，需要将联系人按照姓氏的首字母进行分组排列，从而更方便联系人的查找；联系人列表右侧的字母导航可以随列表的滑动而定位到对应字母处；同时，也可以通过字母导航控制列表跳到指定联系人分组。 本例即为大家介绍如何通过实现上述场景。 -### 效果呈现 +## 效果呈现 本示例最终效果如下： ![contactlist](figures/contactlist.gif) -### 环境要求 +## 环境要求 - IDE：DevEco Studio 3.1 Beta1 - SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release) -### 实现思路 +## 实现思路 本例涉及的四个关键特性及其实现方案如下： - 联系人按字母分组展示：通过List组件显示联系人列表，通过ListItemGroup组件实现联系人分组。 - 联系人右侧呈现字母导航：使用AlphabetIndexer组件实现字母导航，同时通过Stack组件使字母导航浮在联系人列表右侧。 - 滑动联系人列表，右侧字母导航随之变动：通过List组件的onScrollIndex事件获取到联系人列表的滑动位置，并将该位置索引传递给字母导航的selected属性，作为字母导航的被选中项。 - 通过右侧字母导航控制联系人列表滑动到指定分组：通过字母导航的onSelected事件获取选中字母的索引，并将该索引传递给联系人列表的控制器，控制列表滑动到指定分组。 -### 开发步骤 +## 开发步骤 针对上述关键特性，具体实现步骤如下： + 1、先通过Stack、List、ListItemGroup、AlphabetIndexer等关键组件将UI框架搭建起来。 -先构建列表数据，其中Contact为联系人数据类 +先构建列表数据，其中Contact为联系人数据类。 ```ts contactGroups: object[] = [ ... @@ -184,8 +185,9 @@ struct ContactList{ ![navtolist](figures/navtolist.gif) -### 完整代码 +## 完整代码 通过上述步骤我们已经完成了整个示例的开发，现提供本示例的完整代码供大家参考： + 联系人数据类代码： ```ts // ListModel.ets @@ -333,5 +335,5 @@ struct ContactList{ } } ``` -### 参考 -[创建列表](https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/ui/arkts-layout-development-create-list.md/) \ No newline at end of file +## 参考 +[创建列表](../application-dev/ui/arkts-layout-development-create-list.md) \ No newline at end of file