# MoreComponent

**Repository Path**: wadivision/more-component

## Basic Information

- **Project Name**: MoreComponent
- **Description**: HarmonyOS more 组件
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-25
- **Last Updated**: 2026-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HarmonyOS组件, HuaWei

## README

# More组件

More组件是一个基于HarmonyOS ArkUI框架开发的UI容器类组件, 该组件包含常驻显示部分和可展开部分，通过点击“更多”按键控制展开/收起状态！内置了两种展开样式，抽屉和弹出样式，只需要设置对应参数即可; 内部封装了一个非常简单的内容组件类 MoreContent，默认为图标+标签的样式，可以通过参数或构建器修改显示样式，非常便捷！

## 一、开发背景

平时经常使用的众多APP中,不乏一些功能丰富、板块数量众多的APP（如“支付宝”，“中国移动”，各类银行APP),在这些APP有一个共同点：首页上，有一块区域常驻显示一些常用功能，同时包含一个“全部”或“更多”按键，点击这个按键用户能快速获取其他功能。如下图所示

![z](./assets/支付宝APP.png)![p](./assets/PUFA_APP.png)![y](./assets/移动APP.png)

在一个APP中聚合大量的垂域功能逐步成为趋势，为了能够简化此类应用的开发流程，提高开发此类效率，对“常驻+更多”功能区特点进行了归纳总结之后，我开发了More容器组件。

## 二、核心价值
More容器类组件，为用户提供了一个“常驻+临时”组件群框架和一个便捷的内容构建组件MoreComponent，可以帮助用户快速在APP的首页上搭建一个“常驻+更多”的功能区，More组件有以下核心价值：

1. 接口友好，使用方便

  More容器使用尾随闭包技术，用户可以采用内容插槽的形式，向容器中添加子组件，与Column等系统容器组件的使用方式完全相同，用户可以快速上手，学习成本极低，且编写的代码结构清晰，可读性强。

![tl](./assets/life.png)

2. 封装容器子组件，快速构建容器内容

  对More的子组件进行了封装，形成了新的组件类MoreContent, MoreContent默认为图标+文字的组合![](./assets/MoreContent.png)；
  
  可以通过设置状态参数label和image修改默认样式；
  
  也可以通过传入自定构建器CBuilder，构建自定义的子组件样式和点击动作。

  MoreContent的状态变量isResident控制子组件的常驻属性,默认常驻显示，需要调整为临时显示时指定isResident为false。


3. 两种组件展开样式

  More组件提供了两种展开样式，Drawer和Popup,展示效果如下，用户可以根据需要灵活选择

  * 抽屉模式（Drawer）

![Drawer](./assets/drawer.gif)

  * 弹出模式（Popup)

![Popup](./assets/popup.gif)

4. 内置交互逻辑

  More组件中，默认包含“更多"按键和其交互逻辑，根据用户设置展开模式，组件内自动切换，无需用户编写额外代码。 

## 三、使用集成
1. 下载安装库
```
ohpm install @life/more

```
2. 导入
```typescript
import { More,MoreContent, MoreExpandMode as MEM } from '@life/more'
```

3. 组件参数说明

* More

|参数|类型|功能|
|--|--|--|
|expandMode|MoreExpandMode|控制More组件的显示样式，包含（Drawer和Popup两种内置样式）|

* MoreContent

|参数|类型|功能|
|--|--|--|
|image| PixelMap \| ResourceStr \| DrawableDescriptor| 设置默认样式中的Image组件内容|
|label| string| 设置默认样式中的Text组件内容|
|isResident| boolean| 设置More子组件为常驻（true默认）或者临时（false)|
|CBuilder|() => void| 设置自定义组件构建器|


4. 调用代码实例

```typescript

import { More,MoreContent, MoreExpandMode as MEM } from '@life/more'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column(){
      More({expandMode:MEM.Popup}){
        MoreContent();
        MoreContent();
        MoreContent();
        MoreContent();
        MoreContent({isResident:false,label:'临时',image:$r('app.media.ic_nonResident')});
        MoreContent({isResident:false,label:'临时',image:$r('app.media.ic_nonResident')});
        MoreContent({isResident:false,label:'临时',image:$r('app.media.ic_nonResident')});
        MoreContent({isResident:false,label:'临时',image:$r('app.media.ic_nonResident')});
        MoreContent({isResident:false,label:'临时',image:$r('app.media.ic_nonResident')});
        MoreContent({isResident:false,label:'临时',image:$r('app.media.ic_nonResident')});
      }
    }
  }
}
```

## 四、版本说明
* 20260126 - v1.0.0: 实现了组件的基本功能
* 20260129 - v1.0.1: 
  * 增加了签名
  * 兼容SDK-6.0.0
  * 组件添加了 life组名