开发鸿蒙项目黑马健康APP系列项目

一、工作主要介绍

今天的工作重点在于两个关键任务：一是精心设计应用首页的页面布局，使其既符合美学标准，又满足用户的实际使用需求；二是对应用首页顶部的搜索栏进行功能设计和实现，以增强用户查找信息的便捷性和效率。

二、运行效果及主要设计思路的介绍

首先来向大家展示一下我所做的页面的最终效果图吧！

初始化的页面构思布局如下图所示：

 总体上，我的设计方案是利用一个主列容器（Column）来嵌套三个行容器（Row），以此来创建三个可选项的滑动页面。我使用了一种新的组件——Tab，这种组件类似于容器，它负责确定首页导航栏与主体页面之间的布局关系。同时，从上图中可以观察到，首页顶部的搜索栏被划分为两个功能区：一个是用于搜索的搜索框（search bar），另一个是邮件图标。

三、设计过程中遇到的一些问题

关于页面布局的Tab组件:

这是一种全新的组件类型，它提供了两种基本的布局选项：一种是将导航栏置于顶部，主体内容置于底部；另一种则是将主体内容置于顶部，导航栏置于底部。起初，我对于如何在APPY中实现导航栏在底部、主题页面在顶部的布局感到困惑。但通过研究API文档和教学视频，我得知使用Tab组件可以轻松实现。Tab组件的导航栏默认只显示文本，但为了达到APP中带有图标和下标的导航栏效果，需要进行自定义设置。自定义导航栏需要指定三个关键参数：标题、图片和下标，从而确立页面的整体布局。

四、实验代码

首页页面布局：

import { CommonConstants } from '../common/constants/CommonConstants'
import RecordIndex from '../view/record/RecordIndex'
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
@Builder tabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){
  Column({space:CommonConstants.SPACE_8}){
    Image(image)
      .width(22)
    Text(title)
      .fontSize(14)
  }
}
  build() {
    Tabs({barPosition: BarPosition.End}) {
      TabContent(){
     RecordIndex()
      }
      .tabBar(this.tabBarBuilder($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))
      TabContent(){
        Text('发现页面')
      }
      .tabBar($r('app.string.tab_discover'))
      .tabBar(this.tabBarBuilder($r('app.string.tab_discover'),$r('app.media.discover'),1))
      TabContent(){
        Text('我的主页')
      }
      .tabBar(this.tabBarBuilder($r('app.string.tab_user'),$r('app.media.ic_user_portrait'),2))
    }
      .width('100%')
    .height('100%')
  }
}

头部搜索栏：

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct SearchHeader {
  build() {
    Row({space:CommonConstants.SPACE_6}){
      Search({placeholder:'搜索饮食或运动信息'})
        .textFont({size:18})
        .layoutWeight(1)
      Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:12}}){
        Image($r('app.media.ic_public_email'))
          .width (24)
      }

    }
    .width(CommonConstants.THOUSANDTH_940)
  }
}

五、小结

这次实验不仅让我对鸿蒙应用开发中的Tab和Badge两个重要组件有了更深入的了解，还让我学习到了大量有关页面布局的知识。这些新知识极大地丰富了我的专业技能，并为我带来了宝贵的学习经验。