logo
搜索
上传资源 我要提问 发布帖子

2023年12月 HarmonyOS教学课程 026-ArkUI组件（Tabs）

风晓
风晓 2024-01-09 14:30:28 22470 赞同 0 反对 0
分类： 资源 标签： 鸿蒙系统
2023年12月 HarmonyOS教学课程 026-ArkUI组件（Tabs）

🚀一、Tabs
Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。每个选项卡通常包含一个面板和一个标签，用户可以通过点击标签来切换面板。Tabs组件通常用于展示多个相关但又不需要同时展示的数据集合或功能集合，以提高页面的可维护性和可用性。

Tabs组件的主要功能包括：

切换选项卡：用户可以通过点击标签来切换显示面板。
激活状态：当前选中的标签会呈现激活状态，以便用户清楚地知道他们当前所在的选项卡。
自定义选项卡内容：用户可以通过自定义选项卡内容（例如图片、文本、图标等）来增强页面的可读性和可用性。
加载延迟：如果页面需要加载大量数据或内容，Tabs组件可以通过延迟加载未激活的面板来提升页面性能。
🔎1.基本布局

Tabs使用花括号包裹TabContent，每一个TabContent对应一个tabBar

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs() {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')

        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

 


🔎2.导航位置
🦋2.1 底部导航
BarPosition.End设置底部导航

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')

        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

 


🦋2.2 顶部导航
BarPosition.Start设置顶部导航

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start  }) {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')

        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

 


🦋2.3 侧边导航
实现侧边导航栏需要设置Tabs的属性vertical为true

vertical为false时，tabbar宽度会默认撑满屏幕的宽度，需要设置barWidth为合适值。

vertical为true时，tabbar的高度会默认实际内容高度，需要设置barHeight为合适值。

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start  }) {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')

        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }.vertical(true)
      .barWidth(100)
      .barHeight(200)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

 


🔎3.导航效果
🦋3.1 限制导航栏的滑动切换
在某些需要进行多级分类的页面上，如同时存在底部导航栏和顶部导航栏时，因为默认情况下导航栏都支持滑动切换，所以当底部导航栏的滑动效果与顶部导航栏出现冲突时，需要限制底部导航栏的滑动，以避免给用户带来不好的体验。

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent(){
          Column(){

            Tabs({ barPosition: BarPosition.Start  }) {
              TabContent() {
                Text('首页的内容').fontSize(30)
              }
              .tabBar('首页')

              TabContent() {
                Text('推荐的内容').fontSize(30)
              }
              .tabBar('推荐')

              TabContent() {
                Text('发现的内容').fontSize(30)
              }
              .tabBar('发现')

              TabContent() {
                Text('我的内容').fontSize(30)
              }
              .tabBar("我的")
            }.vertical(true)
            .barWidth(100)
            .barHeight(200)
          }
          .backgroundColor('#ff08a8f1')
          .width('100%')
        }
        .tabBar('首页')


        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
      .scrollable(false)

    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

 


🦋3.2 固定导航栏
Tabs的属性barMode是控制导航栏是否可以滚动，默认值为Fixed

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent(){
          Column(){

            Tabs({ barPosition: BarPosition.Start  }) {
              TabContent() {
                Text('首页的内容').fontSize(30)
              }
              .tabBar('首页')

              TabContent() {
                Text('推荐的内容').fontSize(30)
              }
              .tabBar('推荐')

              TabContent() {
                Text('发现的内容').fontSize(30)
              }
              .tabBar('发现')

              TabContent() {
                Text('我的内容').fontSize(30)
              }
              .tabBar("我的")
            }.vertical(true)
            .barWidth(100)
            .barHeight(200)
          }
          .backgroundColor('#ff08a8f1')
          .width('100%')
        }
        .tabBar('首页')


        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
      .scrollable(false)
      .barMode(BarMode.Fixed)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

 


🦋3.3 滚动导航栏
滚动导航栏需要设置Tabs组件的barMode属性，默认情况下其值为Fixed，表示为固定导航栏，设置为Scrollable即可设置为可滚动导航栏

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent(){
          Column(){

            Tabs({ barPosition: BarPosition.Start  }) {
              TabContent() {
                Text('首页的内容').fontSize(30)
              }
              .tabBar('首页')

              TabContent() {
                Text('推荐的内容').fontSize(30)
              }
              .tabBar('推荐')

              TabContent() {
                Text('发现的内容').fontSize(30)
              }
              .tabBar('发现')

              TabContent() {
                Text('我的内容').fontSize(30)
              }
              .tabBar("我的")

            }.vertical(true)
            .barWidth(100)
            .barHeight(200)
          }
          .backgroundColor('#ff08a8f1')
          .width('100%')
        }
        .tabBar('首页')


        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
      .scrollable(false)
      .barMode(BarMode.Scrollable)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}




