#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0）原创精华

背刺闰土的猹

发布于 2023-7-31 03:23

1.8w浏览

5收藏

此博客由金陵科技学院-开放原子开源社-张子航编写

ArkTS语言入门（构建应用页面 2.0）

经过前面的学习,笔者为大家介绍了使用ArkTS如何搭建一个简单的页面，介绍了一个页面的组成部分以及一部分的容器和组件，在接下来的这篇博客中，笔者将为对之前的知识进行一个补充，主要是针对一些组件更多属性的应用，还会介绍其他例如列表组件的使用，使得页面的功能更加丰富。

Column与Row

由之前的介绍可知，我们可以通过Column和Row容器来对页面进行以一个简单的布局，划分不同的功能分区，以搭建一个完整的页面，接下来我将介绍它更多的属性，使其在使用中更好的对页面进行排布划分。
首先如图
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区
我们可以看到，Column和Row都有一个可选参数“space”，space的类型可以是string或number类型，space的作用是调节其在主轴上子组件之间的距离（Column和Row的主轴分别为纵向和横向），举个例子：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

该代码显示效果如下：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区
但在加入Column和Row的space参数后

Column({spaec:30}){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row({spaec:20}){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

该效果就呈现为：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区
比较后不难发现，在纵向和横向上，各个组件之间的距离发生的变化

这个便是space参数的用法。

接下来，还要介绍这个两个容器的重要属性“justifyContent”以及“alignItems”
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区
其中，justifyContent的数据类型为FlexAlign,它的具体类型有以下几个：

接下来，我为大家提供前三个代码示例：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
  .justifyContent(FlexAlign.Start)//首端对齐
  .width('100%')
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

效果如图：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区

同理：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
  .justifyContent(FlexAlign.End)//末端对齐
  .width('100%')
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

效果如图：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区

同理：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
  .justifyContent(FlexAlign.Center)//中心对齐
  .width('100%')
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

效果如图：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区

接下来，我们来介绍alignItems属性，该属性可以控制该容器的子组件在交叉轴上（Column与Row的交叉轴分别为横向与纵向）上的排列方式，alignItems属性在这两个容器中的参数类型并不相同，其中Column容器的参数为HorizontalAlign(水平对齐)，而Row容器的参数为VerticalAlign（垂直对齐），它们分别由如下几个排列方式：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区

下面，我将以Column容器为例，介绍它的alignItems属性的用法：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
}
.alignItems(HorizontalAlign.Start)//首端对齐
.width('100%')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

效果如图，可以发现子组件排列在了Column容器的交叉轴的最左端：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区
同理：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
}
.alignItems(HorizontalAlign.Center)//中心对齐
.width('100%')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

效果如图：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区
同理：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
}
.alignItems(HorizontalAlign.End)//末端对齐
.width('100%')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

效果如图：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区
以上便是全部对Column和Row容器的补充内容
下面我们来一起学习新的组件内容：
在日常生活的软件中，大家应该经常能碰到像这样的页面：

它通过一行行的表格使它的功能整齐排列在页面中，不仅使得页面美观，而且给用户带来了方便的使用体验，那么这样的表格是如何实现的？接下来将介绍一个生成表格的组件----List。

List

上面已经介绍到，List组件是用于生成表格的，它一般和它的子组件ListItem一起使用，按照水平或垂直方向线性排列，它的参数情况如下：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区
如图所示，可以看到List组件一共有三个参数，分别是“space”“initalIndex”以及“scroller”，其中
space的作用是用于调整列表项之间的间距，
initalIndex是用于设置List初次加载时起始位置显示的item，
scroller的作用则是控制List组件的滚动。
而List组件的属性则主要有以下两种：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区

在正式学习List组件之前，我们需要学会ForEach循环渲染，它将有利于我们更好的构建出大量格式相仿的表格项，大大减少我们的代码量。

ForEach循环渲染

首先，我们来看到它的基本格式，如图：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区
不难发现它也是拥有3个参数。

参数1：arr
arr为需要迭代的数组，我们需要将数据提前存放在这个数组里，ForEach会将数据按顺序渲染进列表项里’
参数2：itemGenerator
itemGenerator是为子组件生成函数，主要是用于设定好列表样式以进行循环渲染。
参数3:keyGenerator
keyGenerator是用于为数组唯一键值生成函数。

学习完ForEach后，我们便可以开始学习使用List组件了，首先，我们先来看看构建一个列表的步骤，如下图：
#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区
接下来，我将以此图为例，尝试做出一张列表

