郴州网站制作公司,土巴兔装修公司电话,乐云seo,企业网站优化方案范本学完时间#xff1a;2024年8月14日
一、前言叨叨
学习HarmonyOS的第六课#xff0c;人数又成功的降了500名左右#xff0c;到了3575人了。 本文接上一文章【鸿蒙学习】HarmonyOS应用开发者基础 - 构建更加丰富的页面#xff08;一#xff09;#xff0c;继续记录构建更… 学完时间2024年8月14日
一、前言叨叨
学习HarmonyOS的第六课人数又成功的降了500名左右到了3575人了。 本文接上一文章【鸿蒙学习】HarmonyOS应用开发者基础 - 构建更加丰富的页面一继续记录构建更加丰富页面中的Navigation组件。 本文内容过多针对学习的内容进行整理阅读的小伙伴在学习过程中可以直接返回华为官方进行学习本文仅作于知识梳理重点内容整理。 HarmonyOS第一课构建更加丰富的页面
二、Tabs组件
当页面信息较多时为了让用户能够聚焦于当前显示的内容需要对页面内容进行分类提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换一方面提升查找信息的效率另一方面精简用户单次获取到的信息量。
1、基本布局
Tabs组件的页面组成包含两个部分分别是TabContent和TabBar。TabContent是内容页TabBar是导航页签栏页面结构如下图所示根据不同的导航类型布局会有区别可以分为底部导航、顶部导航、侧边导航其导航栏分别位于底部、顶部和侧边。 说明 TabContent组件不支持设置通用宽度属性其宽度默认撑满Tabs父组件。TabContent组件不支持设置通用高度属性其高度由Tabs父组件高度与TabBar组件高度决定。 2、底部导航
底部导航是应用中最常见的一种导航方式。底部导航位于应用一级页面的底部用户打开应用能够分清整个应用的功能分类以及页签对应的内容并且其位于底部更加方便用户单手操作。底部导航一般作为应用的主导航形式存在其作用是将用户关心的内容按照功能进行分类迎合用户使用习惯方便在不同模块间的内容切换。 导航栏位置使用Tabs的barPosition参数进行设置。默认情况下导航栏位于顶部此时barPosition为BarPosition.Start。设置为底部导航时需要将barPosition设置为BarPosition.End。
3、顶部导航
当内容分类较多用户对不同内容的浏览概率相差不大需要经常快速切换时一般采用顶部导航模式进行设计作为对底部导航内容的进一步划分常见一些资讯类应用对内容的分类为关注、视频、数码或者主题应用中对主题进行进一步划分为图片、视频、字体等。
Tabs({ barPosition: BarPosition.Start }) {// TabContent的内容:关注、视频、游戏、数码、科技、体育、影视...
}3、侧边导航
侧边导航是应用较为少见的一种导航模式更多适用于横屏界面用于对应用进行导航操作由于用户的视觉习惯是从左到右侧边导航栏默认为左侧侧边栏。 实现侧边导航栏需要将Tabs的vertical属性设置为truevertical默认值为false表明内容页和导航栏垂直方向排列。
Tabs({ barPosition: BarPosition.Start }) {// TabContent的内容:首页、发现、推荐、我的...
}
.vertical(true)
.barWidth(100)
.barHeight(200)说明 vertical为false时tabbar的宽度默认为撑满屏幕的宽度需要设置barWidth为合适值。vertical为true时tabbar的高度默认为实际内容的高度需要设置barHeight为合适值。 4、限制导航栏的滑动切换
默认情况下导航栏都支持滑动切换在一些内容信息量需要进行多级分类的页面如支持底部导航顶部导航组合的情况下底部导航栏的滑动效果与顶部导航出现冲突此时需要限制底部导航的滑动避免引起不好的用户体验。 控制滑动切换的属性为scrollable默认值为true表示可以滑动若要限制滑动切换页签则需要设置为false。
5、固定导航栏
当内容分类较为固定且不具有拓展性时例如底部导航内容分类一般固定分类数量一般在3-5个此时使用固定导航栏。固定导航栏不可滚动无法被拖拽滚动内容均分tabBar的宽度。 Tabs的barMode属性用于控制导航栏是否可以滚动默认值为BarMode.Fixed。
Tabs({ barPosition: BarPosition.End }) {// TabContent的内容首页、发现、推荐、我的...
}
.barMode(BarMode.Fixed)6、滚动导航栏
滚动导航栏可以用于顶部导航栏或者侧边导航栏的设置内容分类较多屏幕宽度无法容纳所有分类页签的情况下需要使用可滚动的导航栏支持用户点击和滑动来加载隐藏的页签内容。 滚动导航栏需要设置Tabs组件的barMode属性默认值为BarMode.Fixed表示为固定导航栏BarMode.Scrollable表示可滚动导航栏。
Tabs({ barPosition: BarPosition.Start }) {// TabContent的内容关注、视频、游戏、数码、科技、体育、影视、人文、艺术、自然、军事...
}
.barMode(BarMode.Scrollable)7、自定义导航栏
对于底部导航栏一般作为应用主页面功能区分为了更好的用户体验会组合文字以及对应语义图标表示页签内容这种情况下需要自定义导航页签的样式。 设置自定义导航栏需要使用tabBar的参数以其支持的CustomBuilder的方式传入自定义的函数组件样式。例如这里声明tabBuilder的自定义函数组件传入参数包括页签文字title对应位置index以及选中状态和未选中状态的图片资源。通过当前活跃的currentIndex和页签对应的targetIndex匹配与否决定UI显示的样式。
三、切换至指定页签
在不使用自定义导航栏时默认的Tabs会实现切换逻辑。在使用了自定义导航栏后默认的Tabs仅实现滑动内容页和点击页签时内容页的切换逻辑页签切换逻辑需要自行实现。即用户滑动内容页和点击页签时页签栏需要同步切换至内容页对应的页签。 此时需要使用Tabs提供的onChange事件方法监听索引index的变化并将当前活跃的index值传递给currentIndex实现页签的切换。
若希望不滑动内容页和点击页签也能实现内容页和页签的切换可以将currentIndex传给Tabs的index参数通过改变currentIndex来实现跳转至指定索引值对应的TabContent内容。也可以使用TabsControllerTabsController是Tabs组件的控制器用于控制Tabs组件进行内容页切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。
