1 Rating组件
Rating组件是鸿蒙系统提供的一个基础UI组件,用于表示用户对某一事物的评分。它通常以星形图标的形式展示,用户可以通过点击或滑动来选择评分。Rating组件支持自定义星级数量、评分步长以及星级样式等,以满足不同场景的需求。
// 声明一个组件的入口,并定义组件名为Index
@Entry
@Component
struct Index {
// 定义一个状态变量number,用于存储当前的评分值,初始值为3
@State number: number = 3
// 构建UI界面的方法
build() {
// 创建一个垂直排列的容器Column,用于放置多个子组件
Column() {
// 创建一个Rating组件,用于显示和接收用户评分
Rating({ rating: this.number }) // 绑定Rating组件的当前评分值到number状态变量
.stars(10) // 设置Rating组件显示的星级数量为10颗
.stepSize(0.5) // 设置评分的步长为0.5,允许用户以0.5为单位递增或递减评分
.onChange((value: number) => { // 监听评分变化事件
this.number = value // 当评分变化时,更新number状态变量的值
})
// 创建一个分割线Divider,用于在视觉上分隔不同的UI元素
Divider().margin(10) // 设置分割线的上下左右边距为10像素
// 创建一个Text组件,用于显示当前的评分值
Text(this.number.toString()) // 将number状态变量转换为字符串并显示
}
// 设置Column容器的宽度为100%,使其占满父容器的宽度
.width('100%')
// 设置Column容器的高度为100%,使其占满父容器的高度
.height('100%')
// 设置Column容器内子组件的水平对齐方式为居中
.alignItems(HorizontalAlign.Center)
// 设置Column容器内子组件的垂直对齐方式为居中
.justifyContent(FlexAlign.Center)
}
}
2. Scroll和ScrollBar组件
2.1 Scroll 组件
Scroll组件是一个可滚动的容器组件,用于在子组件的布局尺寸超过父组件尺寸时提供滚动功能。它可以包裹其他组件(如Text、Image、Row、Column等),当这些子组件的总尺寸超过Scroll组件的显示区域时,用户可以通过滚动来查看所有内容, 主要属性有:
- scrollable: 设置滚动方向。可选值包括
ScrollDirection.Vertical
(垂直滚动,默认值)和ScrollDirection.Horizontal
(水平滚动)。 - scrollBar: 设置滚动条状态。可选值包括
BarState.Auto
(自动显示滚动条,默认值)、BarState.On
(始终显示滚动条)和BarState.Off
(始终不显示滚动条)。如果容器组件无法滚动,则滚动条不显示。 - scrollBarColor和scrollBarWidth: 分别用于设置滚动条的颜色和宽度。这些属性可以是字符串或数字,具体取决于开发环境和版本。
- edgeEffect: 设置滑动效果。目前支持的滑动效果参见
EdgeEffect
的枚举说明。默认值通常为EdgeEffect.None
,表示没有滑动效果。 - enableScrollInteraction (API 10+) : 设置是否支持滚动手势。当设置为
false
时,无法通过手指或鼠标滚动,但不影响通过控制器接口进行的滚动。默认值为true
。 - friction (API 10+) : 设置滚动时的摩擦力,影响滚动的速度和惯性。该属性可能需要与资源文件配合使用。
需要注意的是,Scroll组件本身不直接提供align属性用于控制子组件的对齐,但可以通过嵌套Row
或Column
组件并使用其justifyContent
和alignItems
属性来实现类似效果。对于Scroll组件,通常更关注滚动行为而非内部子组件的对齐。
Scroll组件可以通过控制器(如Scroller)来控制滚动行为。控制器提供了多种方法来控制滚动,如scrollTo
(滚动到指定位置)、scrollEdge
(滚动到容器边缘)、scrollPage
(滚动到下一页或上一页)等。
Scroll组件支持多种滚动事件,如onScroll
(滚动事件回调)、onScrollFrameBegin
(每帧开始滚动时触发)、onScrollStart
(滚动开始时触发)、onScrollStop
(滚动停止时触发)等。这些事件可以在滚动过程中提供反馈或执行特定的逻辑。
2.2 ScrollBar组件
ScrollBar组件用于定义可滚动区域的行为样式,而ScrollBar的子节点则负责定义滚动条自身的行为样式。ScrollBar组件需要与可滚动组件(如List、Grid、Scroll)通过Scroller进行绑定,且只有当两者方向相同时,才能联动。ScrollBar与可滚动组件仅支持一对一绑定。主要属性:
- scroller: 传入可滚动组件的控制器,用于绑定ScrollBar与可滚动组件。
- direction: 控制滚动条的方向,取值为
ScrollBarDirection.Vertical
或ScrollBarDirection.Horizontal
,分别表示纵向滚动条和横向滚动条。 - state: 设置滚动条的状态,可选值包括
BarState.Auto
、BarState.On
和BarState.Off
。
3.3 简单示例
@Entry
@Component
struct ScrollAndScrollBarExample {
private scroller: Scroller = new Scroller(); // 创建一个 Scroller 实例,用于控制滚动
private data: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; // 定义一个数字数组,用于展示
build() {
Row() { // 使用 Row 布局,水平排列子组件
Scroll(this.scroller) { // 创建一个可滚动的区域,使用上面定义的 Scroller
Column() { // 使用 Column 布局,垂直排列子组件
ForEach(this.data, (item: number) => { // 遍历数据数组,为每个元素创建一个子组件
Column() { // 每个数据项使用 Column 布局
Row() { // 使用 Row 布局,水平排列图片和文本
Image($r('app.media.startIcon')).width(50).height(50); // 显示一个图片,设置宽度和高度
Text(item.toString()) // 显示文本,内容为当前数据项
.fontSize(50) // 设置字体大小
.padding(10); // 设置文本的内边距
}
Divider(); // 添加一个分隔线
}
});
}
}
.scrollable(ScrollDirection.Vertical) // 设置滚动方向为垂直
.scrollBar(BarState.On) // 启用滚动条
.scrollBarColor('#FF0000') // 设置滚动条颜色为红色
.scrollBarWidth(10) // 设置滚动条宽度
.width('100%') // 设置 Scroll 的宽度为 100%
.height('100%') // 设置 Scroll 的高度为 100%
.layoutWeight(1); // 设置布局权重,Row 中的其他组件可以根据这个权重来调整大小
// 自定义 ScrollBar 组件
ScrollBar({
scroller: this.scroller, // 绑定到上面定义的 Scroller
direction: ScrollBarDirection.Vertical, // 设置滚动条方向为垂直
state: BarState.Auto // 设置滚动条状态为自动
}) {
// ScrollBar 的子节点,用于定义滚动条的样式
Text('HI') // 显示文本 "HI"
.width(30) // 设置文本宽度(滚动条宽度)
.height(100) // 设置文本高度(滚动条高度)
.backgroundColor('#ff03ffed') // 设置滚动条颜色
.borderRadius(10) // 设置滚动条的圆角
.textAlign(TextAlign.Center); // 设置文本对齐方式为居中
}
.width(30) // 设置 ScrollBar 的宽度
.backgroundColor(Color.Yellow) // 设置 ScrollBar 的背景颜色
.align(Alignment.Start); // 设置对齐方式为开始(靠左)
}
}
}