仓颉鸿蒙：关于滚动布局加载页面的方法

       我们在利用仓颉鸿蒙设计页面的时间，常常会遇到一个问题。那就是当我们需要在一个页面展示多数内容时，我们应该怎么做。当然在仓颉鸿蒙这一门编程语言中，我们有许多方法去实现这一结果，而利用滚动布局在一个页面里展示这些内容，则是最简单，最容易上手方法。
注意：假如代码在安装HAP时提示“code:9568347 error: install parse native so failed”错误，大概运行时间提示“TypeError：Cannot read property xxx of undefined”错误，请在配置文件中书写apifilter，详细操作为找到build-profile.json5这一文件并在正确位置添加

1. <strong>"abiFilters":["x86_64","arm64-v8a"]</strong>

复制代码

完成后的代码如下

1. {
2.   "apiType": "stageMode",
3.   "buildOption": {
4.     "cangjieOptions": {
5.       "path": "./src/main/cangjie/cjpm.toml",
6.       "abiFilters":["x86_64","arm64-v8a"]
7.     },
8.     "nativeLib": {
9.       "filter": {
10.         "enableOverride": true
11.       }
12.     }
13.   },
14.   "buildOptionSet": [
15.   ],
16.   "targets": [
17.     {
18.       "name": "default"
19.     }
20.   ]
21. }

复制代码

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

1. package ohos_app_cangjie_entry
3. internal import ohos.base.*
4. internal import ohos.component.*
5. internal import ohos.state_manage.*
6. import ohos.state_macro_manage.*
9. @Entry
10. @Component
11. class EntryView {
13.     func build() {
14.      
15.     }
16. }

复制代码

上述代码中带*的表示了仓颉鸿蒙中的四个包（*代表所有），从上到下分别为base包，组件包，状态的管理包以及仓颉鸿蒙中宏相干的包。
@Entry：可以作为一个组件去显示在终端设备界面，但不表示是第一个进入的界面组件
那么有人会问，第一个进入的界面组件是什么呢。这时间，我们把眼光转向main_ability.cj这个文件，此中的

1. windowStage.loadContent("")

复制代码

括号中所填入的那个名称所对应的界面就是第一个进入的界面组件。
@Component：可重复利用的组件
class：引用一个类
func build（）{}在这里面构建ui视图
滚动视图的构建

       在讲解完仓颉鸿蒙的工程代码的根本结构之后，我们就可以开始动手构建我们第一个滚动视图了。
       不过呢，在正式构建之前，另有一些小知识需要了解。
1.如何构建一个数组

代码如下

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

复制代码

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

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

复制代码

注意：上面那一段代码中的ArrayList<T>是一个动态的数组，而我们构建数组的时间所利用的Array<String>是一个固定长度的数组
dataSource：数据源
itemGeneratorFunc：天生
3.了解横向布局和列向布局

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

1. Column()//纵向布局
2. Row()//横向布局

复制代码

4.如何实现滚动

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

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

复制代码

滚动布局视图的构建 

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

1. package ohos_app_cangjie_entryinternal import ohos.base.*internal import ohos.component.*internal import ohos.state_manage.*import ohos.state_macro_manage.*import ohos.component.Column@Entry@Componentclass 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（）括号中填写的颜色代码不得利用#开头的十六进制颜色代码。
      水平滚动布局视图代码如下

1. package ohos_app_cangjie_entryinternal import ohos.base.*internal import ohos.component.*internal import ohos.state_manage.*import ohos.state_macro_manage.*import ohos.component.Column@Entry@Componentclass 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 )}}

复制代码

代码运行结果图如下

       至此，我们乐成构建出了一个最基础的滚动布局视图的构建，在以后的学习中我们还可以逐步往这个基础的滚动布局视图中加入许多更复杂的功能。相信在以后的学习中我们可以在这个最基础的滚动布局视图上设计出更复杂更好的视图

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。