零基础开始学习鸿蒙开发-Tab导航栏的学习_鸿蒙导航栏

目录

1.Tabs导航栏，一般来说，我们首页都需要设置导航栏，方便分类app的各个模块。

2.ArkTs的导航栏还算是比较简单的，下面对Tabs的使用进行简单的举例

4.下面是我自己自定义的简单的Tabs布局。

5.效果图如下

6.如果大家想学习更多的技术以及内容，可以到华为开发者官网去学习。

1.Tabs导航栏，一般来说，我们首页都需要设置导航栏，方便分类app的各个模块。

2.ArkTs的导航栏还算是比较简单的，下面对Tabs的使用进行简单的举例

代码示例:
//Tabs类似一个导航栏容器，里面可以放置很多个导航，类似于首页、个人中心等等导航模块。
//BarPosition一般表示导航栏显示的位置 ，一般有顶端和底端两种显示方式，
//即BarPosition.Start和BarPosition.End 默认是顶端显示。
 Tabs({barPosition:BarPosition.End}){
 
}
 

3.导航栏的显示，通常是通过tabBar来显示，如：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.效果图如下

6.如果大家想学习更多的技术以及内容，可以到华为开发者官网去学习。