OpenHarmony实战开发-如何使用ArkTS来实现折叠展开动效。

最新推荐文章于 2024-08-07 20:21:18 发布

不入流HarmonyOS开发

最新推荐文章于 2024-08-07 20:21:18 发布

阅读量983

点赞数 23

分类专栏： OpenHarmony HarmonyOS 鸿蒙文章标签： harmonyos 鸿蒙应用开发华为鸿蒙开发 OpenHarmony 鸿蒙鸿蒙系统

本文链接：https://blog.csdn.net/m0_70749039/article/details/139150695

版权

鸿蒙同时被 3 个专栏收录

659 篇文章 6 订阅

订阅专栏

HarmonyOS

652 篇文章 4 订阅

订阅专栏

OpenHarmony

647 篇文章 6 订阅

订阅专栏

场景介绍

由于目前移动端需要展示的内容越来越多，但是移动端的空间弥足珍贵，在有限的空间内不可能罗列展示全部种类内容，因此折叠/展开功能就可以解决当前问题，本文就介绍下如何使用ArkTS来实现折叠展开动效。

效果呈现

折叠展开动效定义：点击展开按钮，下拉动画展示内容，点击折叠按钮，折叠动画折叠内容。本例最终效果如下：

在这里插入图片描述

运行环境

本例基于以下环境开发，开发者也可以基于其它适配的版本进行开发：

IDE: DevEco Studio 3.1 Release
SDK: Ohos_sdk_public 3.2.12.5(APIVersion 9 Release)

实现思路

创建折叠时的文本组件，根据List组件中的groupcollapse和groupexpand事件自定义一个CollapseAndExpand组件，父组件通过维护flag和onFlagChange来控制折叠/展开的动效，设置动效所需的参数，添加逻辑来展示展开后的文本。

开发步骤

1.创建自定义接口IRowItem。具体代码如下：

interface IRowItem {
    id?: number;
    title?: string;
    name1?: string;
    name2?: string;
    name3?: string;
    flag?: boolean;
    type?: string;
    onFlagChange?: () => void;
}

2.创建自定义组件CollapseAndExpandDemo，根据自定义接口IRowItem添加内容，创建UI展示文本。具体代码如下：

