鸿蒙期末大作业——甜点店铺APP（二）跳转页面的改进

一、跳转页面的继续改进

上一期我们实现了登录页面的渲染，这一期我们进行登录完成后跳转页面的进一步加工。

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。利用Tabs导航组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏。TabBar可以调用自定义构造函数，自定义导航栏。

在view目录下新建三个文件HomePage、ChiocePage和MinePage，分别用来表示首页、精选和我的等三个页面。

二、实验过程(文字描述)

我们登录成功后跳转到MainPage页面，该页面需要包含三个栏目——首页、精选以及我的，页面信息较多，需要将其分类，在该页面内实现试图内容的快速切换。所以在这里我使用了Tabs导航组件进行完善，它是一个可以容纳多个选项卡的容器组件。每个选项卡通常包含一个面板和一个标签，用户可以通过点击标签来切换面板。一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

首先我们创建新的文件夹view，在里面创建三个新的ets文件——HomePage.ets、ChoicePage.ets、MinePage.ets等三个文件。将我们需要用到的图片提前保存在meida目录下，接着分别在不同文件进行下一步不同页面的渲染。
在MainPage.ets中，我们首先引入Tabs组件，设置它在页面的位置——利用BarPosition.End并且设置vertical(false)属性会使导航页签栏在页面底部显示。利用animationDuration属性设置滑动动画时长。不设置时，点击切换页签无动画，滑动切换有动画；设置时，点击切换和滑动切换都有动画。
然后构造自定义函数TabBuilder，在TabContent对应tabBar属性中传入自定义函数组件，并传递相应的参数。首先，定义一个items数组，里面有三个参数—标题、未选中的图片以及选中状态的图片。给自定义构造函数TabBuilder传入三个参数：标题title、选中状态的图片iconSelected以及未选中的图片iconNormal。通过ForEach循环遍历对底部导航栏每一个组件的进行加载和渲染，在tabBar属性中传入对应的三个参数。
最后定义一个状态变量currentIndex，用来记录当前索引下标。给Tabs底部导航页签栏添加触发事件，当我点击导航页签栏的其他栏目，index值发生变化时，将点击的页面下标index赋值给currentIndex。再将该变量传入到自定义构造函数TabBuilder中和.tabBar属性中。然后在自定义构造函数TabBuilder中增加判断条件，运用三目运算，如果传入的索引值和当前索引相等，则加载选中状态的图片，否则加载未被选中状态的图片。

三、代码实现

MainPage.ets

import HomePage from '../view/HomePage'
import ChoicePage from '../view/ChoicePage'
import MinePage from '../view/MinePage'
@Entry
@Component
struct MainPage {
  @State message: string = '首页'
  private controller:TabsController = new TabsController()//Tabs组件的控制器，用于控制Tabs组件进行页签切换
  private items:Array<{title:string,iconSelected:Resource,iconNormal:Resource}> =[
    {title:'首页',iconSelected:$r('app.media.home_selected'),iconNormal:$r('app.media.home_normal')},
    {title:'精选',iconSelected:$r('app.media.choice_selected'),iconNormal:$r('app.media.choice_normal')},
    {title:'我的',iconSelected:$r('app.media.mine_selected'),iconNormal:$r('app.media.mine_normal')},
  ]
  @State currentIndex:number = 0;  //当前索引下标 0

  //@Builder 装饰器 自定义构建函数
  @Builder TabBuilder(title,iconSelected,iconNormal,index){
    Column(){
      Image(this.currentIndex==index?iconSelected:iconNormal)
        .width(25)
        .height(25)
      Text(title)
        .fontColor(this.currentIndex==index?Color.Green:Color.Grey)
        .fontSize(14)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
  }

  build() {
    Row() {
      //BarPosition.Start 左侧或顶部 vertical(true) true页签位于左侧;false页签位于顶部
      //BarPosition.End 右侧或底部 vertical(true) true页签位于右侧;false页签位于底部
      Tabs({barPosition:BarPosition.End}){
        ForEach(this.items,(item:{title:string,iconSelected:Resource,iconNormal:Resource},index:number)=>{
          TabContent(){
            //页签的内容
            Column(){
              //加载不同的组件
              if(index===0){  //三个等号代表全等
                HomePage()
              }else if(index===1){
                ChoicePage()
              }else{
                MinePage()
              }
            }

          }.tabBar(this.TabBuilder(item.title,item.iconSelected,item.iconNormal,index))//导航页签栏,调用自定义构造函数，自定义导航栏
        })

      }
      .vertical(false)
      .animationDuration(300)//设置动画效果
      .onChange((index:number)=>{
        this.currentIndex = index
      })

    }
      .width('100%')
  }

}

HomePage.ets

@Entry
@Component
 
struct Main{
  @State message:string = '首页'
 
  build(){
    Row(){
      Column(){
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

Choice.ets

@Entry
@Component
 
struct Main{
  @State message:string = '精选'
 
  build(){
    Row(){
      Column(){
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

Mine.ets

@Entry
@Component
 
struct Main{
  @State message:string = '我的'
 
  build(){
    Row(){
      Column(){
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

四、效果展示

这里忘了将文本修改成“我的”了，/(ㄒoㄒ)/~~

五、遇到的问题

1.在MainPage页面包含三个栏目，页面信息较多，需要将页面内容分类，如何在一个页面内快速实现试图内容的切换？

解决方案：使用Tabs导航组件，它是一个可以容纳多个选项卡的容器组件。每个选项卡通常包含一个面板和一个标签，用户可以通过点击标签来切换面板。一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

2.在导航栏点击不同栏目时，如何使页面加载不同的效果以及多元化的组件？若都写在首页会使页面过于庞大，如何改进？

解决方法：每个页面放在单独的模块，创建三个页面：分别为首页面、精选页面以及我的页面。创建新的文件夹view，在里面创建新的ets文件—HomePage.ets、ChoicePage.ets、MinePage.ets等三个文件。分别在不同文件再进行下一步的渲染。

3.底部导航栏怎么加载不同的图片效果？

解决方案：构建自定义构造函数TabBuilder，在TabContent对应tabBar属性中传入自定义函数组件，并传递相应的参数。首先，定义一个items数组，里面有三个参数—标题、未选中的图片以及选中状态的图片。给自定义构造函数TabBuilder传入三个参数：标题title、选中状态的图片iconSelected以及未选中的图片iconNormal。通过ForEach循环遍历对底部导航栏每一个组件的进行加载和渲染，在tabBar属性中传入对应的三个参数。

4.当我们点击底部导航栏的每个栏目时，如何使每个栏目由未选中的状态变为选中的状态？

解决方案：定义一个状态变量currentIndex，用来记录当前索引下标。给Tabs组件添加触发事件，当值发生变化时，将当前索引值赋值给currentIndex。再将该变量传入到自定义构造函数TabBuilder中和.tabBar属性中。然后在自定义构造函数TabBuilder中增加判断条件，运用三目运算，如果传入的索引值和当前索引相等，则加载选中状态的图片，否则加载未被选中状态的图片。

标签：ets,鸿蒙,自定义,index,APP,选中,跳转,组件,页面
From： https://blog.csdn.net/qq_74141710/article/details/139718213