实现个人信息页功能鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例实现如下个人页功能：

• 支持个人主页的头像、个人签名以及昵称信息修改同步
• 支持超限定行数（5行）的个人签名信息展开与折叠展示
• 支持网格化展示文集封面与文集标题

实现个人信息页功能源码链接

效果预览

实现思路

1. 在InfoEditPage页和PersonInfoPage页通过@State和@Provide实现状态同步更新

2. 通过对collapseText的监听，实现‘个人签名’的展开、收起

   .onClick(() => {
              if (this.collapseText === '...展开') {
                this.collapseText = '...收起';
                // 展开动画
                animateTo({
                  duration: 150,
                  curve: curves.springMotion(0.5, 0.8),
                }, () => {
                  this.maxLines = -1; // 使得设置的最大行属性无效
                })
              } else {
                this.collapseText = '...展开';
                // 收起动画
                animateTo({
                  duration: 100,
                  curve: Curve.Friction,
                }, () => {
                  this.maxLines = 5; // 只显示5行
                })
              }
            })