健康生活APP— app首页1

一、页面布局

1、页面布局：

• Tabs组件可以实现页面内视图内容快速切换，包括TabBar和TabContent两部分。

2.  Tabs组件相关知识：

Tabs({ barPosition: Barposition.End }) {
      TabContent() {
        Text('内容1')
      }
      .tabBar('记录')

      TabContent() {
        Text('内容1')
      }
      .tabBar('记录')
     
      TabContent() {
        Text('内容1')
      }
      .tabBar('记录'
}
   

 

二、页面创建的主要步骤：

1. 创建三个tabBar标签, 

TabContent() {
  Text('内容1') 
} 
.tabBar('记录')

点击三个标签可以来回切换页面内容。

2. 改变标签位置：标签默认在页面顶部，我们可以使Barposition枚举中的End使标签位于页面底部。

3. 在TabBar上添加图片：因为没有办法使tabBar独立于tabContent外部,因此我们创建了一个builder函数TabBuilder。

首先，声明并初始化了一个State变量currentIndex,在标签中，图片和文本也就是标题是纵向排列，所以他们每一个独立的标签都应该放在一个独立的Column容器中。

其次，根据演示效果，当鼠标点击到这个标签时，这个标签会变成蓝色，因此我们需要做一个判断，如果说当前点击的标签的坐标和该标签的坐标相同时，该标签就会显示蓝色，否则仍然是灰色。

最后，通过justifyContent(FlexAlign.Center)调整标签的布局，并在Tabs组件中调用TabBuilder方法。

三、注意:

定义设置图片颜色属性时需要使用fillColor属性，因为该项目中所提供的图片都是svg图片。

四、可能遇到的问题和解决方法

问题：

 

方法:注意区分大小写，前者是我们自己定义的变量,后者的是鸿蒙系统中自带的方法。