HarmonyOS 鸿蒙Next页面开发流程

一、鸿蒙页面开发流程

在鸿蒙页面开发中，一般分为以下4步：

1、划分页面结构：遵循从上到下，从左至右的原则，划分页面结构，规划显示组件

2、确定页面状态变量：确定页数据所需状态变量，承载页面数据

3、封装显示组件：选择系统基础组件或自己绘制组件，组装成页面所需显示组件

4、组装显示组件：组装封装好的显示组件，绑定页面状态数据，展示页面

以二手物品列表页为例：

主体页面从上至下，分为三个主要部分，搜索区域、热门搜索显示、物品列表（有吸顶效果）

吸顶之后，列表分菜单部分与常规列表显示部分

确定页面结构划分之后，需要定义状态变量

@State oldMachineList: Array<OldMachine> = []

@State hud: HUDClass = new HUDClass()

@State showMenu: boolean = false

@State marginTop: number = 200

@State topLineHeight: number = 10

@State menuIndex: number = 0

@State menuAreaHeight: number = 260

确定页面所需状态变量之后，根据页面结构划分，封装页面所需显示组件

HotSearchComp

EsNjFbSearchHeaderComp

EsNjFilterItemComp

MenuSortComp

MenuNjCategoryComp

MenuRegionComp

MenuPriceAndBuyYearComp

MenuHeader

最后组装页面显示

Stack(){ this.MainView() this.MenuView() this.FloatButton() } .alignContent(Alignment.BottomEnd) .width(CommonConstants.FULL_PERCENT) .height(CommonConstants.FULL_PERCENT)

二、数据拉取

通过业务model类封装页面拉取数据方法，并将数据结果赋值给页面状态变量，刷新页面显示

njServiceModel: NjServiceModel = new NjServiceModel()

private requestData(done?: (isSuccess: boolean) => void){ this.hud.show() this.requestParam.pageNum = this.curPage this.njServiceModel.getEsNjList(this.requestParam.toPostParam()) .then(oldMachineWrapper => { if (this.curPage === 1) { this.oldMachineList = oldMachineWrapper.content } else { this.oldMachineList = this.oldMachineList.concat(oldMachineWrapper.content) } if (oldMachineWrapper.content.length > 0) { this.curPage += 1 } done && done(true) this.hud.dismiss(this.oldMachineList.length > 0) }) .catch((err: Error) => { done && done(false) this.hud.dismiss(this.oldMachineList.length > 0) }) }

三、自定义组件

利用系统组件组合出自己需要的组件

例如综合排序菜单，利用系统的list组件，结合本地数据，进行渲染显示

@Component export struct MenuSortComp{ @State sortItems: Array<FilterSort> = [ new FilterSort(‘综合排序’,’’, true), new FilterSort(‘更新时间’,‘updated’), new FilterSort(‘价格最低’,‘priceMin’), new FilterSort(‘价格最高’,‘priceMax’), new FilterSort(‘车龄最短’,‘buyDate’)] onItemClick: (item: FilterSort) => void = (item: FilterSort) => {} resetSelect(){ this.sortItems.forEach(item => { item.isSelect = false }) } build() { List(){ ForEach(this.sortItems, (item: FilterSort) => { ListItem(){ Text(item.name) .fontColor(item.isSelect ? ‘#01ae66’ : ‘#999999’) .fontSize(15) .padding(16) .width(‘100%’) .textAlign(TextAlign.Center) }.onClick((event) => { this.resetSelect() item.isSelect = true this.onItemClick(item) }) }, (item: FilterSort) => JSON.stringify(item)) } .divider({strokeWidth: 1, color: ResManager.getBackgroundColor()}) } }

四、自定义组件-绘制

在系统组件无法满足业务需求时，需要自定义绘制组件，如筛选菜单显示：

系统组件无法满足业务需求时，如slider组件，需要左右双向可拖动，并且单位刻度可变的组件，需要自己计算位置、利用Canvas绘制图形、处理反馈事件.

build() { Canvas(this.rContext) .width(‘100%’) .height(‘100%’) .onReady(() => { this.mWidth = this.rContext.width this.mHeight = this.rContext.height this.leftCircleCenterX = this.startX this.rightCircleCenterX = this.mWidth - this.startX let stepLen = (this.rightCircleCenterX - this.leftCircleCenterX)/this.steps this.startY = this.mHeight/3 for (let i = 0; i < this.steps+1; i++) { if (i == this.steps) { this.stepValueArr[i] = this.rightCircleCenterX }else{ this.stepValueArr[i] = this.leftCircleCenterX + stepLen*i } } this.invalidateView(this.startX) }) .onTouch((event: TouchEvent) => { switch (event.type){ case TouchType.Down: let downX = event.touches[0].x this.dragLeftCircle = this.xInLeftCircle(downX) this.dragRightCircle = this.xInRightCircle(downX) break case TouchType.Move: let moveX = event.touches[0].x if (moveX < this.startX) { moveX = this.startX } if (moveX > this.mWidth - this.startX) { moveX = this.mWidth - this.startX } this.invalidateView(moveX) break case TouchType.Up: let upX = event.touches[0].x let amendX = this.amendX(upX) this.invalidateView(amendX) let leftValue = this.stepValueArr.indexOf(this.leftCircleCenterX) * this.step let rightValue = this.stepValueArr.indexOf(this.rightCircleCenterX) * this.step if (leftValue < rightValue) { this.onSliderValueChange(leftValue, rightValue) }else { this.onSliderValueChange(rightValue, leftValue) } break } }) }