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

一、工作主要介绍

今天的主要工作是对应用首页的页面布局进行设计以及对应用首页顶部的搜索栏部分的功能进行设计和实现。

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

还是先大家展示一下展示一下运行效果的截图：

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

总体上来讲我的构思是用一个总的column容器嵌套三个行容器，这里为了实现三个可选择的可滑动页面，使用了一种类似于容器的新组件Tab，让Tab组件来决定首页导航栏和主体页面的布局关系。同时，由上图也可以看出，首页顶部的搜索栏也是细分成了两个部分，一个是search搜索框，一个是邮件图标。

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

(1)关于页面布局的Tab组件：

这是一个全新的组件类型，它主要支持两种布局方式，一种是导航栏在上主体在下，另一种则反之，起初我并不知道应该如何实现APP当中导航栏在下，主题页面在上的那种布局，后来经过查阅API和相关视频可以了解到使用Tab组件即可。当然，该组件的导航栏有默认的形式，即纯字符串的那种，要想实现APP中的那种，就必须得自定义类型。自定义需要传三个参数，标题、图片、以及下标（从0开始），从而确定了整体的页面布局。

（2）关于如何确定用户选择哪个界面的问题:

仔细思考来看，自定义的导航栏存在一个这样的问题，我们无法使系统确定用户选择了那个界面，对此通过上网查阅，我了解到应该从图标的下标号入手。设置一个名为currentIndex的静态变量，此时通过在点击事件传递的用户所选的图标的下标号，将下标号传递给给图表填充颜色的选择函数处，此时编辑一个选择逻辑，若传递的下标号是所对应的下标号，则给所对应的图标涂成绿色，否则涂成灰色，由此解决上述问题。

（3）关于搜索栏中邮件图标的右上方如何显示未读消息提示的问题:

这里就要用到一个全新的容器化组件badge了，同样这个组件在使用时也需要传递三个参数，一个是未读消息的个数，一个是角标的位置，一个是角标的样式，只要传递好相应的参数，即可解决这个问题了。

四、最终实践代码

首页页面布局的:

import BreakpointType from '../common/bean/BreanpointType'
import BreakpointConstants from '../common/constants/BreakpointConstants'
import { CommonConstants } from '../common/constants/CommonConstants'
import BreakpointSystem from '../common/utils/BreakpointSystem'
import RecordIndex from '../view/record/RecordIndex'

@Entry
@Component
struct Index {
  @State currentIndex:number=  0
  @Builder TabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){
    Column({space:CommonConstants.SPACE_8}){
      Image(image)
        .width(22)
        .fillColor(this.currentIndex === index? $r('app.color.primary_color'):$r('app.color.gray'))
      Text(title)
        .fontSize(14)
        .fontColor(this.currentIndex === index? $r('app.color.primary_color'):$r('app.color.gray'))
    }
  }
  build(){
    Tabs({barPosition:BarPosition.End}){
      TabContent(){
        RecordIndex()
          .layoutWeight(1)
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))

      TabContent(){
        Text('发现页面')
      }
      .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%')
    .onChange(index => this.currentIndex = index)
  }

}

头部搜索栏的相关代码:

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组件,badge组件是一个容器化组件
      Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:12}}){
        Image($r('app.media.ic_public_email'))
          .width(24)
      }

    }
    .width(CommonConstants.THOUSANDTH_940)

  }
}

五、总结

通过此次实验，让我新认识了鸿蒙应用开发中两个十分重要的组件Tab和badge，同时也让我学习和了解到了许多其他页面布局的相关知识，让我受益匪浅。