鸿蒙进阶篇-Scroll、Tabs、Badge

“在科技的浪潮中，鸿蒙操作系统宛如一颗璀璨的新星，引领着创新的方向。作为鸿蒙开天组，今天我们将一同踏上鸿蒙基础的探索之旅，为您揭开这一神奇系统的神秘面纱。”

各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今天的学习,鸿蒙进阶篇-Scroll、Tabs、Badge

在鸿蒙中：

Scroll（滚动）：Scroll 通常用于实现内容超出屏幕显示范围时的滚动效果，以便用户能够查看更多的信息。通过滚动视图组件，用户可以上下或左右滑动屏幕来浏览被隐藏的部分内容。

Tabs（标签页）：Tabs 是一种常见的界面导航方式，将不同的内容或功能划分到不同的标签页中，用户可以通过点击标签页轻松切换和查看相关的内容或执行对应的操作。

Badge（徽章）：Badge 一般用于在图标或组件上显示一些提示信息，如未读消息的数量、新通知的标志等，以引起用户的注意并提供快速的状态提示。

这些组件和概念有助于提升鸿蒙应用的用户体验和交互性，使界面更加清晰、易用和富有动态效果。

容器组件 Scroll

可滚动的容器组件，当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动。

当页面内容由多个区域组成，并且可以滚动时,下面附上参考文档链接:

附上官方文档链接https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5#%E5%AD%90%E7%BB%84%E4%BB%B6

核心用法

先来看看 Scroll 的最核心用法，让内容滚动

核心用法：

Scroll 设置尺寸
设置子组件（只支持一个子组件）
设置滚动：

①竖向滚动：子组件的高度超出 Scroll

②横向滚动：子组件的宽度超出 Scroll，scrollable改为横向滚动

4. 根据需求调整属性

Scroll(){// 只支持一个子组件Column(){// 内容放在内部// 尺寸超过 Scroll 即可滚动}
}
.width('100%')
.height(200)

scrollable	ScrollDirection	设置滚动方向。 ScrollDirection.Vertical 纵向 ScrollDirection.Horizontal 横向
scrollBar	BarState	设置滚动条状态。
scrollBarColor	string \| number \| Color	设置滚动条的颜色。
scrollBarWidth	string \| number	设置滚动条的宽度
edgeEffect	value:EdgeEffect	设置边缘滑动效果。 EdgeEffect.None 无 EdgeEffect.Spring 弹簧 EdgeEffect.Fade 阴影

下面展示一个案例来理解:

