夜雨聆风
HarmomyOS实战案例:闲置物品App
本项目基于HarmonyOS6，api20，采用V2版本状态管理，项目分为首页和分类两个页面，下面为大家介绍案例的详细实现过程。
首页
首页内容较多，整体可以分为标题栏和内容列表两部分。标题栏Navigation组件的title属性实现，Navigation的标题栏默认为自适应模式，我们需要固定设置为Mini模式，并且隐藏返回按钮。标题栏内容包括定位信息、搜索框和搜索按钮，整体呈水平布局，使用Row容器实现即可，具体代码如下：
pathStack:NavPathStack = new NavPathStack()@Builder TitleBar(){Row({space:25}){Row({space:3}){Image($r('app.media.location')).width(19).height(19)Text('北京').fontColor('#999999').fontSize(14)Image($r('app.media.down')).width(6).height(6)}Row({space:6}){Search().height(30).layoutWeight(1)Text('搜索').backgroundColor('#424241').fontColor(Color.White).textAlign(TextAlign.Center).fontSize(14).width(55).height(28).borderRadius(6)}.layoutWeight(1).alignItems(VerticalAlign.Center)}.width('100%').alignItems(VerticalAlign.Center).padding({left:12,right:12})}@Builder pathMap(name:string){if(name == 'type'){TypePage()}}Navigation(this.pathStack){}.titleMode(NavigationTitleMode.Mini).hideBackButton(true).title(this.TitleBar()).navDestination(this.pathMap)
ListItem(){Swiper(){Image($r('app.media.banner'))}.width('100%').height(172)}
export classTypeClass{title:string = ''image:Resource = $r('app.media.chongwu')}@Local typeList:TypeClass[] = [{title:'服饰',image:$r('app.media.fushi')},{title:'宠物',image:$r('app.media.chongwu')},{title:'书籍',image:$r('app.media.shuji')},{title:'电子',image:$r('app.media.dianzi')},{title:'其他',image:$r('app.media.qita')},]ListItem(){Row(){ForEach(this.typeList,(item:TypeClass,index)=>{Column({space:5}){Image(item.image).width(32).height(32)Text(item.title).fontSize(14).fontColor(Color.Black)}.onClick(()=>{this.pathStack.pushPathByName('type',null)})})}.width('100%').justifyContent(FlexAlign.SpaceAround).margin({top:20})}
ListItemGroup({header:this.GroupTitle()}){ListItem(){Scroll(){Row({space:20}){ForEach(this.goodsList,(item:string,index)=>{Column({space:4}){Text(item).fontSize(14).fontWeight(index == this.goodsIndex?FontWeight.Bold:FontWeight.Regular)Row(){}.width(30).height(3).backgroundColor('#FADA52').borderRadius(1.5).visibility(index == this.goodsIndex?Visibility.Visible:Visibility.Hidden)}.onClick(()=>{this.goodsIndex = index})})}}.width('100%').scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).padding({top:5,right:12})}}
@Local goods:GoodsClass[] = [{name:'旅游鞋',price:'120',image:$r('app.media.goods1')},{name:'京巴狗',price:'340',image:$r('app.media.goods2')},{name:'旅游鞋',price:'120',image:$r('app.media.goods1')},{name:'京巴狗',price:'340',image:$r('app.media.goods2')},{name:'旅游鞋',price:'120',image:$r('app.media.goods1')},{name:'京巴狗',price:'340',image:$r('app.media.goods2')}]ListItem(){Grid(){ForEach(this.goods,(item:GoodsClass,index)=>{GridItem(){Column(){Image(item.image).width('100%').height(124)Text(item.name).fontColor(Color.Black).fontSize(14).margin({top:5})Text('¥' + item.price).fontColor(Color.Gray).fontSize(13).margin({top:5})}.alignItems(HorizontalAlign.Start)}})}.columnsTemplate('1fr 1fr').rowsGap(10).columnsGap(10).maxCount(2).margin({top:13})}
分类页
@Local typeList:string[] = ['服饰','书籍','宠物','电子','家具','居家','电器','消耗品','服饰']@Local typeIndex:number = 0@Local typeSubList:TypeClass[] = [{title:'短裤套装',image:$r('app.media.type_1')},{title:'短裤套装',image:$r('app.media.type_2')},{title:'短裤套装',image:$r('app.media.type_3')},{title:'短裤套装',image:$r('app.media.type_4')},{title:'短裤套装',image:$r('app.media.type_1')},{title:'短裤套装',image:$r('app.media.type_2')},]@Builder GroupTitle(title:string){Text(title).fontColor(Color.Black).fontSize(17).fontWeight(FontWeight.Bold).padding({left:13,top:15,bottom:10})}build() {NavDestination(){Flex({direction:FlexDirection.Row}){List(){ForEach(this.typeList,(item:string,index)=>{ListItem(){Stack({alignContent:Alignment.Start}){if(this.typeIndex == index){Row(){}.width(5).height(30).borderRadius(2.5).backgroundColor('#FADA52')}Row(){Text(item).fontColor(this.typeIndex == index?Color.Black:'#666666').fontSize(this.typeIndex == index?16:14).fontWeight(this.typeIndex == index?FontWeight.Bold:FontWeight.Regular)}.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).height(50).width('100%').onClick(()=>{this.typeIndex = index})}}})}.width(86).height('100%').backgroundColor('#e3e3e3')List(){ListItemGroup({header:this.GroupTitle('夏季套装')}){ListItem(){Grid(){ForEach(this.typeSubList,(item:TypeClass,index)=>{GridItem(){Column({space:6}){Image(item.image).width(65).height(65)Text(item.title).fontColor('#666666').fontSize(14)}}})}.width('100%').columnsTemplate('1fr 1fr 1fr').rowsGap(10).columnsGap(10)}}ListItemGroup({header:this.GroupTitle('夏季套装')}){ListItem(){Grid(){ForEach(this.typeSubList,(item:TypeClass,index)=>{GridItem(){Column({space:6}){Image(item.image).width(65).height(65)Text(item.title).fontColor('#666666').fontSize(14)}}})}.width('100%').columnsTemplate('1fr 1fr 1fr').rowsGap(10).columnsGap(10)}}}.height('100%').width('100%')}.width('100%').height('100%')}.title('商品分类')}
