HarmonyOS NEXT开发实战教程—搜索页

今天忙里偷闲，分享一个搜索页实现过程，先上效果图：

界面部分比较简单，大体分为导航栏、历史搜索、猜你想搜和热搜榜几个部分，历史搜索采用用户首选项进行存储数据。

导航栏部分相关代码如下：

Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,alignItems:ItemAlign.Center}){
    Image($r('app.media.back'))
    .width(30)
    .height(30)
    .objectFit(ImageFit.Contain)
    Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,alignItems:ItemAlign.Center}){
    TextInput({placeholder:'长款羽绒服',text:this.searchText})
        .width('100%')
        .placeholderColor(Color.Gray)
        .fontSize(14)
        .backgroundColor('rgb(226,226,226)')
        .enterKeyType(EnterKeyType.Search)
        .onChange((str)=>{
            this.searchText = str
        })
        .onSubmit(()=>{
            this.saveHistory(this.searchText)
            this.searchText = ''
        })
    Image($r('app.media.scan'))
    .width(22)
    .height(22)
    .margin({left:5})
    .constraintSize({minWidth:22})
    .objectFit(ImageFit.Contain)    

    Text('搜索')
    .width(60)
    .height(28)
    .backgroundColor(Color.Orange)
    .borderRadius(4)
    .fontColor(Color.White)
    .textAlign(TextAlign.Center)
    .fontSize(12)
    .margin({left:5})
}
.padding({left:5,right:5})
.width('100%')
.height(34)
.backgroundColor('rgb(226,226,226)')
.borderRadius(8)
.margin({left:5})}
.padding({left:10,right:10})
.width('100%')
.backgroundColor(Color.White).height(45)

历史搜索部分采用Flex布局实现：

Flex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap}){
    ForEach(this.hisList,(str:string,index)=>{
        Text(str)
            .fontColor('#4a4a4a')
            .fontSize(12)
            .padding({left:6,right:6,top:4,bottom:4})
            .borderWidth(1)
            .borderColor('rgb(216,216,216)')
            .borderStyle(BorderStyle.Solid)
            .margin({left:5,top:5})
            .textAlign(TextAlign.Center)
            .borderRadius(4)
})}

猜你想搜部分，同样使用Flex布局：

Flex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap}){
    ForEach(this.guessList,(str:string,index)=>{
        Text(str)
         .fontColor('#4a4a4a')
        .fontSize(15)
        .margin({top:6})
        .width('50%')
})}

热搜榜部分使用一个Scroll和一个Swiper实现联动效果：

Column(){
    Scroll(this.scrollController){
        Row({space:30}){
            ForEach(this.hotTitleList,(str:string,index)=>{
                Text(str)
                .fontSize(15)
                .fontColor(this.hotIndex == index?Color.Orange:Color.Gray)
                .fontWeight(this.hotIndex == index?FontWeight.Bold:FontWeight.Normal)
                .onClick(()=>{
                    this.hotIndex = index
                    this.swiperController.changeIndex(this.hotIndex,true)
                })
    })
    }
    .height(45)
    .alignItems(VerticalAlign.Center)  }
    .scrollable(ScrollDirection.Horizontal)
    .scrollBar(BarState.Off)  .width('100%')  

    Swiper(this.swiperController){
        ForEach(this.hotTitleList,(str:string,index)=>{
            Column(){
                ForEach(this.hotContentList,(str:string,index)=>{
                    Row(){
                        Row(){
                            Text((index+1).toString())
                                .fontSize(15)
                                .fontColor('#4a4a4a')
                                 .fontWeight(FontWeight.Bold)
                                 .width(40)
                                 .textAlign(TextAlign.Center)
                              Text(str)
                                   .fontSize(15)
                                  .fontColor('#4a4a4a')            }
                              Text('热度100万')
                                .fontSize(12)
                                .fontColor(Color.Gray)
        }
        .width('100%')
        .height(40)
        .justifyContent(FlexAlign.SpaceBetween)
        .alignItems(VerticalAlign.Center)
        .borderRadius(10)
        .margin({top:8})
        .linearGradient({            angle: 90,            colors: [[index<3?0xfff8f3:0xf9f9f9, 0.0], [index<4?0xfffbfa:0xfcfcfc, 0.4], [0xffffff, 1.0]]          })        })
}
.width('100%')
.alignItems(HorizontalAlign.Start)
 })  }
.vertical(false)
.indicator(false)
.loop(false)
.onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {    this.hotIndex = index
console.info("index: " + index)
console.info("current offset: " + extraInfo.currentOffset)
const xOffset: number = this.scrollController.currentOffset().xOffset;    this.scrollController.scrollTo({ xOffset: index*70, yOffset: 0 })
})}