仓颉鸿蒙：关于滚动布局加载页面的方法_鸿蒙项目中整个页面滚动-优快云博客

本文链接：https://blog.youkuaiyun.com/jhasdagd/article/details/146120475

我们在使用仓颉鸿蒙设计页面的时候，经常会遇到一个问题。那就是当我们需要在一个页面展示多数内容时，我们应该怎么做。当然在仓颉鸿蒙这一门编程语言中，我们有很多方法去实现这一结果，而利用滚动布局在一个页面里展示这些内容，则是最简单，最容易上手方法。

注意：如果代码在安装HAP时提示“code:9568347 error: install parse native so failed”错误，或者运行时候提示“TypeError：Cannot read property xxx of undefined”错误，请在配置文件中书写apifilter，具体操作为找到build-profile.json5这一文件并在正确位置添加

"abiFilters":["x86_64","arm64-v8a"]

完成后的代码如下

{
  "apiType": "stageMode",
  "buildOption": {
    "cangjieOptions": {
      "path": "./src/main/cangjie/cjpm.toml",
      "abiFilters":["x86_64","arm64-v8a"]
    },
    "nativeLib": {
      "filter": {
        "enableOverride": true
      }
    }
  },
  "buildOptionSet": [
  ],
  "targets": [
    {
      "name": "default"
    }
  ]
}

在讲解滚动布局之前，我们还需要对仓颉鸿蒙的工程代码的结构有最基础的了解

工程代码的基本结构

package ohos_app_cangjie_entry

internal import ohos.base.*
internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*


@Entry
@Component
class EntryView {

    func build() {
     
    }
}

上述代码中带*的表示了仓颉鸿蒙中的四个包（*代表所有），从上到下分别为base包，组件包，状态的管理包以及仓颉鸿蒙中宏相关的包。

@Entry：可以作为一个组件去显示在终端设备界面，但不表示是第一个进入的界面组件

那么有人会问，第一个进入的界面组件是什么呢。这时候，我们把目光转向main_ability.cj这个文件，其中的

windowStage.loadContent("")

括号中所填入的那个名称所对应的界面就是第一个进入的界面组件。

@Component：可重复使用的组件

class：引用一个类

func build（）{}在这里面构建ui视图

滚动视图的构建

在讲解完仓颉鸿蒙的工程代码的基本结构之后，我们就可以开始着手构建我们第一个滚动视图了。

不过呢，在正式构建之前，还有一些小知识需要了解。

1.如何构建一个数组

代码如下

var arrs: Array<String> = ["RB", "W", "SF", "MCL", "AMR", "A", "VCRB", "FW", "VF", "C"]

我们对滚动布局视图中的每一个小区块中的内容的修改，最直接的方法便是依赖于这个构建数组的命令，即为直接修改构建数组时，赋予数组的内容。

2.实现滚动视图的基础for each这一函数

 ForEach(dataSource: ArrayList<T>, itemGeneratorFunc: (T, Int64) -> Unit, keyGeneratorFunc: (T, Int64) -> String)

注意：上面那一段代码中的ArrayList<T>是一个动态的数组，而我们构建数组的时候所使用的Array<String>是一个固定长度的数组

dataSource：数据源

itemGeneratorFunc：生成

3.了解横向布局和列向布局

这两个布局直接影响了最终做出来的滚动布局是水平布置还是垂直布置。具体反映到代码中，即为我们分别使用Column()和Row（）这两个命令来分别控制纵向布局和横向布局。

Column()//纵向布局
Row()//横向布局

4.如何实现滚动

当我们所要放入的内容所占据的页面大小总和远大于布局页面做设定的大小的时候，我们就必须让这些内容可以动起来，才能好好的向浏览者展示。这时候我们就需要用到控制滚动的命令scroll（），记住一定要标明滚动的方向是水平方向还是垂直方向

scroll（）命令格式如下（以垂直方向为例）

Scroll(){
}.width(100.percent).height(100.percent).scrollable(ScrollDirection.Vertical)

滚动布局视图的构建

在了解了以上的知识之后，我们就可以正式构建自己的第一个滚动布局视图了（记得要决定好是水平布局还是纵向布局哦）

以纵向布局为例，代码如下

package ohos_app_cangjie_entry

internal import ohos.base.*
internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos.component.Column

@Entry
@Component
class EntryView {

    var arrs: Array<String> = ["RB", "W", "SF", "MCL", "AMR", "A", "VCRB", "FW", "VF", "C"]

    func build() {
        Scroll(){
     Column() {
            ForEach(
                this.arrs,
                itemGeneratorFunc: {
                    item: String, index: Int64 =>

                        Row(){

                           Text(item).fontSize(20)

                        }.width(90.percent).height(12.percent).margin(top: 2.percent).backgroundColor(0x553365)
                    .justifyContent(FlexAlign.Center)
                }
            )
        }
        }.width(100.percent).height(100.percent).scrollable(ScrollDirection.Vertical)
}
}

代码运行结果图如下

在编写以上代码时，需要注意：

背景颜色的设定，即在backgrColor（）括号中填写的颜色代码不得使用#开头的十六进制颜色代码。

水平滚动布局视图代码如下

package ohos_app_cangjie_entry

internal import ohos.base.*
internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos.component.Column

@Entry
@Component
class EntryView {

    var arrs: Array<String> = ["RB", "W", "SF", "MCL", "AMR", "A", "VCRB", "FW", "VF", "C"]

    func build() {
        Scroll(){
     Row() {
            ForEach(
                this.arrs,
                itemGeneratorFunc: {
                    item: String, index: Int64 =>

                        Column(){

                           Text(item).fontSize(20)

                        }.width(12.percent).height(40.percent).margin(right: 2.percent).backgroundColor(0x337CCF)
                    .justifyContent(FlexAlign.Center)
                }
            )
        }
        }.width(100.percent).height(100.percent).scrollable(ScrollDirection.Horizontal )
}
}

代码运行结果图如下