@Entry
@Component
struct Page01_Scroll {build() {Column({ space: 10 }) {Text('竖向滚动').fontSize(20)// Scroll 容器尺寸固定// scrollable 设置横向// 内容横向超出 Scroll 即可Scroll() {// 设置内容Column() {}.height(1000).width('100%')// 线型渐变.linearGradient({colors: [['#0094ff', 0], [Color.Orange, 1]],})}.scrollBarColor(Color.Pink).scrollBarWidth(50).scrollBar(BarState.Off).edgeEffect(EdgeEffect.Spring).width('100%').height(200).border({ width: 1, color: Color.Orange })Divider()Text('横向滚动').fontSize(20)// Scroll 容器尺寸固定// scrollable 设置横向// 内容横向超出 Scroll 即可Scroll() {Row() {}.height('100%').width(1000).linearGradient({angle: 90,colors: [['#0094ff', 0], [Color.Orange, 1]],})}// 横向滚动.scrollable(ScrollDirection.Horizontal).width('100%').height(200).border({ width: 1, color: Color.Orange }).edgeEffect(EdgeEffect.Spring)}.width('100%').height('100%')}
}

Scroll 的控制器

日常开发中可能需要通过代码控制滚动，以及获取滚动的距离，比如下图：

这个时候就可以通过 Scroll 的控制器来实现

比如:

页面滚动超过一定距离，显示返回顶部(火箭)，反之隐藏--获取滚动距离
点击返回顶部(火箭)，返回顶部--代码控制滚动

核心步骤：

实例化 Scroller的控制器
绑定给 Scroll
调用控制器的方法 控制滚动 以及 获取滚动距离

下面代码供参考,具体加入参数可以自行实现:

@Entry
@Component
struct Page03_Scroller {// 1. 创建 Scroller 控制器scroller: Scroller = new Scroller()build() {Column() {// 2. 设置给ScrollScroll(this.scroller) {// 内容略}}}
}

下面给出链接方法:

这里用到了 2 个方法：

scrollEdge：滚动到边缘
currentOffset：返回当前的偏移量

scrollEdge方法

滚动到容器边缘，不区分滚动轴方向，Edge.Top和Edge.Start表现相同，Edge.Bottom和Edge.End表现相同。

this.scroller.scrollEdge(Edge.Top)
this.scroller.scrollEdge(Edge.Start)
this.scroller.scrollEdge(Edge.Bottom)
this.scroller.scrollEdge(Edge.End)

参数：

参数名

参数类型

必填

参数描述

value

Edge

是

滚动到的边缘位置。

Edge.Top 顶部

Edge.Start 开头

Edge.Bottom 底部

Edge.End 结尾

currentOffset 方法

作用：获取滚动距离

this.scroller.currentOffset().xOffset // x 轴滚动距离
this.scroller.currentOffset().yOffset // y 轴滚动距离

类型

描述

{

xOffset: number,

yOffset: number

}

xOffset: 水平滑动偏移;

yOffset: 竖直滑动偏移。

说明：

返回值单位为vp。

下面展示一个案例来理解:

import { promptAction } from '@kit.ArkUI'@Entry
@Component
struct Page03_Scroller {scroller: Scroller = new Scroller()build() {Column({ space: 10 }) {Text('竖向滚动').fontSize(20)Scroll(this.scroller) {// 设置内容Column() {}.height(1000).width('100%').linearGradient({colors: [['#0094ff', 0], [Color.Orange, 1]],})}.scrollBarColor(Color.Pink).scrollBarWidth(5).scrollBar(BarState.On).edgeEffect(EdgeEffect.Spring).width('100%').height(200).border({ width: 1, color: Color.Orange })//Row() {Button('滚动到顶部').onClick(() => {this.scroller.scrollEdge(Edge.Start)})Button('滚动到底部').onClick(() => {this.scroller.scrollEdge(Edge.Bottom)})Button('查看滚动距离').onClick(() => {const res = this.scroller.currentOffset()promptAction.showToast({ message: 'resX ----->' + res.xOffset, }) //轻提示w('resX -----> ', res.xOffset)promptAction.showToast({ message: 'resY ----->' + res.yOffset }) //轻提示w('resY -----> ', res.yOffset)// JSON.stringify()方法, 可以把一个对象转换为字符串, 方便数据观察promptAction.showToast({message: 'res -----> ' + JSON.stringify(res)}) //轻提示w('res -----> ', JSON.stringify(res))})}}.width('100%').height('100%')}
}

Scroll 事件

Scroll 组件提供了一些事件，让开发者可以在适当的时候添加逻辑

名称

功能描述

onScroll(event: (xOffset: number, yOffset: number) => void)

滚动事件回调, 返回滚动时水平、竖直方向偏移量。

触发该事件的条件：

1、滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。

2、通过滚动控制器API接口调用。

3、越界回弹。

........

更多事件参考文档，日常开发中，较为常用的是 onScroll

2. 容器组件Tabs

当页面内容较多时，可以通过Tabs组件进行分类展示，以下这些效果都可以通过Tabs组件来实现

附上官方文档链接https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5#%E5%AD%90%E7%BB%84%E4%BB%B6

基本用法

先来看看最基础的用法

@Entry
@Component
struct TabbarDemo {build() {Tabs() { // 顶级容器TabContent() {// 内容区域：只能有一个子组件}.tabBar('首页') // 导航栏}}
}

下面展示一个案例来理解:

@Entry
@Component
struct Page06_Tabs {build() {Tabs() {// 内容TabContent() {Text('首页的内容').fontSize(30)}// tabBar.tabBar('首页')TabContent() {Text('推荐的内容').fontSize(30)}.tabBar('推荐')TabContent() {Text('发现的内容').fontSize(30)}.tabBar('发现')TabContent() {Text('我的内容').fontSize(30)}.tabBar("我的")}}
}

常用属性

默认的 tabs 已经可以实现切换，接下来咱们来看看如何通过属性控制他

垂直导航
导航位置
禁用滑动切换

通过 Tabs 的属性进行调整：

vertical 属性即可调整导航为水平或垂直
barPosition 即可调整导航位置为开头或结尾
scrollable 即可调整是否允许滑动切换
animationDuration 设置动画时间毫秒

下面展示一个案例来理解:

@Entry
@Component
struct Page07_TabsAttribute {build() {Tabs() {// 内容TabContent() {Text('首页的内容').fontSize(30)}// tabBar.tabBar('首页')TabContent() {Text('推荐的内容').fontSize(30)}.tabBar('推荐')TabContent() {Text('发现的内容').fontSize(30)}.tabBar('发现')TabContent() {Text('我的内容').fontSize(30)}.tabBar("我的")}.barPosition(BarPosition.End) // 位置.vertical(true) // 纵向.scrollable(false) // 滑动切换.animationDuration(4000) // 动画持续时间}
}

滚动导航栏

如果导航栏的内容较多，屏幕无法容纳时，可以将他设置为滚动

可以通过 Tabs 组件的 barMode 属性即可调整固定导航栏或滚动导航栏

Tabs(){// 内容略
}.barMode(BarMode.Scrollable)// 滚动// .barMode(BarMode.Fixed)// 默认值

下面展示一个案例来理解:

@Entry
@Component
struct Page08_TabsScrollable {titles: string [] = ['首页', '关注', '热门', '军事', '体育', '八卦', '数码', '财经', '美食', '旅行']build() {// 外层容器Tabs() {// 内容ForEach(this.titles, (title: string, index: number) => {TabContent() {Text(title + '的内容').fontSize(30)}.tabBar(title)})}.barMode(BarMode.Scrollable)}
}

自定义tabBar

TabBar 如果放在底部的话，一般会显示图形和文字，甚至有特殊的图标，如果要实现此类效果，就需要 自定义tabBar

tabBar

string | CustomBuilder

设置TabBar上显示内容。

CustomBuilder: 构造器，内部可以传入组件

Tabs() {TabContent() {// 内容略}.tabBar(this.tabBarBuilder())}@Builder
tabBarBuilder() {// 自定义的Tabbar结构
}

自定义 tabBar-Tabs组件的事件

自定义TabBar 之后，高亮的切换效果就没有了，需要自行实现，咱们分两步走：

明确什么时候 tab 进行了切换
更改高亮效果

名称

功能描述

onChange(event: (index: number) => void)

Tab页签切换后触发的事件。

- index：当前显示的index索引，索引从0开始计算。

滑动切换、点击切换均会触发

onTabBarClick(event: (index: number) => void)10+

Tab页签点击后触发的事件。

- index：被点击的index索引，索引从0开始计算。

容器组件Badge

可以附加在单个组件上用于信息标记的容器组件，在应用开发中较为常见，比如：

附上官方文档链接https://docs.openharmony.cn/pages/v4.1/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-badge.md

核心用法

Badge是 容器组件，只支持单个子元素

  Badge({count:0,style:{}}){// 单个子元素}

参数名	参数类型	必填	参数描述
count	number	是	设置提醒消息数。说明：小于等于0时不显示信息标记。
position	BadgePosition\|Position10+	否	设置提示点显示位置。默认值：BadgePosition.RightTop
maxCount	number	否	最大消息数，超过最大消息时仅显示maxCount+。默认值：99 取值范围
style	BadgeStyle	是	Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

下面展示一个案例来理解:

@Entry
@Component
struct Page14_Badge {build() {Column() {Text('Badge 组件').fontSize(50).fontWeight(FontWeight.Bold)// 基本用法Badge({ count: 10, style: {} }) {Text('信息').border({ width: .5, }).borderRadius(10).padding(10)}// 调整位置Badge({ count: 10, position: BadgePosition.Left, style: {} }) {Text('信息').border({ width: .5, }).borderRadius(10).padding(10)}// 3. 最大个数Badge({count: 12,maxCount: 10,position: BadgePosition.Right,style: {}}) {Text('感觉自己萌萌哒').border({ width: .5, }).borderRadius(10).padding(10)}// 4. 调整样式Badge({count: 12, style: {fontSize: 20,color: Color.Orange,badgeColor: Color.Black,borderColor: Color.Black,badgeSize: 30}}) {Text('感觉自己萌萌哒').border({ width: .5, }).borderRadius(10).padding(10)}}.width('100%').height('100%')}
}