swipe-layout-cj集成实战通过cjpm.toml与oh-package.json5两步引入滑动组件库【免费下载链接】swipe-layout-cj各种样式的滑动组件项目地址: https://gitcode.com/Cangjie-TPC/swipe-layout-cjswipe-layout-cj 是一个 Cangjie 语言的 UI 滑动组件库用于快速搭建屏幕顶部、底部、左侧、右侧四个方向的滑动布局轻松实现列表左滑删除、四向功能菜单等常见交互。本文带你通过修改 oh-package.json5 和 cjpm.toml 这两个文件两步完成滑动组件库的引入全程不到 5 分钟。特性一览4 种滑动组件随心选swipe-layout-cj 内置了多种样式的滑动容器覆盖常见业务场景组件能力适用场景SwipeLayout顶部/底部/左侧/右侧四向滑动自定义滑动菜单SwipeLayoutLayDownFullList右侧滑动List 列表左滑删除SwipeLayoutLayDownFullGrid右侧滑动Grid 网格滑动操作SwipeLayoutLayDownRoot嵌套滑动容器复杂嵌套布局下方动图展示了SwipeLayout四向滑动组件的实际效果手指从屏幕任意方向滑出功能面板 核心组件源码位于 swipe_layout.cj可直接阅读实现细节。第一步获取 swipe-layout-cj 源码打开终端克隆滑动组件库到本地两种引入方式任选其一# 方式一直接克隆 git clone https://gitcode.com/Cangjie-TPC/swipe-layout-cj.git # 方式二作为 git submodule 引入目标工程 cd $工程根目录 mkdir third-party cd third-party git submodule add https://gitcode.com/Cangjie-TPC/swipe-layout-cj.git 方式一需将swipelayout模块拷贝到你的应用项目下方式二适合多项目共享推荐长期使用。第二步配置 oh-package.json5 依赖打开应用 entry/oh-package.json5在dependencies字段中添加本地模块路径{ name: entry, version: 1.0.0, dependencies: { swipelayout: file:../swipelayout } }这一步告诉构建系统entry模块依赖本地的swipelayout模块。库模块自身的包信息可参考 swipelayout/oh-package.json5。第三步配置 cjpm.toml 依赖打开 entry/src/main/cangjie/cjpm.toml在[dependencies]下添加路径依赖[dependencies] [dependencies.swipelayout] path ../../../../swipelayout/src/main/cangjie version 1.0.0⚠️ 注意path是相对路径请根据cjpm.toml所在目录到swipelayout/src/main/cangjie的实际层级调整../的数量。至此两步两个配置文件配置完毕Cangjie 侧的包信息可参考 swipelayout/src/main/cangjie/cjpm.toml。导入滑动组件并开始使用在任意.cj页面中导入组件包即可import swipelayout.*以 List 列表为例将SwipeLayoutLayDownFullList放进ListItem内传入列表内容surfaceView和右侧滑动面板bottomViewRight两个构建器即可获得带删除按钮的滑动列表import swipelayout.SwipeLayoutLayDownFullList ListItem() { SwipeLayoutLayDownFullList( bottomViewRightW: Float64(this.disWidth), surfaceView: surfaceView, // list 列表组件 bottomViewRight: bottomViewRight, // 右侧滑动布局样式 mWidth: 100.0, // 组件宽度 mHeight: 90.0, // 组件高度 itemContent: item.toString(), itemId: index ) }完整可运行的 List 示例见 list.cjGrid 网格示例见 grid.cj首页入口在 index.cj。Grid 场景下使用SwipeLayoutLayDownFullGrid每个网格项右侧滑出操作图标常见坑位与快速排错path层级不对cjpm.toml 在entry/src/main/cangjie/下需要 4 级../才能回到工程根目录路径写错会直接报找不到依赖只改了一个配置文件oh-package.json5 管模块依赖、cjpm.toml 管 Cangjie 包依赖两者缺一不可滑动区域尺寸不一致自定义的bottomViewRight宽度建议与参数bottomViewRightW保持一致否则会出现错位开发环境建议在 DevEco Studio 5.0.13.200 Cangjie Support Plugin 5.0.13.200 下开发兼容性已验证。更多参数说明可查阅 doc/feature_api.md 接口文档项目总览见 README.md。小结本文介绍了 swipe-layout-cj 滑动组件库的快速集成方法克隆仓库获取swipelayout模块源码在oh-package.json5中添加file:模块依赖在cjpm.toml中添加path路径依赖import swipelayout.*后即可使用 4 种滑动组件。掌握这两步配置你就能在 Cangjie 应用里轻松做出媲美原生的滑动交互体验 【免费下载链接】swipe-layout-cj各种样式的滑动组件项目地址: https://gitcode.com/Cangjie-TPC/swipe-layout-cj创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考