HarmonyOS 鸿蒙Next自然壁纸实战教程-分类页面

07-自然壁纸实战教程-分类页面

前言

分类页面提供到功能比较简洁，提供了基本的搜索、分类功能。我们先上布局结构上来划分模块：

1. 顶部搜索框
2. 分类标签
3. 分类卡片网格
4. 跳转到分类列表

顶部搜索框

顶部搜索框正常显示，如果切换到显示搜索结果的时候，便会隐藏。

TextInput({
  placeholder: '搜索更多...',
  text: $$this.categoryViewModel.text
})
  .width('75%')
  .height(40)
  .backgroundColor('#F5F5F5')
  .placeholderColor('#999999')
  .borderRadius(20)
  .onSubmit(async () => {
    this.categoryViewModel.onSubmit()
  })
  .visibility(this.categoryViewModel.currentTab == -1 ? Visibility.Visible : Visibility.None)

分类标签

分类标签的结构在首页时也编写过一次了

Scroll() {
  Row() {
    ForEach(LocalData.CategoryData, (item: ICategory, index: number) => {
      Text(item.text)
        .fontSize(16)
        .fontWeight(this.categoryViewModel.currentTab === index ? FontWeight.Bold : FontWeight.Normal)
        .fontColor($r('sys.color.comp_background_list_card'))
        .backgroundColor(this.categoryViewModel.currentTab === index ? '#2196F3' : '#ffb8b3b3')
        .borderRadius(20)
        .padding({
          left: 16,
          right: 16,
          top: 8,
          bottom: 8
        })
        .margin({ right: 8 })
        .onClick(() => {
          if (this.categoryViewModel.currentTab !== index) {
            this.categoryViewModel.currentTab = index;
          }
        })
    }, (item: ICategory, index: number) => item.id.toString() + Date.now())
  }
  .width('auto')
  .padding({ left: 8, right: 8 })
}
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.width('100%')
.height(50)

纵向的分类列表

这里使用了网格 Grid来实现

// 分类卡片网格
Grid() {
  ForEach(LocalData.CategoryData, (item: ICategory) => {
    GridItem() {
      this.CategoryCardBuilder(item)
    }
    .onClick(() => {
      // 设置当前选中的分类标签
      // 查找item在categories数组中的实际索引，而不是使用item.id
      const index = LocalData.CategoryData.findIndex(category => category.id === item.id);
      this.categoryViewModel.currentTab = index !== -1 ? index : 0;
    })
  })
}
.columnsTemplate('1fr 1fr')
.columnsGap(16)
.rowsGap(16)
.padding(16)
.scrollBar(BarState.Off)
.layoutWeight(1)
.margin({ bottom: 50 })
.visibility(this.categoryViewModel.currentTab == -1 ? Visibility.Visible : Visibility.None)

当点击不同的分类时，页面会发现变化

搜索结果

这里业务流程主要是：

1. 输入框中输入内容，如：超人
2. 触发请求，获取最新的数据
3. 渲染页面

.onSubmit(async () => {
  this.categoryViewModel.onSubmit()
})

import { SensitiveFilter } from "../utils/sensitiveFilter";
import { promptAction } from "@kit.ArkUI";
import { NavigationUtils } from "../utils/NavigationUtils";
import { NavigationConst } from "../const/NavigationConst";

/**
 * 分类viewmodel
 */
@ObservedV2
export class CategoryViewModel {
  @Trace
  currentTab: number = -1
  @Trace
  // 搜索字段
  text: string = ''

  /**
   * 验证搜索内容
   * @returns boolean
   */
  async validateSearch(): Promise<boolean> {
    if (await SensitiveFilter.hasSensitiveWords(this.text)) {
      promptAction.showToast({
        message: '搜索内容包含敏感词，请重新输入',
        duration: 2000
      });
      return false;
    }
    return true;
  }

  /**
   * 进行分类搜索
   */
  async onSubmit() {
    if (await this.validateSearch()) {
      NavigationUtils.getInstance().navigatePush(NavigationConst.Home_View_Wallpaper, this.text)
      this.text = ''
    }
  }
}

如何获取资料

获取资料的途径，可以关注我们 官网的公众号 青蓝逐码 ，输入 项目名称 《自然壁纸》 即可获得以上资料。

为什么需要关注公众号

如果我们的资源，网友连关注公众号的欲望都没有，说明我们的这个资料和资源也没有什么太大价值，那么不要也罢，可以让用户付出一些成本的，才是能证明有真正价值的东西。

关于我们

关于青蓝逐码组织

如果你兴趣想要了解更多的鸿蒙应用开发细节和最新资讯，甚至你想要做出一款属于自己的应用！欢迎在评论区留言或者私信或者看我个人信息，可以加入技术交流群。