初探鸿蒙HarmonyOS列表滚动问题有坑

序章

最近在网上看到很多关于鸿蒙HarmonyOS的消息看到了不一样的华为，让我满是惊喜；觉得我也有必要学习一下鸿蒙开发，然后最近看了一下视频和文档发现入门是真的不难，至少对于前端来说入门不难；ArkTS跟typeScript很像很像；就ArkUI有一点差别，但是里面写样式的语法跟CSS差不多，至少对于前端来说很快就能理解了。

为什么我想去学习鸿蒙，主要有两点原因：

• 作为国内唯一一个系统有必要支持一下；可能我能做的贡献有限，但是我们支持一下还是可以做到的，当一颗螺丝钉。
• 自己没有开发过App相关的应用，想自己尝试一下。

提醒： 后续我会出一到两个的实战项目，并且去发布上线；初步定位软件类型为日常评语（主要是通过AI生成），然后在开发一个处理图片的软件（主要指针对制作头像功能-比如：国庆那种头像和圣诞节那种头像）；如果有兴趣的朋友我们可以一起学习交流鸿蒙开发。查看原文

组件

组件中那些元素没有滚动条：

• Column
• Row
• Flex
• Stack

组件中那些元素有滚动条：

• Scroll
• List
• Grid
• Swiper
• WaterFlow

Scroll 滚动

在鸿蒙中提供了一个滚动组件，Scroll组件可以实现滚动效果，但是不推荐使用，因为当你的内容很少的时候他会居中显示，然后你在滚动组件内的盒子设置高度是可以从顶部到底部进行排列的，但是内容较多的时候就不能再滚动了，所以不推荐使用（很多文章都写的是这个滚动，如果是做横向滚动的话是可以的），如以下示例：

import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State middleHeight: number = 0
  build() {
    Column(){
      Scroll(){
        Column(){
          Row(){
            Text('高质量评语，只为减轻您的工作')
              .fontSize(22)
              .fontColor('#999')
              .height(72)
              .lineHeight(72)
          }
          .padding({
            left: 10,
            top: 0,
            right: 10,
            bottom: 20
          })
          Flex({
            direction: FlexDirection.Column,
            alignItems: ItemAlign.Center
          }) {
            ForEach([1,1,1], (item: string, index:number) =>{
              Text('前端标题')
                .fontSize(20)
                .fontColor('#f56c6c')
                .fontWeight(FontWeight.Bold)
                .padding({
                  top: 40,
                  bottom: 40
                })
                .textAlign(TextAlign.Center)
            })
          }
        }
        .width('100%')
        .padding({
          top: 15,
          bottom: 30,
          left: 15,
          right: 15,
        })
      }
      .width('100%')
      .layoutWeight(1)
      .scrollable(ScrollDirection.Vertical)
    }
    .width('100%')
    .height('100%')
  }

  windowClass?: window.Window
  async setFullScreen(flag: boolean) {
    if (!this.windowClass) {
      this.windowClass = await window.getLastWindow(getContext(this))
    }
    this.windowClass.setWindowLayoutFullScreen(flag)
  }

  onPageShow(): void {
    this.setFullScreen(true)
  }

  onPageHide(): void {
    this.setFullScreen(false)
  }
}

List 滚动

我还是比较推荐用list进行滚动，这样你的内容不仅是从顶部到底部进行排列的，而且当内容比较多的时候也会进行滚动；如以下示例代码：

import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State middleHeight: number = 0
  build() {
    Column(){
      Column(){
        Row(){
          Text('高质量评语，只为减轻您的工作')
            .fontSize(22)
            .fontColor('#999')
            .height(72)
            .lineHeight(72)
        }
        
        List(){
          ForEach([1,1,1,1,1,1,1,1,1,1], (item: string, index:number) =>{
            ListItem() {
              Text('前端标题')
                .fontSize(20)
                .fontColor('#f56c6c')
                .fontWeight(FontWeight.Bold)
                .padding({
                  top: 40,
                  bottom: 40
                })
                .textAlign(TextAlign.Center)
            }
          })
        }
        .height('calc(100% - 72vp)')
      }
      .width('100%')
    }
    .width('100%')
    .height('100%')
  }

  windowClass?: window.Window
  async setFullScreen(flag: boolean) {
    if (!this.windowClass) {
      this.windowClass = await window.getLastWindow(getContext(this))
    }
    this.windowClass.setWindowLayoutFullScreen(flag)
  }

  onPageShow(): void {
    this.setFullScreen(true)
  }

  onPageHide(): void {
    this.setFullScreen(false)
  }
}

总结

在学习鸿蒙的这几天发现很多问题，但是大部分都是UI布局问题，然后一点一点的摸索着前进，然后发布出来作为一个记录，当然如果你也遇到相同的问题可以借鉴借鉴。到时候建一个群大家可以一起学习交流交流。