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()
      })

this.categoryViewModel

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 = ''
    }
  }
}

如何获取资料

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

关于我们

关于青蓝逐码组织

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