Harmony OS Next应用开发进阶篇（二）-Scroll、Tabs、Badge
本文介绍了鸿蒙中的三个概念，分别是 Scroll、Tabs 和 Badge 。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. 设置给Scroll
Scroll(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组件来实现
基本用法
先来看看最基础的用法
@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
可以附加在单个组件上用于信息标记的容器组件，在应用开发中较为常见，比如：
核心用法
Badge是 容器组件，只支持单个子元素
Badge({count:0,style:{}}){
// 单个子元素
}| 参数名 | 参数类型 | 必填 | 参数描述 |
| count | number | 是 | 设置提醒消息数。 |
| position | 否 | 设置提示点显示位置。 | |
| maxCount | number | 否 | 最大消息数，超过最大消息时仅显示maxCount+。 |
| style | 是 | 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%')
}
}
以上是关于鸿蒙进阶篇-Scroll、Tabs、Badge 综合的一些内容,方便大家学习,至此，关于鸿蒙进阶篇-Scroll、Tabs、Badge 综合的内容就介绍到这里，愿您能学以致用，开发出精彩的鸿蒙应用！
以上内容仅供学习交流，如有违法或者侵权可以联系删除。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
31
0- 0
已为社区贡献19条内容
所有评论(0)