基于鸿蒙操作———制作健康App(实现首页UI设计，顶部搜索)

君莫笑几人回

已于 2024-06-27 12:15:18 修改

阅读量579

点赞数 7

文章标签：鸿蒙 jquery html

于 2024-06-09 13:41:25 首次发布

本文链接：https://blog.csdn.net/qq_65992643/article/details/139560487

版权

前言

当前部分主要是完成首页的UI设计，学习并掌握Tabs组件的用法，可以完成页面内视图快速切换，包含TabBar和TabContent两部分

实现效果

项目代码

Tabs组件

代码

import { CommonConstants } from '../common/constants/CommonConstants'
@Entry
@Component
struct Index {
  @State currentIndex:number = 0


  // 自定义样式,title为String字符串类型
  @Builder TabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){
    Column({space:CommonConstants.SPACE_8}){
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index))
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }
  }

  // 对颜色代码进行封装
  selectColor(index:number){
     return this.currentIndex === index?$r('app.color.primary_color'):$r('app.color.gray')
  }


  build() {
    Tabs({barPosition:BarPosition.End}) {

      TabContent(){
        Text('饮食记录页面')
      }
      .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%')
    .vertical(false)
    .onChange(index => this.currentIndex = index)
  }
}

小结

(1)通过Tabs组件进行布局，三个值分别是文字title，图片image，角标index;

(2)因为在组件中的TabBar无法自行的设置样式，需要通过创建@Builder函数来定义样式，来实现图片样式的效果。

(3)在创建完样式并且进行应用后，为了判断此时所在界面，需要为下面设置颜色样式用来判断处于的是哪个界面，设置动态参数，利用角标（index）对参数进行“index=>this.动态参数 = index来获取此时所在界面”；

(4)最后通过设置函数selectColor改变图标的颜色，设置三目运算符判断是不是进行了转换然后进行改变颜色。

重点掌握

(1) vertical是不是水平布局，属于boolean值；

(2)Tabs({barPostition:BarPosition.End})"BarPosition."后面可以是End，Start。End代表的是水平和垂直方向上面分别是下面和右边，Start代表的是水平布局和垂直布局的左面和上面，两者相互结合进行判断)。

疑惑解决

1.如何来定义TabBar的样式（加图标）?通过@Builder函数定义；

2.如何获取角标的值？通过添加动态参数currentIndex：number = 0进行记录，在上面的Tabs组件中定义.onChange()参数获取改变的值为多少

顶部搜索

代码

// 首页Tab
TabContent(){
        RecordIndex()
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))

// 创建单独顶部组件

import SearchHeader from './SearchHeader'
@Component
export default struct RecordIndex {
  // export default是为了进行默认导出组件，如果不加无法进行组件的导出
  build() {
    Column(){
      // 1.头部搜索栏
      SearchHeader()
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.index_page_background'))

  }
}


// 创建顶部组件对应的工具组件

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