ExpandableLayout

本项目基于ExpandableLayout 开发。

简介

ExpandableLayout是一个使用于OpenHarmony的组件库，它支持组件的展开和收起。

效果展示

下载安装

 ohpm install @ohos/expandablelayout

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包。

约束与限制

兼容性

在下述版本验证通过：

• DevEco Studio: DevEco Studio 6.0.2 Release(6.0.2.640), SDK: API22(6.0.2.130)。
• DevEco Studio: NEXT Developer Beta1(5.0.3.122), SDK: API12(5.0.0.18)。

权限要求

无

使用示例

完整示例

import { ExpandableLayout, OrientationType } from '@ohos/expandablelayout/Index'

@Component
export struct Simple {
  @State aaa: number = 0
  @State isDisplay: boolean = true
  @State isDisplay2: boolean = true
  @State adaptToHeight: number | undefined = undefined
  private columnHeight: number = 0
  expandableLayoutHeight: number = 0

  build() {
    Column() {
      Button('Tap to toggle expansion')
        .id('button')
        .shadow({
          radius: 16,
          color: '#cccccc',
          offsetX: 0,
          offsetY: 4
        })
        .padding(16)
        .borderRadius(0)
        .width('100%')
        .backgroundColor('#fafafa')
        .fontColor('#646464')
        .onClick(() => {
          if (this.isDisplay) {
            this.isDisplay = false
          } else if (this.isDisplay2) {
            this.isDisplay2 = false
          } else {
            this.isDisplay = true
            this.isDisplay2 = true
          }
        })
      ExpandableLayout({
        orientation: OrientationType.VERTICAL,
        duration: 1000,
        expansion: this.isDisplay,
        parallax: 0.5
      }) {
        Column() {
          Text('Fixed height')
            .fontColor(Color.White)
        }
        .backgroundColor('#00b300')
          .width('100%')
          .justifyContent(FlexAlign.Center)
          .height(50)
      }

      ExpandableLayout({
        orientation: OrientationType.VERTICAL,
        duration: 1000,
        expansion: this.isDisplay2,
        parallax: 0.5,
      }) {
        Column() {
          Text('Fill height')
            .fontColor(Color.White)
        }
        .backgroundColor('#0000ff')
          .onAppear(() => {
            const buttonSize = this.getUIContext().getComponentUtils().getRectangleById('button').size
            const buttonHeight = this.getUIContext().px2vp(buttonSize.height)
            this.expandableLayoutHeight = this.columnHeight - buttonHeight - 50
            this.aaa = this.expandableLayoutHeight
          })
          .width('100%')
          .justifyContent(FlexAlign.Center)
          .height(this.aaa)
      }
    }
    .height('100%')
      .width('100%')
      .id('column')
      .onAppear(() => {
        let height = this.getUIContext()
          .getComponentUtils()
          .getRectangleById('column')
          .size
          .height
        this.columnHeight = this.getUIContext().px2vp(height)
      })
  }
}

注意事项

无

使用说明

1. 在相应的文件中引入组件

import { ExpandableLayout, OrientationType } from '@ohos/expandablelayout/Index'

2. 在使用到的地方创建组件

在使用到的地方创建组件，创建时需要传入用到的参数。

 ExpandableLayout({
        orientation: OrientationType.VERTICAL,  //展开方向
        duration: 1000,                         //展开时间
        expansion: this.isDisplay2,             //展开状态
        parallax: 0.5,                          //视差
      }) {
        Column() {
          Text('Fill height')
            .fontColor(Color.White)
        }
        .backgroundColor('#0000ff')
          .onAppear(() => {
            const buttonSize = this.getUIContext().getComponentUtils().getRectangleById('button').size
            const buttonHeight = this.getUIContext().px2vp(buttonSize.height)
            this.expandableLayoutHeight = this.columnHeight - buttonHeight - 50
            this.aaa = this.expandableLayoutHeight
          })
          .width('100%')
          .justifyContent(FlexAlign.Center)
          .height(this.aaa)
      }
    }

接口说明

组件

名称	描述	参数类型	必填	HarmonyOS平台支持
ExpandableLayout	一个容器组件库，支持组件的展开和收起	orientation: OrientationType duration: number expansion: boolean | number parallax: number	是	是

关于混淆

• 代码混淆，请查看代码混淆简介。
• 如果希望ExpandableLayout库在代码混淆过程中不会被混淆，需要在混淆规则配置文件obfuscation-rules.txt中添加相应的排除规则。

-keep
./oh_modules/@ohos/expandablelayout

目录结构

/expandablelayout        # 项目根目录
├── entry      # 示例代码文件夹
├── library    # expandablelayout库文件夹
│    └─ src/main/ets   # 核心代码
│                └─ components
│                   └─ ExpandableLayout.ets   
│                └─ enums   
│                   └─ LayoutDirection.ets
│       └─index.ets                
├── README.md     # 安装使用方法    
├── README_zh.md  # 安装使用方法                    

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR 。

开源协议

本项目遵循 Apache-2.0。