🔎4.自定义导航栏
自定义导航栏是指在应用开发中，开发者使用自己定制的视图代替系统自带的导航栏，以实现更加自由、灵活和符合应用风格的导航栏。自定义导航栏可以包括各种 UI 元素，例如按钮、文本、图片、标签等，以满足不同应用的需求。自定义导航栏可以帮助应用创建独特的风格和品牌形象，提高用户体验和应用的可用性。

@Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
  Column() {
    Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
      .size({ width: 25, height: 25 })
    Text(title)
      .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
  }
  .width('100%')
  .height(50)
  .justifyContent(FlexAlign.Center)
}

TabContent() {
  Column(){
    Text('我的内容')  
  }
  .width('100%')
  .height('100%')
  .backgroundColor('#007DFF')
}
.tabBar(this.TabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))


🔎5.切换至指定页签
要想切换特定的标签页，需要使用TabsController。TabsController是Tabs组件的控制器，它用于控制Tabs组件进行标签页的切换。使用TabsController的changeIndex方法，可以实现跳转到指定索引值对应的标签页内容。

@Entry
@Component
struct NavigationExample {
  private tabsController : TabsController = new TabsController()
  @State currentIndex:number = 0;

  @Builder TabBuilder(title: string, targetIndex: number) {
    Column() {
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(this.currentIndex);
    })
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
        TabContent(){
          Text('首页')
        }.tabBar(this.TabBuilder('首页',0)).backgroundColor(Color.Black)

        TabContent(){
          Text('发现')
        }.tabBar(this.TabBuilder('发现',1)).backgroundColor(Color.Blue)

        TabContent(){
          Text('推荐')
        }.tabBar(this.TabBuilder('推荐',2)).backgroundColor(Color.Red)

        TabContent(){
          Text('我的')
        }
        .tabBar(this.TabBuilder('我的',3)).backgroundColor(Color.Pink)
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

 


🔎6.滑动切换导航栏
在不使用自定义导航栏的情况下，Tabs组件会默认实现tabBar与TabContent的切换联动。然而，一旦使用了自定义导航栏，就需要使用TabsController来实现点击页签与页面内容的联动。但使用TabsController无法实现滑动页面时，页面内容对应页签的联动。也就是说，当用户滑动屏幕切换页面内容时，页签栏无法同步切换至对应的页签，这可能会影响用户的体验。

@Entry
@Component
struct NavigationExample {
  private tabsController : TabsController = new TabsController()
  @State currentIndex:number = 0;

  @Builder TabBuilder(title: string, targetIndex: number) {
    Column() {
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(this.currentIndex);
    })
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
        TabContent(){
          Text('首页')
        }.tabBar(this.TabBuilder('首页',0)).backgroundColor(Color.Black)

        TabContent(){
          Text('发现')
        }.tabBar(this.TabBuilder('发现',1)).backgroundColor(Color.Blue)

        TabContent(){
          Text('推荐')
        }.tabBar(this.TabBuilder('推荐',2)).backgroundColor(Color.Red)

        TabContent(){
          Text('我的')
        }
        .tabBar(this.TabBuilder('我的',3)).backgroundColor(Color.Pink)
      }.onChange((index) => {
        this.currentIndex = index
      })
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

 

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条

相关资源

  • 2023年12月 HarmonyOS教学课程 059-ArkTS语言基础类库（概述） 2024-01-06 20794 浏览

    🚀一、概述 🔎1.什么是语言基础类库 语言基础类库，也称为标准库或核心库，是编程语言提供的一组内置的基础功能和常用工具的集合。它通常包含了各种数据结构、算法、输入输出处理、字符串处理、日期时间处理、文件操作、网络通信等功能，为开发者提供了便捷的编程接口，以减少开发工作量并提高代码的可读性和可维护性。

  • 2023年12月 HarmonyOS教学课程 015-ArkUI组件（Radio） 2024-01-06 23067 浏览

    🚀一、Radio Radio单选框是一种表单元素，允许用户从一组选项中选择一个选项。它由一个圆圈和一个标签组成，用户只能选择其中一个选项。Radio单选框通常用于表单中，用于收集用户选择的信息，例如用户性别、年龄、爱好等等。

