了解更多开源请访问：开源基础软件社区https://ost.51cto.com项目介绍项目内容：自定义基础组件和容器组件，依赖库的概念，本地依赖库的创建和引用，第三方库的引用。工具版本：DevEcoStudio3.1Canary1。SDK版本：3.2.1.4（API版本9Canary1）（阶段模型）。本项目基于HarmonyOS的ArkUI框架TS扩展的声明式开发范式。语法和概念请参考官网官方文档地址：DeclarativedevelopmentparadigmbasedonTSextension，效果演示依赖于实际项目中的库，我们会提取公共代码或独立功能（UI，算法...)开发效率。通用依赖库特点：调用简单，扩展性高。本地库本地库主要是指没有在npmcenter列出的库，只是依赖于本地库。1.创建一个本地库将鼠标移动到项目目录的顶部，单击鼠标右键，然后选择New>Module。b.在ChooseYourAbilityTemplate界面，选择OhosLibrary，点击Next。C。在ConfiguretheNewModule界面，配置模块信息，点击Finish。模块名称：新模块的名称。Language：选择HarmonyOSnpm包的开发语言。设备类型：选择HarmonyOSnpm包支持的设备类型。EnableNative：是否创建HarmonyOSnpm共享模块，用于调用C++代码。2.本地库的依赖在Terminal窗口，进入模块目录，执行如下命令安装，package.json中会自动添加依赖。npminstall(本地模块路径)npminstall../library3.本地库的调用在依赖库的根目录下，index.ets文件提供对外导出。在入口中的index.ets页面，导入依赖库。//导入本地依赖库import{MainPage}from'@ohos/library'@Entry@ComponentstructIndex{build(){Column(){//使用自定义组件MainPage()}.width('100%').height('100%').justifyContent(FlexAlign.Center)}}自定义组件可复用的UI单元，可与其他组件组合，由@Component修饰的结构体。本项目依赖库中的自定义组件：公共标题栏、侧边菜单容器。1、标题栏组件的标题可以自定义，左右两侧可以定义图标和点击事件。左边的图标有一个默认事件：页面返回。importrouterfrom'@ohos.router';/***自定义标题栏*/@ComponentexportstructTitleBar{//是否显示左侧图标privateisShowLeft=true//左侧图标privateleftIcon=$r('app.media.back')//左键点击事件，默认返回上一页privateleftClickEvent=()=>{router.back()}//titleprivatetitle='title'//是否显示右侧图标isShowRight=false//右侧图标privaterightIcon=$r('app.media.icon')//左键点击事件privaterightClickEvent:()=>voidbuild(){Column(){Stack(){Text(this.title).fontSize(20).fontColor('#ff1a1a1a')Row(){if(this.isShowLeft){Image(this.leftIcon).size({width:55,height:55}).padding(15)复制代码.onClick(()=>this.leftClickEvent())}Blank()if(this.isShowRight){Image(this.rightIcon).size({width:55,height:55}).padding(15).onClick(this.rightClickEvent)}}.width('100%')}.width('100%').height(0).layoutWeight(1)Divider().color('#ffbababa')}.width('100%').height(55)}}标题栏组件的使用：import{TitleBar}from'@ohos/library'@Entry@ComponentstructIndex{build(){Column(){TitleBar({title:'Home',leftIcon:$r('app.media.menu'),leftClickEvent:()=>{//左图标点击事件}})}.width('100%').height('100%')}}2.左右滑动侧滑菜单容器来控制菜单。菜单打开时，背景透明度发生变化，使用动画效果打开或关闭菜单/***Slidemenu*/@ComponentexportstructSlideMenuContainer{//菜单宽度@StatemenuWidth:number=0//菜单x轴偏移@StatemenuOffsetX:number=0//最小菜单偏移privateoffsetXMin=0//菜单的最大偏移量privateoffsetXMax=0//第一次按下的x坐标privatefirstDownX=-1//最后一次按下的x坐标privatelastDownX=-1//背景透明度@StatebgOpacity:number=0//滑动方向privateslideDirection:'left'|'right'//菜单布局@BuilderParammenu:any//内容布局@BuilderParamcontent:any//timerIDprivateintervalID=0//是否打开菜单@Link@Watch('isOpenChanger')isOpen:booleanisOpenChanger(){if(this.isOpen){this.openMenu()}}build(){Stack({alignContent:Alignment.Start}){//内容布局Column(){this.content()}.width('100%').height('100%')if(this.bgOpacity){//透明背景Column(){}.width('100%').height('100%').backgroundColor(Color.Black).opacity(this.bgOpacity)}//菜单布局Column(){this.menu()}.width(this.menuWidth).height('100%').backgroundColor(Color.White).offset({x:this.menuOffsetX})}.width('100%').height('100%').onTouch((event)=>this.onTouchEvent(event)).onAreaChange((oldValue:Area,newValue:Area)=>{//在监听回调中获取容器的宽度constwidth=Number.parseInt(newValue.width.toString())this.menuWidth=width*0.7this.menuOffsetX=-this.menuWidththis.offsetXMin=-this.menuWidththis.offsetXMax=0})}/***触摸事件*/onTouchEvent(event:TouchEvent){constx=event.touches[0].xswitch(event.type){caseTouchType.Down://手指按下{this.firstDownX=xthis.lastDownX=xclearInterval(this.intervalID)}休息;caseTouchType.Move://手指移动{//计算这个x坐标点和上一个x坐标点的差值constdiff=x-this.lastDownXthis.lastDownX=x//累加滑动距离this.menuOffsetX+=diff//确定方向this.slideDirection=diff>0?'right':'left'//限制距离范围if(this.menuOffsetX>=this.offsetXMax)this.menuOffsetX=this.offsetXMaxif(this.menuOffsetX<=this.offsetXMin)this.menuOffsetX=this.offsetXMin//改变背景不透明度this.bgOpacity=0.6*Math.abs(this.menuWidth+this.menuOffsetX)/this.menuWidth}break;caseTouchType.Up://手指向上{if(Math.abs(x-this.firstDownX)<5){return}if(this.slideDirection==='left'){//是否小于3/2的宽度constisClose=Math.abs(this.menuWidth+this.menuOffsetX)
