128.HarmonyOS NEXT 数字滚动示例详解(三)：列表实现与布局

List({ 
  space: STYLE_CONFIG.ITEM_GUTTER, 
  scroller: this.scroller 
}) {
  // 列表项内容
}
.scrollBar(BarState.Off)
.height($r('app.string.digital_scroll_animation_max_size'))

ListItem() {
  Text($r('app.string.digital_scroll_animation_ticket'))
    .fontSize($r('sys.float.ohos_id_text_size_headline8'))
    .width($r('app.string.digital_scroll_animation_max_size'))
    .textAlign(TextAlign.Center)
}

ListItem() {
  Row({ space: STYLE_CONFIG.TEXT_MARGIN }) {
    Text($r('app.string.digital_scroll_animation_today'))
      .fontColor($r('sys.color.ohos_id_color_text_secondary'))
      .fontWeight(FontWeight.Bold)

    DigitalScrollDetail({ isRefresh: this.isRefresh })
  }
  .width($r('app.string.digital_scroll_animation_max_size'))
  .justifyContent(FlexAlign.Center)
}

Row({ space: STYLE_CONFIG.TEXT_MARGIN }) {
  // 文本内容
  // 数字滚动组件
}
.width($r('app.string.digital_scroll_animation_max_size'))
.justifyContent(FlexAlign.Center)

.justifyContent(FlexAlign.Center) // 居中对齐
.textAlign(TextAlign.Center)      // 文本居中

Text()
  .fontSize($r('sys.float.ohos_id_text_size_headline8'))
  .fontColor($r('sys.color.ohos_id_color_text_secondary'))
  .fontWeight(FontWeight.Bold)

.width($r('app.string.digital_scroll_animation_max_size'))
.height($r('app.string.digital_scroll_animation_max_size'))

.scrollBar(BarState.Off) // 隐藏滚动条

private scroller: Scroller = new Scroller();

@Builder
scrollArea() {
  // 列表实现
}

DigitalScrollDetail({ isRefresh: this.isRefresh })