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); // 设置对齐方式为开始（靠左）
}
}
}
