鸿蒙应用开发从入门到入行 - 篇8:Tabs选项卡页签视图切换

鸿蒙应用开发从入门到入行

第八天 - Tabs选项卡

导读:在本篇文章里,您将掌握使用Tabs选项卡做栏目分类,这是未来应用开发中极为常用的组件

  • 首先说一声抱歉,比较忙很久没更新了。但放心吧,目前该忙的事已经忙完,后面会恢复更新频率。以及后续有计划出一套免费视频教程,敬请期待!

  • 本篇文章所用素材下载: media.zip

Tabs介绍

  • 你是否经常在移动端应用里见到如下菜单分类,例如下面两图
image.png
image.png
  • 像这样的不管是在上,还是在下的菜单分栏功能,在HarmonyOS应用开发中都是可以使用Tabs组件实现

  • 每当某个Tabs里的菜单切换后,页面内容也会跟着改变,如下图


    gif.gif
  • 也即:Tabs组件可以在一个页面内快速实现视图内容的切换

  • 具体怎样使用呢?我们接着往下看

Tabs - 组件基本使用

  • 首先,Tabs里面只能放 TabContent子组件(放其他组件会报错),有多少个TabContent,就意味着有多少个切换视图。
gif-3447925.gif
  • 如上图所示,这段代码里Tabs放了三个TabContent,因此有三个视图进行切换。但此时仅能实现左滑才能切换,根本没有显示出“导航栏”,所以一般情况下还会给TabContent设置tabBar属性,用来设置对应的导航栏

  • 如下代码,给每个TabContent都设置了tabBar属性

    @Entry
    @Component
    struct Index {
      build() {
        Tabs() {
          TabContent() {
            Text('1')
          }.tabBar('首页')
    
          TabContent() {
            Text('2')
          }.tabBar('联系人')
    
          TabContent() {
            Text('3')
          }.tabBar('我的')
        }
      }
    }
    
  • 此时效果如下


    image.png
  • 小结:

    1. Tabs里只能放TabContent
    2. TabContent有多少个就意味着有多少个视图切换
    3. TabContent配合tabBar属性,即可设置导航栏标题,tabBar传入字符串,字符串是什么,标题即为什么

修改导航栏位置到底部

  • 默认情况下,导航栏在页面上方,如果想把导航栏设置到页面底部显示,可以通过给Tabs传入参数barPosition来实现

  • 代码如下:

    Tabs({ barPosition: BarPosition.End }) {
      
      // .... 省略里面的TabContent代码
    }
    
  • 此时界面效果如下图

image.png
  • 如上代码所示:barPosition参数,需要传入BarPosition的枚举,这个枚举仅有两个值:Start与End,默认即为Start,代表在顶部,设置为End即为底部

修改导航栏位置到侧边

  • 那么是不是只有顶部、底部两种位置呢?其实不然,还可以设置左侧或右侧,这里需要用到Tabs的一个属性,即为:vertical

  • 这个属性代表:是否垂直摆放导航栏,那换句话说即为是否竖着放(也即侧边放),默认为false即水平摆放。

  • 我们试着把这个属性改为true,如下代码

    Tabs({ barPosition: BarPosition.Start }) {
        // 省略里面的TabContent代码
      }
      .vertical(true)
      .barWidth(80)
      .barBackgroundColor('#f00')
    
  • 效果如下图


    image.png
  • 代码解释:

    • 因为vertical属性设置为true,必然是在侧边摆放导航栏,但为什么是左边呢?因为Tabs的barPosition参数设置为Start(默认值),即为在左侧,所以如果barPosition设置为BarPosition.End,即为在右侧。
    • barWidth是设置导航条的宽度(侧边方向是设置宽度)或高度(上下方向是设置高度)
    • barBackgroundColor是设置导航条背景颜色,这里加背景色主要是为了让大家能看到我们设置的宽度生效了
  • 小结:
    • 如果Tabs不设置vertical或者vertical设置为false,导航栏方向都是上下摆放,至于是上还是下跟barPosition有关,Start为上,End为下
    • 如果Tabs设置了vertical为true,导航栏方向都是侧边摆放,至于是左还是右跟barPosition有关,Start为左,End为右

Tabs嵌套使用

  • 很多时候我们的App应用场景其实需要顶部、底部都有导航栏,即整个App分为“首页”、“发现”、“推荐”
    、“我的”四个部分,但是在“首页”里,又分为:关注、视频、游戏、数码、科技四个板块,如下图所示


    image.png
  • 这时候就需要嵌套导航栏(在首页这个视图里再套一个Tabs),代码如下

    Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          // 在首页这个视图里,又分为关注、视频、游戏、数码、科技四个切换分类
          Tabs() {
            TabContent() {
              Text('关注的内容')
            }.tabBar('关注')
    
            TabContent() {
              Text('视频的内容')
            }.tabBar('视频')
    
            TabContent() {
              Text('游戏的内容')
            }.tabBar('游戏')
    
            TabContent() {
              Text('数码的内容')
            }.tabBar('数码')
    
            TabContent() {
              Text('科技的内容')
            }.tabBar('科技')
          }
        }.tabBar('首页')
    
        TabContent() {
          Text('发现的内容')
        }.tabBar('发现')
    
        TabContent() {
          Text('推荐的内容')
        }.tabBar('推荐')
    
        TabContent() {
          Text('我的内容')
        }.tabBar('我的')
    }
    

