鸿蒙移动应用开发项目式教程课件 项目2-数字云图书馆展示页-任务2-1 Tabs组件

Tabs组件Tabs组件

当页面信息较多时，为了让用户能够聚焦当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内实现视图内容的快速切换，一方面提升查找信息的效率，另一方面精简用户单次获取的信息。任务导入知识解析学以致用课堂小结课后拓展1.1Tabs组件Tabs组件的页面包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签。根据不同的导航类型，Tabs组件的布局会有所区别，可以分为顶部导航、底部导航、侧边导航，其中，导航页签分别位于顶部、底部和侧边，如图所示。知识解析学以致用课堂小结课后拓展任务导入1.1Tabs组件Tabs组件（1）TabContent组件不支持设置通用宽度属性，其宽度默认为Tabs父组件宽度。（2）TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。（3）在代码中，Tabs组件使用花括号包裹TabContent，如图所示，其中，TabContent显示相应的内容页。知识解析学以致用课堂小结课后拓展任务导入1.1Tabs组件Tabs组件说明

每一个TabContent对应的内容需要有一个页签，可以通过TabContent的tabBar属性进行配置。在TabContent中设置tabBar属性，可以设置其对应页签中的内容，tabBar作为内容的页签。设置多个内容时，需在Tabs组件内按照顺序设置。知识解析学以致用课堂小结课后拓展任务导入1.1Tabs组件Tabs组件说明

默认情况下，导航栏都支持滑动切换，在一些需要进行多级分类的页面，如支持底部导航和顶部导航组合的情况下，底部导航栏的滑动效果与顶部导航出现冲突，此时需要限制底部导航栏的滑动，避免给用户带来不好的体验。限制底部导航栏滑动的布局如图所示。知识解析学以致用课堂小结课后拓展任务导入1.2滑动切换

限制导航栏的滑动切换

控制滑动切换的属性为scrollable，默认值为true，表示可以滑动，若要限制滑动切换页签，则需要将其设置为false，代码如图所示。知识解析学以致用课堂小结课后拓展任务导入1.2滑动切换

限制导航栏的滑动切换

滚动导航栏可以用于顶部导航栏或者侧边导航栏的设置。在内容分类较多，屏幕宽度无法容纳所有分类页签的情况下，需要使用滚动导航栏，支持用户通过点击和滑动来加载隐藏的页签。滚动导航栏的效果如图所示。知识解析学以致用课堂小结课后拓展任务导入1.3滑动导航栏

滑动导航栏

实现滚动导航栏需要设置Tabs组件的barMode属性，默认值为BarMode.Fixed，表示固定导航栏；BarMode.Scrollable表示滚动导航栏，代码如图所示。知识解析学以致用课堂小结课后拓展任务导入1.3滑动导航栏

滑动导航栏

底部导航栏一般用于区分应用主页面功能，为了提供更好的用户体验，会组合文字及对应语义图标表示页签内容，在这种情况下，需要自定义导航页签的样式。自定义导航栏的效果如图所示。知识解析学以致用课堂小结课后拓展任务导入1.4自定义导航栏

自定义导航栏

系统默认情况下采用下画线标注当前活跃的页签，而自定义导航栏可以自行实现相应的样式，用于区分当前活