【鸿蒙开发】第9课,Rating组件、Scroll和ScrollBar组件

76 阅读6分钟

1 Rating组件

Rating组件是鸿蒙系统提供的一个基础UI组件,用于表示用户对某一事物的评分。它通常以星形图标的形式展示,用户可以通过点击或滑动来选择评分。Rating组件支持自定义星级数量、评分步长以及星级样式等,以满足不同场景的需求。

动画.gif

// 声明一个组件的入口,并定义组件名为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组件的显示区域时,用户可以通过滚动来查看所有内容, 主要属性有:

  1. scrollable: 设置滚动方向。可选值包括ScrollDirection.Vertical(垂直滚动,默认值)和ScrollDirection.Horizontal(水平滚动)。
  2. scrollBar: 设置滚动条状态。可选值包括BarState.Auto(自动显示滚动条,默认值)、BarState.On(始终显示滚动条)和BarState.Off(始终不显示滚动条)。如果容器组件无法滚动,则滚动条不显示。
  3. scrollBarColor和scrollBarWidth: 分别用于设置滚动条的颜色和宽度。这些属性可以是字符串或数字,具体取决于开发环境和版本。
  4. edgeEffect: 设置滑动效果。目前支持的滑动效果参见EdgeEffect的枚举说明。默认值通常为EdgeEffect.None,表示没有滑动效果。
  5. enableScrollInteraction (API 10+) : 设置是否支持滚动手势。当设置为false时,无法通过手指或鼠标滚动,但不影响通过控制器接口进行的滚动。默认值为true
  6. friction (API 10+) : 设置滚动时的摩擦力,影响滚动的速度和惯性。该属性可能需要与资源文件配合使用。

需要注意的是,Scroll组件本身不直接提供align属性用于控制子组件的对齐,但可以通过嵌套RowColumn组件并使用其justifyContentalignItems属性来实现类似效果。对于Scroll组件,通常更关注滚动行为而非内部子组件的对齐。

Scroll组件可以通过控制器(如Scroller)来控制滚动行为。控制器提供了多种方法来控制滚动,如scrollTo(滚动到指定位置)、scrollEdge(滚动到容器边缘)、scrollPage(滚动到下一页或上一页)等。

Scroll组件支持多种滚动事件,如onScroll(滚动事件回调)、onScrollFrameBegin(每帧开始滚动时触发)、onScrollStart(滚动开始时触发)、onScrollStop(滚动停止时触发)等。这些事件可以在滚动过程中提供反馈或执行特定的逻辑。

2.2 ScrollBar组件

ScrollBar组件用于定义可滚动区域的行为样式,而ScrollBar的子节点则负责定义滚动条自身的行为样式。ScrollBar组件需要与可滚动组件(如List、Grid、Scroll)通过Scroller进行绑定,且只有当两者方向相同时,才能联动。ScrollBar与可滚动组件仅支持一对一绑定。主要属性:

  1. scroller: 传入可滚动组件的控制器,用于绑定ScrollBar与可滚动组件。
  2. direction: 控制滚动条的方向,取值为ScrollBarDirection.VerticalScrollBarDirection.Horizontal,分别表示纵向滚动条和横向滚动条。
  3. state: 设置滚动条的状态,可选值包括BarState.AutoBarState.OnBarState.Off

3.3 简单示例

动画.gif

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