@Entry
@Component{
    ...
    build() {
        Column() {
            Row() {
                Image($r("app.media.ic_public_back"))
                .width(20)
                .height(20)
                Text('周免英雄')
                .fontSize(18)
                .fontWeight(FontWeight.Bold)
                .margin({ left: 10 })
            }
            .width('100%')
            .margin({ bottom: 30 })
    
            Column() {
                RowItem({ props: { title: 'AAAAA', name1: 'BBBBB', name2: 'CCCCC', name3: '武器大师' } })
                // 文本折叠时，type为DOWN
                RowItem({ props: { name1: 'DDDDD', name2: 'EEEEE', name3: 'FFFFF', type: 'DOWN', onFlagChange: this.onFlagChange } })  

                //被折叠的文本内容
                ...  

                RowItem({ props: { title: '商城', name1: '免费', name2: '特价', name3: 'VIP' } })
                RowItem({ props: { title: '分类', name1: '按职业', name2: '按位置', name3: '按城市' } })
            }
            .width('100%')
}

被折叠文本信息。具体代码如下：

CollapseAndExpand({
    items: [
        { id: 0, name1: 'GGGGG', name2: 'HHHHH', name3: 'JJJJJ' },
        { id: 1, name1: 'KKKKK', name2: 'LLLLL', name3: 'MMMMM' },
        { id: 2, name1: 'NNNNN', name2: 'OOOOO', name3: 'PPPPP' },
        // 文本展开时，type为UP
        { id: 3, name1: 'QQQQQ', name2: 'RRRRR', name3: 'SSSSS', type: 'UP', onFlagChange: this.onFlagChange }
    ],
})

3.将步骤2创建的文本进行渲染。具体如下：

build() {
    Flex() {
      Text(this.props.title)
        .fontSize(14)
        .fontWeight(FontWeight.Bold)
        .layoutWeight(1)
        .fontColor(Color.Red)
        .margin({ right: 10 })
      Flex({ alignItems: ItemAlign.Center }) {
        Text(this.props.name1).fontSize(14).margin({ right: 10 })
        Text(this.props.name2).fontSize(14).margin({ right: 10 })
        Text(this.props.name3).fontSize(14).margin({ right: 10 })
        ...
      }
    }
  }

4.创建自定义组件CollapseAndExpand。根据自定义组件说明动效,@Provide负责数据更新，并且触发渲染;@Consume在感知数据更新后，重新渲染。具体代码如下：

@Entry
@Component
struct CollapseAndExpandDemo {
  @Provide("flag") flag: boolean = false
  private onFlagChange = () => {
    animateTo({   
        duration: 650,
        curve: Curve.Smooth
    }, () => {
        this.flag = !this.flag;
    })
  } 

  ...

@Component
struct CollapseAndExpand {
    private items: IRowItem[] = [];
    @Consume("flag") flag: boolean;
    
    build() {
        Column() {
            ForEach(this.items, (item: IRowItem) => {
                RowItem({ props: item })
            }, (item: IRowItem) => item.id.toString())
        }
        .width('100%')
        .clip(true)
        .height(this.flag ? 130 : 0)
    }
}

5.根据步骤4最终的flag以及props的type值，判断折叠展开的效果实现。具体代码如下：

build() {
    ...
    // 当文本折叠（flag为false且type为down）时，展示展开按钮
    // 当文本展开（flag为true且type为up）时，展示折叠按钮
    if (!this.flag && this.props.type === 'DOWN' || this.flag && this.props.type === 'UP') {
    Image($r("app.media.icon"))
        .width(16)
        .height(16)
        .objectFit(ImageFit.Contain)
        .rotate({ angle: !this.flag && this.props.type === 'DOWN' ? 0 : 180 })
        // 点击按钮后旋转180°，展示折叠按钮
        .onClick(() =>
        this.props.onFlagChange()
        )
        .transition({ type: TransitionType.All, opacity: 0 })
    }
}

完整代码

示例代码如下:

interface IRowItem {
    id?: number;
    title?: string;
    name1?: string;
    name2?: string;
    name3?: string;
    flag?: boolean;
    type?: string;
    onFlagChange?: () => void;
}

@Entry
@Component
struct CollapseAndExpandDemo {
    @Provide("flag") flag: boolean = false
    private onFlagChange = () => {
        animateTo({  
            duration: 650,
            curve: Curve.Smooth
            }, () => {
                this.flag = !this.flag;
                })
    }

    build() {
        Column() {
            Row() {
                Image($r("app.media.ic_public_back")).width(20).height(20)
                Text('周免英雄')
                .fontSize(18)
                .fontWeight(FontWeight.Bold)
                .margin({ left: 10 })
            }
            .width('100%')
            .margin({ bottom: 30 })

            Column() {
                RowItem({ 
                    props: { title: '英雄', name1: 'AAAAA', name2: 'BBBBB', name3: 'CCCCC' } })
                RowItem({ 
                    props: { 
                        name1: 'DDDDD', 
                        name2: 'EEEEE', 
                        name3: 'FFFFF', 
                        // 文本折叠时，type为DOWN
                        type: 'DOWN', 
                        onFlagChange: this.onFlagChange  
                    }
                })
                // 直接调用折叠展开组件
                CollapseAndExpand({
                    items: [
                        { id: 0, name1: 'GGGGG', name2: 'HHHHH', name3: 'JJJJJ' },
                        { id: 1, name1: 'KKKKK', name2: 'LLLLL', name3: 'MMMMM' },
                        { id: 2, name1: 'NNNNN', name2: 'OOOOO', name3: 'PPPPP' },
                        { id: 3, 
                        name1: 'QQQQQ', 
                        name2: 'RRRRR', 
                        name3: 'SSSSS', 
                        // 文本折叠时，type为UP
                        type: 'UP', 
                        onFlagChange: this.onFlagChange }  
                    ],
                })

                RowItem({ props: { title: '商城', name1: '免费', name2: '特价', name3: 'VIP' } })
                RowItem({ props: { title: '分类', name1: '按职业', name2: '按位置', name3: '按城市' } })
            }
            .width('100%')

        }
        .height('100%')
        .padding({ top: 30, right: 30, left: 30 })
  }
}

@Component
struct RowItem {
    private props: IRowItem;
    @Consume("flag") flag: boolean

    build() {
        Flex() {
            Text(this.props.title)
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .layoutWeight(1)
            .fontColor(Color.Red)
            .margin({ right: 10 })
            Flex({ alignItems: ItemAlign.Center }) {
                Text(this.props.name1).fontSize(14).margin({ right: 10 })
                Text(this.props.name2).fontSize(14).margin({ right: 10 })
                Text(this.props.name3).fontSize(14).margin({ right: 10 })

                // 当文本折叠（flag为false且type为down）时，展示展开按钮
                // 当文本展开（flag为true且type为up）时，展示折叠按钮
                if (!this.flag && this.props.type === 'DOWN' || this.flag && this.props.type === 'UP') {
                    Image($r("app.media.ic_public_arrow_down_0"))
                    .width(16)
                    .height(16)
                    .objectFit(ImageFit.Contain)
                    .rotate({ angle: !this.flag && this.props.type === 'DOWN' ? 0 : 180 }) 
                    // 点击展开按钮后旋转180°，展示折叠按钮
                    .onClick(() => this.props.onFlagChange())
                    .transition({ type: TransitionType.All, opacity: 0 })
                }
            }
            .layoutWeight(3)
        }
        .width('100%')
        .height(16)
        .margin({ top: 15 })
    }
}

@Component
struct CollapseAndExpand {
    private items: IRowItem[] = [];
    @Consume("flag") flag: boolean;

    build() {
        Column() {
            ForEach(this.items, (item: IRowItem) => {
                RowItem({ props: item })
            }, (item: IRowItem) => item.id.toString())
        }
        .width('100%')
        .clip(true)
        .height(this.flag ? 130 : 0)
    }
}

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：`https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3`

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：`https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3`

在这里插入图片描述

OpenHarmony APP开发教程步骤：`https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3`

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：`https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG`

在这里插入图片描述

应用开发中级就业技术：`https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3`

在这里插入图片描述

应用开发中高级就业技术：`https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3`

在这里插入图片描述

南北双向高工技能基础：`https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3`

在这里插入图片描述

全网首发-工业级南向设备开发就业技术：`https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3`

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：`https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3`

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：`https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3`

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：`https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3`

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

不入流HarmonyOS开发

关注

23
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
OpenHarmony实战开发-如何使用ArkTS来实现折叠展开动效。

由于目前移动端需要展示的内容越来越多，但是移动端的空间弥足珍贵，在有限的空间内不可能罗列展示全部种类内容，因此折叠/展开功能就可以解决当前问题，本文就介绍下如何使用ArkTS来实现折叠展开动效。
复制链接

扫一扫