鸿蒙ArkTS言语入门

经过前面的学习,笔者为大家引见了经常使用ArkTS如何搭建一个繁难的页面，引见了一个页面的组成局部以及一局部的容器和组件，在接上去的这篇博客中，笔者将为对之前的常识启动一个补充，关键是针对一些组件更多属性的运行，还会引见其余例如列表组件的经常使用，使得页面的性能愈加丰盛。

Column与Row

咱们可以看到，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'))}}

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'))}}

比拟后不难发现，在纵向和横向上，各个组件之间的距离出现的变动。

接上去，还要引见这个两个容器的关键属性“justifyContent”以及“alignItems”。

其中，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%')}

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%')}

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%')}

接上去，咱们来引见alignItems属性，该属性可以控制该容器的子组件在交叉轴上（Column与Row的交叉轴区分为横向与纵向）上的陈列模式，alignItems属性在这两个容器中的参数类型并不相反，其中Column容器的参数为HorizontalAlign(水平对齐)，而Row容器的参数为VerticalAlign（垂直对齐），它们区分由如下几个陈列模式：

上方，我将以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%')

成果如图，可以发现子组件陈列在了Column容器的交叉轴的最左端：

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%')

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%')

以上便是所有对Column和Row容器的补充内容。

上方咱们来一同窗习新的组件内容：

在日常生存的软件中，大家应该经常能碰到像这样的页面：

它经过一行行的表格使它的性能划一陈列在页面中，不只使得页面好看，而且给用户带来了繁难的经常使用体验，那么这样的表格是如何成功的？接上去将引见一个生成表格的组件----List。

如图所示，可以看到List组件一共有三个参数，区分是“space”“initalIndex”以及“scroller”，其中space的作用是用于调整列表项之间的间距。

initalIndex是用于设置List首次加载时起始位置显示的item。

scroller的作用则是控制List组件的滚动。

而List组件的属性则关键有以下两种：

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

ForEach循环渲染

不难发现它也是领有3个参数。

学习完ForEach后，咱们便可以开局学习经常使用List组件了，首先，咱们先来看看构建一个列表的步骤，如下图：

接上去，我将以此图为例，尝试做出一张列表。

咱们先对列表的每一项启动剖析，例如：

在这个列表项里，咱们可以看到，它是由最左侧的图标，接着的文本，还有最右侧的箭头图标三个局部组成的，取得这些信息后，咱们首先得创立一个命名为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;}}

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

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();

第三步，经常使用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%')}

@Componentexport default struct Setting{@Builder SettingCell(item:ItemData){...}...List(){ForEach(MainViewModel.getSettingListData(),//遍历数组数据(item:ItemData) => {ListItem(){this.settingCell(item)}//生成子组件},item => JSON.stringify(item))//生成数组项键值}.divider({...})//设置列表宰割线...}

经过上方的步骤，咱们就能成功一个List列表的构建，成功一个。

以上便是本片博客的所有内容，假设形容有误，还请读者斧正！编者会继续致力，带来更多详尽的基础常识。

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