Scroll容器实战：从理论到代码的完整教程

梁林烁
159 阅读7分钟

1 容器组件 Scroll

在鸿蒙（HarmonyOS Next）开发中，Scroll 容器组件是用于实现内容滚动功能的重要组件之一。它允许用户通过手指滑动或其他交互方式来浏览超出屏幕范围的内容。以下是关于鸿蒙系统中 Scroll 组件的详细介绍，包括其功能描述、使用场景、设计原则和实现注意事项。

1.1功能描述

  • 滚动方向：  支持垂直和水平方向的滚动，具体取决于布局需求和应用逻辑。
  • 嵌套滚动：  在某些情况下，可以实现嵌套滚动效果，即在一个可滚动的容器内再包含另一个可滚动的容器，这需要特别处理以确保用户体验流畅。
  • 惯性滚动：  用户停止触摸后，内容会根据最后的速度继续滚动一段距离，模拟真实世界的物理行为。
  • 边界反弹：  当滚动到内容的尽头时，界面可能会有轻微的反弹效果，提示用户已到达极限位置。
  • 滚动条：  可视化的滚动条可以帮助用户了解当前所在位置以及整个内容的长度。
  • 事件监听：  提供了对滚动开始、滚动过程、滚动结束等事件的支持，开发者可以根据这些事件执行相应的逻辑。

1.2使用场景

  • 长列表或表格：  当页面上的项目过多无法一次性全部显示时，使用 Scroll 容器可以让用户轻松地查看所有内容。
  • 图片库或画廊：  对于展示多张图片或多媒体文件的应用，Scroll 组件能够提供平滑的浏览体验。
  • 文本阅读：  在新闻客户端、电子书阅读器等应用中，Scroll 组件是必不可少的，它让用户可以在较长的文章或书籍章节之间顺畅切换。
  • 复杂表单：  如果表单非常长，Scroll 组件可以确保用户不会因为屏幕尺寸限制而无法访问所有的输入字段。

1.3 设计原则

  • 性能优化：  避免在滚动过程中进行耗时操作，如复杂的计算或网络请求，以保持流畅的用户体验。
  • 响应式设计：  Scroll 容器应适应不同的设备和屏幕尺寸，确保内容始终能被合理展示。
  • 触控友好：  滚动操作应当直观且易于使用，特别是对于移动设备而言，手势交互应该自然流畅。
  • 视觉反馈：  适当的动画和过渡效果可以提升用户的感知体验，但要避免过度装饰影响性能。

1.4 实现注意事项

  • 硬件加速：  利用 GPU 硬件加速来提高滚动的平滑度，尤其是在高分辨率屏幕上。
  • 内存管理：  对于非常大的数据集，考虑采用虚拟化技术（如懒加载），只渲染可见区域的内容，减少内存占用。
  • 兼容性测试：  测试不同版本的鸿蒙操作系统和多种设备类型，确保 Scroll 组件的行为一致。
  • 无障碍支持：  确保滚动组件对所有用户都可用，包括那些依赖辅助技术（如屏幕阅读器）的用户。

可滚动的容器组件，当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动。
当页面内容由多个区域组成，并且可以滚动时，推荐使用 Scroll，比如：

滚动核心.gif

2 核心用法

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

  1. Scroll 设置尺寸
  2. 设置 子组件（只支持一个子组件）
  3. 设置滚动：\ 3.1 竖向滚动：子组件的高度超出 Scroll\ 3.2 横向滚动：子组件的宽度超出 Scroll，scrollable改为横向滚动
  4. 根据需求调整属性
 Scroll(){ 
     // 只支持一个子组件
     Column(){ 
     // 内容放在内部
     // 尺寸超过 Scroll 即可滚动 
     } 
     } .width('100%') .height(200)

2.1属性参考

名称参数类型描述
scrollableScrollDirection设置滚动方向。 默认值：ScrollDirection.Vertical
scrollBarBarState设置滚动条状态。 默认值：BarState.Auto 说明： 如果容器组件无法滚动，则滚动条不显示。如果容器组件的子组件大小为无穷大，则滚动条不支持拖动和伴随滚动。 从API version 10开始，当滚动组件存在圆角时，为避免滚动条被圆角截断，滚动条会自动计算距顶部和底部的避让距离。
scrollBarColorstring 、 number 、 Color设置滚动条的颜色。 默认值：‘#182431’（40%不透明度）
scrollBarWidthstring 或 number设置滚动条的宽度，不支持百分比设置。 默认值：4 单位：vp 说明： 宽度设置后，滚动条正常状态和按压状态宽度均为滚动条的宽度值。如果滚动条的宽度超过Scroll组件主轴方向的高度，则滚动条的宽度会变为默认值。
scrollSnap10+ScrollSnapOptions设置Scroll组件的限位滚动模式。
edgeEffectvalue, options设置边缘滑动效果。 - value：设置Scroll组件的边缘滑动效果，支持弹簧效果和阴影效果。 默认值：EdgeEffect.None - options：设置组件内容大小小于组件自身时，是否开启滑动效果。 默认值：true
enableScrollInteraction10+boolean设置是否支持滚动手势，当设置为false时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。 默认值：true
nestedScroll10+NestedScrollOptions嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动。 默认值：{ scrollForward: NestedScrollMode.SELF_ONLY, scrollBackward: NestedScrollMode.SELF_ONLY }
friction10+number设置摩擦系数，手动划动滚动区域时生效，只对惯性滚动过程有影响，对惯性滚动过程中的链式效果有间接影响。 默认值：非可穿戴设备为0.6，可穿戴设备为0.9 从API version 11开始，非可穿戴设备默认值为0.7。 说明： 设置为小于等于0的值时，按默认值处理
enablePaging11+boolean设置是否支持划动翻页。 默认值：false 说明： 如果同时设置了划动翻页enablePaging和限位滚动scrollSnap，则scrollSnap优先生效，enablePaging不生效。

3.经典复现

竖向和横向.gif

3.1 代码参考

@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%')
  }
}

  1. 用户体验：

    • 确保滚动体验流畅，特别是在移动设备上，避免出现卡顿现象。
    • 提供足够的视觉反馈，例如滚动条或加载指示器，让用户知道还有更多内容可加载。

  2. 响应式设计：

    • 考虑不同屏幕尺寸下的显示效果，确保 Scroll 容器及其内容能够良好适应各种设备。

  3. 嵌套滚动：

    • 小心处理嵌套滚动的情况，因为这可能导致滚动行为变得复杂和不可预测。如果必须嵌套，请仔细测试并调整滚动逻辑。

  4. 滚动恢复：

    • 如果用户离开页面后再返回，考虑保存滚动位置并在下次访问时恢复，提供更好的连续性体验。
avatar
文章
阅读
粉丝