限制导航栏滚动

  • 默认情况下所有的Tabs的导航都具备滚动的功能,但是当我们使用Tabs嵌套时,如上面的场景,会发现底部的导航栏有滚动,首页里嵌套的导航栏也有滚动。为了避免他们冲突,一般我们会让底部的大导航栏禁止滚动。

  • 如何禁止滚动呢?

    • 使用scrollable属性,设置为false即可
  • Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          // 在首页这个视图里,又分为关注、视频、游戏、数码、科技四个切换分类
          Tabs() {
            // 省略这个嵌套的代码
          }
        }.tabBar('首页')
    
        TabContent() {
          Text('发现的内容')
        }.tabBar('发现')
    
        TabContent() {
          Text('推荐的内容')
        }.tabBar('推荐')
    
        TabContent() {
          Text('我的内容')
        }.tabBar('我的')
    }
    .scrollable(false)
    

自定义导航栏

  • 我们很多应用的底部导航栏,其实一般除了标题文字外,还会附带图标,例如下图
image.png
  • 这时候需要我们使用@Builder装饰器自定义导航栏的布局后,再传递给tabBar

  • 如下代码

    tabBuilder(title: string, icon: ResourceStr) {
        Column({ space: 2 }) {
          Image(icon)
            .width(30)
          Text(title)
        }
        .width('100%')
        .height(50)
        .justifyContent(FlexAlign.Center)
    }
    
    • 这个Builder声明一个垂直布局的UI,上为图标,下为文字(标题),但此时这个Builder跟每个tabBar还没有任何关联,因此需要做调用绑定
  • 代码如下

    Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          // ...
        }.tabBar(this.tabBuilder('首页', $r('app.media.ic_public_home')))
    
        TabContent() {
          // ...
        }.tabBar(this.tabBuilder('信息', $r('app.media.ic_public_comments')))
    
        TabContent() {
          // ...
        }.tabBar(this.tabBuilder('相册', $r('app.media.ic_public_albums')))
    
        TabContent() {
          // ...
        }.tabBar(this.tabBuilder('我的', $r('app.media.ic_public_contacts')))
    }
    
  • 此时得到效果如下图


    image.png
  • 我们会发现,不管点击哪一个,都不会有高亮效果。这是因为使用自定义导航栏后,需要自行在Builder里根据当前选中下标来判断显示不同的图标和颜色

  • 综上所述,我们应该先声明一个状态变量,记录当前选中的索引

    @State currentIndex: number = 0 // 默认为0,代表默认让第一个导航高亮
    
  • 修改Builder,代码如下

    @Builder
    tabBuilder(title: string, icon: ResourceStr, selectIcon: ResourceStr, index: number) {
      Column({ space: 2 }) {
        Image(this.currentIndex === index ? selectIcon : icon)
          .width(30)
          .fillColor(this.currentIndex === index ? '#0094ff' : '#000')
        Text(title)
          .fontColor(this.currentIndex === index ? '#0094ff' : '#000')
      }
      .width('100%')
      .height(50)
      .justifyContent(FlexAlign.Center)
    }
    
  • 代码解释:

    • 首先参数上新增了selectIcon与index,分别代表选中时要显示的图片,以及当前的tabBar自身索引
    • 代码内根据我们记录的导航索引,与传入的当前tabBar自身索引做比较。相等就意味着当前tabBar被选中,所以让其使用选中的图片,以及设置选中的颜色。否则用默认的图片与颜色
  • 效果如下

image.png

切换指定页签

  • 此时我们发现,之前在不使用自定义导航栏时,默认的Tabs会实现切换逻辑,也即点谁谁高亮。但使用自定义导航栏后,发现点击导航栏没有切换高亮效果。

  • 原因:自定义导航栏是根据我们的自定义Builder来决定显示状态的,如果需要高亮随之改变,就需要把我们声明的记录索引的状态变量进行修改,也即上面声明的currentIndex。此时因为currentIndex一直是0,所以一直是第一个首页高亮。因此,我们需要页签改变时让currentIndex的值也跟着改变

  • 这是需要用到Tabs提供的onChange事件,监听索引变化,并将当前切换后的索引值赋值给currentIndex,代码如下

    Tabs({ barPosition: BarPosition.End }) {
        // 省略中间代码
      }
      .onChange(index => {
        this.currentIndex = index
      })
    
  • 以上利用onChange可以实现以外,其实在Next加入$$双向绑定后也能实现,做法是,只要将currentIndex与Tabs的index参数做双向绑定即可实现,代码如下

    Tabs({ barPosition: BarPosition.End, index: $$this.currentIndex }) {
       // 省略里面内容
    }
    
  • 使用双向绑定还有个好处是:如果将来需要用代码改变页签,只需要改currentIndex的值即可,例如:this.currentIndex = 2即会切换到页签索引为2的导航

总结

  • 今日主要讲解了Tabs的使用,Tabs是一种视图切换的组件。

  • 默认情况下,Tabs是在顶部显示,如果要改位置可以通过barPosition参数来修改

  • 如果需要展示在侧边,可以通过 vertical 属性设置为true来实现

  • 如果需要带图带标题的自定义导航栏,可以用@Builder进行封装并传入tabBar

课后练习

  • 判断题
    • 当设置vertical为true时,导航栏在右侧显示
    • 当Tabs的barPosition为End,vertical为false时,导航栏在右侧显示
  • 简单题
    • 请回答,直接设置Tabs的vertical为true,导航栏在哪显示?

预告:下一篇内容

  • 下一篇将做个鸿蒙官网的经典案例:新闻数据,即本页一开始的图如下,敬请期待


    image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容