2024年HarmonyOS鸿蒙最全鸿蒙HarmonyOS实战-ArkUI组件（Tabs）_harmonyos tabs(7)，阿里面试失败征兆

最新推荐文章于 2024-09-23 16:40:31 发布
最新推荐文章于 2024-09-23 16:40:31 发布
阅读量555 收藏 9
点赞数 4
分类专栏： 程序员 文章标签： 鸿蒙 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84862118/article/details/138613246
版权

img
img

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

.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(‘推荐’)

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！


img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**


[外链图片转存中…(img-pSIS9JpU-1715236090645)]
[外链图片转存中…(img-rkWcX0nM-1715236090645)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

2401_84862118
关注
专栏目录
HarmonyOS从基础到实战-高性能华为在线答题元服务
一键难忘的博客
11-21 13万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
Eplan从入门到精通解析.doc
11-28
EPLAN从入门到精通，图文并茂，从建立项目到生成宏、库，内容详尽清晰，简单易懂
2024年HarmonyOS鸿蒙最全软考高级之信息系统案例分析七重奏-《3》(1)，腾讯面试gm
2401_84853495的博客
05-08 459
5、配置审计；6、发布管理和交付。
鸿蒙HarmonyOS开发实战：导航组件封装与使用-tabs
2401_84917132的博客
08-28 1112
大部分的封装都是基于系统提供的Api实现的，无非就是简化了相关代码，基本上都不难，大家可以直接查看源码即可，这里重点说下普通导航的居左效果。
关于更改环境变量时误删系统变量Path的补救措施
2301_80958355的博客
03-03 7401
方法二：同样按win+r打开命令列表输入"regedit"，进入注册列表，在注册列表中，进入 “计算机\HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Session Manager\Environment” 路径。前两天忙着挺进大二的学习内容，为了安装JDK去改电脑的环境变量，没想到误删了系统自带Path变量，几天后才发现，于是总结了一下补救的方法。方法三：在系统信息里找到系统保护，点击系统还原，还原到之前没删掉变量的还原点就可以了，
【环境变量问题：计算机删除环境变量的恢复方法；此环境变量太大。此对话框允许将值设置为最长2047个字符】
weixin_47869094的博客
06-21 2344
在系统变量中新建一个变量名为PREVIOUS_PATH，变量值设置为要重新设置的所有路径，路径与路径之间用“；无论使用图形界面还是cmd命令行修改系统Path，都是立即同步到注册表文件的，所以，没有备份注册表也不用看了。如果你在修改系统Path前打开了以上任意IDE，无论你怎么修改环境Path都不会生效，必须重启IDE才能生效。被修改的系统Path只是同步到了注册表中，并未立即生效，所以可以使用cmd命令行重新得到系统Path。复制该系统Path值重新修改系统Path即可。图形化界面修改系统Path。
Windows | 快速解决环境变量Path被误删 拯救方法
键盘爱好者
12-19 1万+
环境变量Path是操作系统中十分重要的一项配置，它包含了多个文件目录的路径，可以让用户在任何位置都能够快速地访问到需要的程序和文件。然而，当不小心误删了环境变量Path时，将会导致一系列的问题，如无法打开命令行窗口、无法启动某些应用程序等。误删环境变量Path后，系统会出现一系列的问题，如无法打开命令行窗口、无法启动某些应用程序等。总之，误删环境变量Path是一件非常麻烦的事情，但是只要采取正确的恢复方法，就可以快速解决问题，避免给用户带来不必要的困扰。”，找到误删Path之前的还原点进行恢复即可。
鸿蒙HarmonyOS实战-ArkUI组件（Tabs）_harmonyos tabs，鸿蒙开发面试基础
2301_82241698的博客
04-16 1017
自定义导航栏是指在应用开发中，开发者使用自己定制的视图代替系统自带的导航栏，以实现更加自由、灵活和符合应用风格的导航栏。自定义导航栏可以包括各种 UI 元素，例如按钮、文本、图片、标签等，以满足不同应用的需求。自定义导航栏可以帮助应用创建独特的风格和品牌形象，提高用户体验和应用的可用性。Column() {Column(){Text(‘我的内容’)
鸿蒙HarmonyOS实战-ArkUI组件（Tabs）_harmonyos tabs(1)
tencentes的博客
04-14 637
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。 既有适合小白学习的零基础资料，
鸿蒙HarmonyOS应用开发者认证 题库+答案案
01-18
本资源提供了鸿蒙HarmonyOS应用开发者认证的题库和答案，涵盖了HarmonyOS应用开发的多个方面，包括容器组件、 Ability、Web组件、网络请求、首选项、自定义组件、弹窗组件、图片加载、网络权限等。通过学习和理解...
HarmonyOS鸿蒙开发指南:容器组件 tabs开发指导
sybh的博客
01-08 1122
用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。在本场景中，开发者可以点击标签切换内容，选中后标签文字颜色变红，并显示下划线。设置Tabs背景色及边框和tab-content布局。
eplan新手入门学习手册，资料很全
08-20
eplan入门手册，非常使用，新手的必备手册，值得好好学习
【鸿蒙HarmonyOS开发笔记】应用数据持久化之通过用户首选项实现数据持久化
温的打怪之旅
03-20 1674
应用数据持久化，是指应用将内存中的数据通过文件或数据库的形式保存到设备上。内存中的数据形态通常是任意的数据结构或数据对象，存储介质上的数据形态可能是文本、数据库、二进制文件等。HarmonyOS标准系统支持典型的存储数据形态，包括用户首选项键值型数据库关系型数据库。开发者可以根据如下功能介绍，选择合适的数据形态以满足自己应用数据的持久化需要。用户首选项（Preferences）：通常用于保存应用的配置信息。
误删环境变量Path解决方式汇总
热门推荐
络小绎
06-04 1万+
注：不要重启电脑，电脑系统：Windows10 一、问题重述 起因是我在添加环境变量时报错： 于是使用了 rapidee工具来添加环境变量[3]。 但是打开后并没有找到Path（截图时我已解决该问题）： 但是习惯性的按了保存，然后直接退出了，之后发现环境变量中的path不见了。 二、问题解决 因为rapidee相当于是直接修改注册表了，所以方法2对我没用。 本来找了同学问了对方的Path路径准备先加上去改一下应付应付，但是突然发现之前因为在配置东西，所以打开了cmd没关...
Windows 配置环境变量误删Path 所有的值解决办法
最新发布
2202_76092587的博客
09-23 1045
在系统设置中添加环境变量直接删除了原本系统和自己已经添加的系统变量的恢复方法。略。
Elasticsearch 中 analyzer/search_analyzer/ik_max_word/ik_smart 的使用
sinat_24928447的博客
10-12 7366
一、先说几个关键 属性 1，String 类，分为两种： text：可分词，不参与聚合 keyword：不可分词，数据会作为完整字段进行匹配，可参与聚合 2，Numberical 数值类型，分两类： 基本数据类型：long、integer、short、byte、double、float、half_float 浮点数高精度类型：scaled_float（需要制定精度因子，10或100这样，es会把真实值与之相乘后存储，取出时还原） 3，Date 日期类型 ES 可以对日期格式，化为字符串存储...
已饱和，未来程序员真没法再干了？_程序员干不了活(1)，HarmonyOS鸿蒙 基础面试
2401_84181501的博客
04-15 480
是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
误删环境变量的恢复
wwkaven的专栏
07-10 5709
今天修改环境变量的时候
鸿蒙HarmonyOS实战-Stage模型（应用上下文Context）_鸿蒙 page 里获取 context(1)
04-11 910
（备注鸿蒙获取）**[外链图片转存中…(img-YzUVlfwN-1712810178251)]
鸿蒙HarmonyOS开发者认证题库详解与答案解析
鸿蒙HarmonyOS应用开发者认证题库包含了针对HarmonyOS开发者的多项知识点，旨在帮助开发者理解和掌握操作系统的关键特性，以便通过认证考试。以下是部分题目及其解析： 1. **布局管理** - 在Colum和Row容器组件中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值