我们先对列表的每一项进行分析，例如：

在这个列表项里，我们可以看到，它是由最左侧的图标，接着的文本，还有最右侧的箭头图标三个部分组成的，获得这些信息后，我们首先得创建一个命名为itemData的类，用于存放一个列表项里的数据（定义列表数据对象）：

export default class itemData{
  img?:Resouce;
  title: Resouce;
  others:Resouce;

//初始化列表项数据构建对应数据
constructor（img?:Resouce，title: Resouce，others:Resouce）{
    this.img = img;
    this.title = title;
    this.others = others;
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

接着到第二步，创建列表数据数组，代码如下：

export class MainViewModel{
...
//创建函数getSettingListData用于接收数据
getSettingListData():array<ItemData>{
//创建数组settingListData用于存放接收到的数据
  let settingListData:ItemData[] = [
    new ItemData($r('app.media,news'),$r('app.string.setting_List_news'),$r('app.strinjg.setting.List.toggle')),
new ItemData($r('app.media.data'),$r('app.string.setting_List_data'),null),
new ItemData($r('app.media.menu'),$r('app.string.setting_List_menu'),null),
...
];
  return settingListData;
  }
}

export default new MainViewModel();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

第三步，使用List组件构建列表。

@Builder SettingCell(item:ItemData){
  Row(){
    Row({space:12}){
      Image(item.img)
      Test(item.title)     
 }
  if(itme.others == null){
    Image($r('app.media.right_grey'))//向右箭头图标        
  }else{
     Toggle(Toggle({type:ToggleType.switch,isOn:false}))//启动按钮 
  }
}
.justifyContent(FlexAlign.SpaceBetween)//第一个元素行首对齐，最后一个元素行尾对齐
.width('100%')
} 

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

第四步，使用ForEach构建列表：

@Component
export default struct Setting{
  @Builder SettingCell(item:ItemData){...}
  ...
  List(){
    ForEach(MainViewModel.getSettingListData(),//遍历数组数据
       (item:ItemData) => {ListItem(){
        this.settingCell(item)
      }//生成子组件
    },item => JSON.stringify(item))//生成数组项键值
  }
  .divider({...})//设置列表分割线
...
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

经过上面的步骤，我们就能完成一个List列表的构建，完成一个 #jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -鸿蒙开发者社区这样的列表。

以上便是本片博客的全部内容，如果描述有误，还请读者指正！编者会继续努力，带来更多详尽的基础知识

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签

已于2023-9-13 17:36:28修改

11条回复

按时间正序

按时间倒序

红叶亦知秋

实用的布局是应用成功的第一步

2023-7-31 10:04:18

诺舒华吃西瓜

被大佬的发文时间吓到

2023-7-31 14:19:31

笨笨的婧婧回复了诺舒华吃西瓜

被大佬的发文时间吓到

大佬上一篇也是凌晨发的

2023-7-31 17:27:23

安苒anran0

这个应该是我看到比较详细的一篇了，最近flex布局也很好用，建议也出一篇

2023-8-1 01:43:51

冰淇淋爱我

这下参数都弄懂了

2023-8-1 18:39:17

皮皮虾233

ArkTS这块确实很不错

2023-8-2 16:31:44

带带小老弟

参数的说明有时看不懂，还是要多试试

2023-8-3 11:53:50

殇时云起

各个组件都只能一起调吗

2023-8-3 17:20:37

zhushangyuan_

【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -开源基础软件社区

做的挺漂亮的。

有个示例sample仓库，我看很多案例，可以学习下其中的案例代码，边学边写文章分享。

https://gitee.com/openharmony/applications_app_samples

2023-8-4 09:29:56

只看看不说话回复了 zhushangyuan_

【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） -开源基础软件社区做的挺漂亮的。有个示例sample仓库，我看很多案例，可以学习下其中的案例代码，边学边写文章分享。https://gitee.com/openharmony/applications_app_samples

学习下案例，谢谢分享

2023-8-4 17:11:17

有故事的王同学

跟着作者上手试一试

2023-8-7 10:43:47

51CTO

51CTO博客

51CTO学堂

#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0）原创精华

ArkTS语言入门（构建应用页面 2.0）

Column与Row

List

ForEach循环渲染

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0） 原创 精华

ArkTS语言入门（构建应用页面 2.0）

Column与Row

List

ForEach循环渲染

目录

订阅鸿蒙技术特刊，精选内容抢先看

#jitoa#【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面 2.0）原创精华