黑马健康APP实现

一、首页UI设计

设计的最终目标如下图：

如同，界面底部是一个导航栏，当我们选择导航栏中的选项时，上面的界面将会发生变化。在这里我们可以使用Tabs组件。

Tabs组件可以实现页面内视图内容快速切换，包含TabBar（导航条部分）和TabContent（导航条上面部分）两部分。

具体实现代码可以参考：

实现页面如下，当点击标题一时会出现内容一，当点击标题二时会切换为内容二。此时，导航条的位置在页面上方，和我们要实现的页面导航条的位置不同。

问题一：怎样控制导航条的位置

要控制导航条我们可以通过两种方法来实现：

1.通过Tabs中的属性 barPosition 来调整导航条的位置，有End 和Start两种。

2.通过样式属性 .vertical() 来控制导航条的布局，若是false 导航条是水平布局，反之，为垂直布局。

问题二：怎样实现导航条中的每个选项都是上面是图片下面是文字

默认情况下，tabBar样式就是一个纯文本，想要加图标需要自己定义一个函数，在函数中定义自己想要的样式。

现在，由于我们使用的是自定义的样式，当我们选中一个标题，标题不会再向上图一样变蓝了。定义一个状态变量currentIndex记录当前切换的标题，当切换标题时触发.onChange，得到当前切换到脚标。同时，判断每一个脚标是否是切换到的那个，若是为蓝色，不是为灰色。

根据上述内容，我们可以完成主页面的一个总体框架。

二、饮食记录UI设计

这是一个列式布局，具体样式分布如图。

在这一页面，当我们点击日期时会弹出一个日期的选择器，当我们选择一个日期将会显示该日期对应的记录。这里需要一个新的组件DatePicker来实现。

先完成大体框架，每一个部分分别创建并应用组件来完成。

1、日期选择器，用于根据指定日期范围创建日期滑动选择器。

DatePicker(options?:{start?:Date,end?:Date,selected?:Date})

 

参数:

参数名	参数类型	必填	参数描述
start	Date	否	指定选择器的起始日期。 默认值：Date('1970-1-1')
end	Date	否	指定选择器的结束日期。 默认值：Date('2100-12-31')
selected	Date	否	设置选中项的日期。 默认值：当前系统日期

属性

名称	参数类型	描述
lunar	boolean	日期是否显示农历。 - true：展示农历。 - false：不展示农历。 默认值：falsshijian

事件

名称	功能描述
onChange(callback: (value: DatePickerResult) => void)	选择日期时触发该事件。

DatePickerResult对象说明

名称	参数类型	描述
year	number	选中日期的年。
month	number	选中日期的月(0~11)，0表示1月，11表示12月。
day	number	选中日期的日。

2、Swiper

滑块视图容器，提供子组件滑动轮播显示的能力。

Swiper(controller?: SwiperController)

参数

参数名	参数类型	必填	参数描述
controller	SwiperController	否	给组件绑定一个控制器，用来控制组件翻页。

Swiper(){
        Text('hello')
          .width('90%')
          .height(160)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('wolr')
          .width('90%')
          .height(160)
          .textAlign(TextAlign.Center)
          .fontSize(30)

      }
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.DEFAULT_18)
      .indicatorStyle({selectedColor:$r('app.color.primary_color')})

3、进度条

Stack() {
  //进度条
  Progress({
    value: value,
    total: recommend,
    type: ProgressType.Ring
  })
    .width(90)
    .style({ strokeWidth: CommonConstants.DEFAULT_6 })
    .color(color)
}