  • 2023年12月 HarmonyOS教学课程 047-Stage模型（开发卡片事件） 2024-01-07 22140 浏览

    🚀一、开发卡片事件 HarmonyOS元服务卡片页面（Metaservice Card Page）是指在HarmonyOS系统中，用于展示元服务的页面界面。元服务是指一组提供特定功能或服务的组件，例如天气服务、音乐播放服务等。元服务卡片页面可以显示元服务的相关信息和操作选项，用户可以通过点击卡片页面上的按钮或交互元素来使用相关的元服务功能。元服务卡片页面提供了一种快速访问和使用元服务的方式，方便用户进行各种操作和任务。

  • 2023年12月 HarmonyOS教学课程 054-Web组件（基本使用和属性） 2024-01-06 21830 浏览

    🚀前言 Web是一种基于互联网的技术和资源的网络服务系统。它是指由许多互连的计算机组成的全球性计算机网络，使用户能够通过浏览器访问和交互式使用各种信息和资源，如网页、文档、图片、视频、音频等。通过Web，用户可以浏览网页、发送电子邮件、参与在线社交网络、进行在线购物等各种活动。Web的核心技术包括超文本传输协议（HTTP），超文本标记语言（HTML）和统一资源定位器（URL）。

  • 2023年12月 HarmonyOS教学课程 017-ArkUI组件（Progress） 2024-01-05 23660 浏览

    🚀一、Progress Progress组件是一种用户界面（UI）元素，用于向用户显示某些任务的进度。它通常以进度条的形式出现，显示任务完成的百分比。Progress组件可以在确定任务持续时间未知的情况下提供有用的反馈，帮助用户了解任务的状态和进度。

  • 2023年12月 HarmonyOS云开发基础认证（完美答案） 2024-01-06 21971 浏览

    🚀前言 HarmonyOS云开发基础认证是针对开发者在HarmonyOS云开发领域的知识和技能进行的一项认证考试。该认证考试旨在通过测试开发者对HarmonyOS云开发概念、架构和技术的理解和掌握情况，以及在开发HarmonyOS云应用时所需的关键技能。通过考试并获得认证，开发者将能够展示其掌握HarmonyOS云开发技能的能力和信誉，并为其在相关领域中的职业发展提供支持。

  • 2023年12月 HarmonyOS教学课程 037-ArkUI事件（焦点事件） 2024-01-05 23488 浏览

    🚀前言 焦点事件是指程序中的重要事件或关键点。焦点事件通常是程序的核心逻辑和功能，需要引起特殊的关注和处理。

  • 2023年12月 HarmonyOS教学课程 051-Stage模型（信息传递载体Want） 2024-01-06 21503 浏览

    应用中的信息传递是为了实现各种功能和交互。信息传递可以帮助用户和应用之间进行有效的沟通和交流。通过信息传递，应用可以向用户传递重要的消息、通知和提示，以提供及时的反馈和指导。同时，用户也可以通过信息传递向应用发送指令、请求和反馈，以实现个性化的需求和操作。

  • 2023年12月 HarmonyOS教学课程 041-Stage模型（概述和组件配置） 2024-01-06 22851 浏览

    🚀一、Stage模型概述和组件

  • 2023年12月 HarmonyOS教学课程 063-通知 2024-01-06 22236 浏览

    🚀前言 移动应用中的通知是指应用程序发送给用户的一种提示或提醒消息。这些通知可以在用户设备的通知中心或状态栏中显示，以提醒用户有关应用程序的活动、事件或重要信息。

风晓
风晓
粉丝 1 资源 2038 + 关注 私信
最近热门资源
工业防火墙为啥不走寻常路？  870
窃密软件无孔不入？迪普科技防护策略为隐私数据筑牢防线  646
正版软件检测工具2024  12
最近下载排行榜
工业防火墙为啥不走寻常路？ 0
窃密软件无孔不入？迪普科技防护策略为隐私数据筑牢防线 0
正版软件检测工具2024 0
作者收入月榜
1

prtyaa 收益363.45元

2

风晓 收益207.84元

3

IT-feng 收益198.17元

4

zlj141319 收益178.52元

5

777 收益172.06元

6

1843880570 收益171.31元

7

信创来了 收益103.8元

8

Fhawking 收益99.6元

9

克里斯蒂亚诺诺 收益91.08元

10

技术-小陈 收益79.05元

请使用微信扫码