• 49.HarmonyOS鸿蒙系统 App(ArkUI)Tab导航组件的使用

    HarmonyOS鸿蒙系统 App(ArkUI)Tab导航组件的使用

    图片显示

    Row()
{
  Image($r('app.media.leaf')).height(100).width(100)
  Image($r('app.media.icon')).height(100).width(100)
}

     

    左侧导航 

     

    1. import prompt from '@ohos.prompt';
    2. import promptAction from '@ohos.promptAction';
    3. @Entry
    4. @Component
    5. struct Index {
    6.   @State message: string = 'Hello World'
    7.   @State handlePopup: boolean = false
    8.   build() {
    9.    // Tabs() { //默认顶部导航
    10.      // Tabs({ barPosition: BarPosition.End }) { //设置底部导航
    11.     Tabs({ barPosition: BarPosition.Start }) { //设置顶部部导航
    12.       TabContent() {
    13.         Column()
    14.         {
    15.  
    16.           Row()
    17.           {
    18.             Image($r('app.media.leaf')).height(100).width(100)
    19.             Image($r('app.media.icon')).height(100).width(100)
    20.           }
    21.           Row(){
    22.             Text('工号:')
    23.             TextInput({text:'tintel10699487'}).backgroundColor(Color.Yellow)
    24.  
    25.           }
    26.           Row(){
    27.             Button('确定')
    28.  
    29.           }
    30.           Row(){
    31.             Text('首页的内容').fontSize(30)
    32.             Button('查看')
    33.           }
    34.           Row(){
    35.             Text('首页的内容2').fontSize(30)
    36.             Button('查看2')
    37.           }
    38.         }
    39.  
    40.       }
    41.       .tabBar('首页').backgroundColor(Color.Green)
    42.  
    43.       TabContent() {
    44.         Column()
    45.         {
    46.           Row()
    47.           {
    48.             Text('这里是推荐的内容').fontSize(30)
    49.           }
    50.           Row()
    51.           {
    52.             Text('这里是推荐的内容2').fontSize(30)
    53.           }
    54.           Row()
    55.           {
    56.             Text('这里是推荐的内容3').fontSize(30)
    57.           }
    58.           Row()
    59.           {
    60.             Text('这里是推荐的内容4').fontSize(30)
    61.           }
    62.           Row()
    63.           {
    64.             Text('这里是推荐的内容5').fontSize(30)
    65.           }
    66.         }
    67.  
    68.  
    69.       }
    70.       .tabBar('推荐')
    71.       .backgroundColor(Color.Yellow)
    72.  
    73.       TabContent() {
    74.         Text('发现的内容').fontSize(30)
    75.  
    76.       }
    77.       .tabBar('发现')
    78.  
    79.       TabContent() {
    80.         Column(){
    81.           Row()
    82.           {
    83.             Text('姓名:').fontSize(30).fontColor(Color.White)
    84.             TextInput({text:"书书航"}).fontSize(30).fontColor(Color.Green)
    85.           }
    86.           Row()
    87.           {
    88.             Text('职业:').fontSize(30).fontColor(Color.White)
    89.             TextInput({text:"工程师"}).fontSize(30).fontColor(Color.Green)
    90.           }
    91.           Row()
    92.           {
    93.             Text('爱好:').fontSize(30).fontColor(Color.White)
    94.             TextInput({text:"音乐"}).fontSize(30).fontColor(Color.Green)
    95.           }
    96.           Row()
    97.           {
    98.             Text('户籍:').fontSize(30).fontColor(Color.White)
    99.             TextInput({text:"CHN"}).fontSize(30).fontColor(Color.Green)
    100.           }
    101.           Row()
    102.           {
    103.             Text('地区:').fontSize(30).fontColor(Color.White)
    104.             TextInput({text:"SHH"}).fontSize(30).fontColor(Color.Green)
    105.           }
    106.           Row()
    107.           {
    108.             Button('编辑').fontSize(30).fontColor(Color.White)
    109.             Button('确认').fontSize(30).fontColor(Color.White)
    110.           }
    111.         }
    112.  
    113.  
    114.       }
    115.       .tabBar("我的")
    116.         .backgroundColor(Color.Blue)
    117.  
    118.     }.vertical(true)
    119.   }
    120. }

     

    Tabs组件的页面的组成包含了两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部的导航、侧边的导航，其导航栏分别位于底部、顶部和侧边。

    图1 Tabs组件布局示意图

    说明

    • TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
    • TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。

    Tabs使用花括号包裹TabContent，如图2，其中TabContent显示相应的内容页。

    图2 Tabs与TabContent使用

    每一个TabContent对应的内容需要有一个页签，可以通过TabContent的tabBar属性进行配置。在如下TabContent组件上设置属性tabBar，可以设置其对应页签中的内容，tabBar作为内容的页签。

     

    1. TabContent() {
    2. Text('首页的内容').fontSize(30)
    3. }
    4. .tabBar('首页')
     

    设置多个内容时，需在Tabs内按照顺序放置。
     

     

    1. Tabs() {
    2. TabContent() {
    3. Text('首页的内容').fontSize(30)
    4. }
    5. .tabBar('首页')
    7. TabContent() {
    8. Text('推荐的内容').fontSize(30)
    9. }
    10. .tabBar('推荐')
    12. TabContent() {
    13. Text('发现的内容').fontSize(30)
    14. }
    15. .tabBar('发现')
    17. TabContent() {
    18. Text('我的内容').fontSize(30)
    19. }
    20. .tabBar("我的")
    21. }
     

     
     

    顶部导航：
     

    设置：Tabs({ barPosition: BarPosition.Start }) { //设置顶部部导航
     

    设置：}.vertical(false)
     

     

    1. import prompt from '@ohos.prompt';
    2. import promptAction from '@ohos.promptAction';
    3. @Entry
    4. @Component
    5. struct Index {
    6.   @State message: string = 'Hello World'
    7.   @State handlePopup: boolean = false
    8.   build() {
    9.    // Tabs() { //默认顶部导航
    10.      // Tabs({ barPosition: BarPosition.End }) { //设置底部导航
    11.     Tabs({ barPosition: BarPosition.Start }) { //设置顶部部导航
    12.       TabContent() {
    13.         Column()
    14.         {
    15.  
    16.           Row()
    17.           {
    18.             Image($r('app.media.leaf')).height(100).width(100)
    19.             Image($r('app.media.icon')).height(100).width(100)
    20.           }
    21.           Row(){
    22.             Text('工号:')
    23.             TextInput({text:'tintel10699487'}).backgroundColor(Color.Yellow)
    24.  
    25.           }
    26.           Row(){
    27.             Button('确定')
    28.  
    29.           }
    30.           Row(){
    31.             Text('首页的内容').fontSize(30)
    32.             Button('查看')
    33.           }
    34.           Row(){
    35.             Text('首页的内容2').fontSize(30)
    36.             Button('查看2')
    37.           }
    38.         }
    39.  
    40.       }
    41.       .tabBar('首页').backgroundColor(Color.Green)
    42.  
    43.       TabContent() {
    44.         Column()
    45.         {
    46.           Row()
    47.           {
    48.             Text('这里是推荐的内容').fontSize(30)
    49.           }
    50.           Row()
    51.           {
    52.             Text('这里是推荐的内容2').fontSize(30)
    53.           }
    54.           Row()
    55.           {
    56.             Text('这里是推荐的内容3').fontSize(30)
    57.           }
    58.           Row()
    59.           {
    60.             Text('这里是推荐的内容4').fontSize(30)
    61.           }
    62.           Row()
    63.           {
    64.             Text('这里是推荐的内容5').fontSize(30)
    65.           }
    66.         }
    67.  
    68.  
    69.       }
    70.       .tabBar('推荐')
    71.       .backgroundColor(Color.Yellow)
    72.  
    73.       TabContent() {
    74.         Text('发现的内容').fontSize(30)
    75.  
    76.       }
    77.       .tabBar('发现')
    78.  
    79.       TabContent() {
    80.         Column(){
    81.           Row()
    82.           {
    83.             Text('姓名:').fontSize(30).fontColor(Color.White)
    84.             TextInput({text:"书书航"}).fontSize(30).fontColor(Color.Green)
    85.           }
    86.           Row()
    87.           {
    88.             Text('职业:').fontSize(30).fontColor(Color.White)
    89.             TextInput({text:"工程师"}).fontSize(30).fontColor(Color.Green)
    90.           }
    91.           Row()
    92.           {
    93.             Text('爱好:').fontSize(30).fontColor(Color.White)
    94.             TextInput({text:"音乐"}).fontSize(30).fontColor(Color.Green)
    95.           }
    96.           Row()
    97.           {
    98.             Text('户籍:').fontSize(30).fontColor(Color.White)
    99.             TextInput({text:"CHN"}).fontSize(30).fontColor(Color.Green)
    100.           }
    101.           Row()
    102.           {
    103.             Text('地区:').fontSize(30).fontColor(Color.White)
    104.             TextInput({text:"SHH"}).fontSize(30).fontColor(Color.Green)
    105.           }
    106.           Row()
    107.           {
    108.             Button('编辑').fontSize(30).fontColor(Color.White)
    109.             Button('确认').fontSize(30).fontColor(Color.White)
    110.           }
    111.         }
    112.  
    113.  
    114.       }
    115.       .tabBar("我的")
    116.         .backgroundColor(Color.Blue)
    117.  
    118.     }.vertical(false)
    119.   }
    120. }
     

     
     

     
     

    底部导航：
     

    设置：Tabs({ barPosition: BarPosition.End}) { //设置底部导航
     

    设置：}.vertical(false)
     

     
     

     
     

    1. import prompt from '@ohos.prompt';
    2. import promptAction from '@ohos.promptAction';
    3. @Entry
    4. @Component
    5. struct Index {
    6.   @State message: string = 'Hello World'
    7.   @State handlePopup: boolean = false
    8.   build() {
    9.    // Tabs() { //默认顶部导航
    10.       Tabs({ barPosition: BarPosition.End }) { //设置底部导航
    11.     //Tabs({ barPosition: BarPosition.Start }) { //设置顶部部导航
    12.       TabContent() {
    13.         Column()
    14.         {
    15.  
    16.           Row()
    17.           {
    18.             Image($r('app.media.leaf')).height(100).width(100)
    19.             Image($r('app.media.icon')).height(100).width(100)
    20.           }
    21.           Row(){
    22.             Text('工号:')
    23.             TextInput({text:'tintel10699487'}).backgroundColor(Color.Yellow)
    24.  
    25.           }
    26.           Row(){
    27.             Button('确定')
    28.  
    29.           }
    30.           Row(){
    31.             Text('首页的内容').fontSize(30)
    32.             Button('查看')
    33.           }
    34.           Row(){
    35.             Text('首页的内容2').fontSize(30)
    36.             Button('查看2')
    37.           }
    38.         }
    39.  
    40.       }
    41.       .tabBar('首页').backgroundColor(Color.Green)
    42.  
    43.       TabContent() {
    44.         Column()
    45.         {
    46.           Row()
    47.           {
    48.             Text('这里是推荐的内容').fontSize(30)
    49.           }
    50.           Row()
    51.           {
    52.             Text('这里是推荐的内容2').fontSize(30)
    53.           }
    54.           Row()
    55.           {
    56.             Text('这里是推荐的内容3').fontSize(30)
    57.           }
    58.           Row()
    59.           {
    60.             Text('这里是推荐的内容4').fontSize(30)
    61.           }
    62.           Row()
    63.           {
    64.             Text('这里是推荐的内容5').fontSize(30)
    65.           }
    66.         }
    67.  
    68.  
    69.       }
    70.       .tabBar('推荐')
    71.       .backgroundColor(Color.Yellow)
    72.  
    73.       TabContent() {
    74.         Text('发现的内容').fontSize(30)
    75.  
    76.       }
    77.       .tabBar('发现')
    78.  
    79.       TabContent() {
    80.         Column(){
    81.           Row()
    82.           {
    83.             Text('姓名:').fontSize(30).fontColor(Color.White)
    84.             TextInput({text:"书书航"}).fontSize(30).fontColor(Color.Green)
    85.           }
    86.           Row()
    87.           {
    88.             Text('职业:').fontSize(30).fontColor(Color.White)
    89.             TextInput({text:"工程师"}).fontSize(30).fontColor(Color.Green)
    90.           }
    91.           Row()
    92.           {
    93.             Text('爱好:').fontSize(30).fontColor(Color.White)
    94.             TextInput({text:"音乐"}).fontSize(30).fontColor(Color.Green)
    95.           }
    96.           Row()
    97.           {
    98.             Text('户籍:').fontSize(30).fontColor(Color.White)
    99.             TextInput({text:"CHN"}).fontSize(30).fontColor(Color.Green)
    100.           }
    101.           Row()
    102.           {
    103.             Text('地区:').fontSize(30).fontColor(Color.White)
    104.             TextInput({text:"SHH"}).fontSize(30).fontColor(Color.Green)
    105.           }
    106.           Row()
    107.           {
    108.             Button('编辑').fontSize(30).fontColor(Color.White)
    109.             Button('确认').fontSize(30).fontColor(Color.White)
    110.           }
    111.         }
    112.  
    113.  
    114.       }
    115.       .tabBar("我的")
    116.         .backgroundColor(Color.Blue)
    117.  
    118.     }.vertical(false)
    119.   }
    120. }
     

     
    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
Yolo v8 目标识别 单目测距 速度检测                            
    
Kubecost - Kubernetes 开支监控和管理                            
    
gitlab没有push权限，重设账号密码仍然不行，问题解决                            
    
探索React Router:实现动态二级路由                            
    
PAT 甲级 A1072 Gas Station                            
    
基于 ceph-deploy 部署 Ceph 集群 超详细                            
    
Python：b站多个视频爬取下载                            
    
Git从入门到起飞(详细)                            
    
【前端优化 & Vue项目优化】 如何避免浏览器卡顿，实现性能优化cdn？                            
    
NodeJS 5分钟 连接 Redis 读写操作                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/txwtech/article/details/137891451
                
    •