零基础开始学习鸿蒙开发-Tabs的使用_鸿蒙tabs组件使用

1、Tabs是ArkTs里面的一个导航栏组件，我们做app开发，在做首页的时候，通常需要做导航栏来进行切换到不同模块。

2.下面对Tabs使用的简单介绍。

代码示例:
   
//barPosition属性通常用来控制整个导航栏显示的位置，
//BarPosition.End表示导航栏显示在底端，而
//BarPosition.Start 表示显示在顶端
Tabs({barPosition:BarPosition.End}){
 
}

3.下面简单介绍一下导航栏的子组件，即导航栏显示的名称，即tabBar('首页')，它不能单独使用，需要跟在导航内容组件即TabContent后面进行链式调用。

代码示例:
 
 TabContent(){
        Text('这是设置内容').fontSize(18)
      }.tabBar('设置');

4.以下是我自定义的Tabs导航栏的使用。

@Entry
@Component
struct tabsPage{
  build(){
    Tabs({barPosition:BarPosition.End}){
      TabContent(){
        Text('这是首页内容').fontSize(18)
      }.tabBar('首页');
 
      TabContent(){
        Text('这是个人中心内容').fontSize(18)
      }.tabBar('个人中心');
      TabContent(){
        Text('这是设置内容').fontSize(18)
      }.tabBar('设置');
    }
 
 
  }
}

5.具体效果如下图