零基础快速上手HarmonyOS ArkTS开发5---从简单的页面开始2---使用List组件
接着零基础快速上手HarmonyOS ArkTS开发4---从简单的页面开始继续往下学习页面结构的知识。最近发现之前学习这一章节的内容在官方已经被下了，更换成了另外一个案例了（华为开发者学堂）：https://img-blog.csdnimg.cn/img_convert/242a0b688cca9b3933d11c28a2be3738.png
而且整个视频的风格也不一样了，先看看之前的这个玉人讲师：
https://img-blog.csdnimg.cn/img_convert/66977c54cd918ee4d96917a340517f5e.png
再看看现在的：
https://img-blog.csdnimg.cn/img_convert/18ef1487d71f2598e3d6727b7d4987a3.png
哇塞，档次一看就不一样了，新的肯定是佳构，但是我这章学习才刚开始绘了个静态的登录界面呀，就想让我直接放弃治疗了~~只能说我学得如蜗牛般快，跟不上官方的步伐。
还好在B站上搜到了其时整个系列的课程：清煮面的个人空间-清煮面个人主页-哔哩哔哩视频
这也挺好，等我把旧的学完，再以最新的这个案例再进行巩固加深~~
在上一次搭建好登录的界面之后，这次则在登录界面成功之后，再来构建一下我的设置界面：
https://img-blog.csdnimg.cn/img_convert/9780a91d318b7ce546cff37200672f3a.png
其核心是学习List组件的使用。
List组件先容：
List组件一般和子组件ListItem一起使用，按照垂直或程度方向线性分列。
接口：
List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})
入参1：space设置列表间距；
入参2： initialIndex设置当前List初次加载时起始位置显示的item；
入参3：scroller控制器，可以控制组件的滚动；
属性：
https://img-blog.csdnimg.cn/img_convert/10a3a51cffa4d8cd64b190dcc2598c86.png
关于这块的更多属性可以参考官方api文档：文档中央
循环渲染（ForEach）先容：
由于列表是有多个列表项，所以构建列表需要使用ForEach进行循环渲染，先看一下它的定义：
https://img-blog.csdnimg.cn/img_convert/3d15ff61b92b2b5534ec7ab2612d91d4.png
参数1：arr为需要迭代的数组；
参数2：itemGenerator为子组件生成函数；
参数3： keyGenerator为数组项唯一键值生成函数，它是一个可选项参数，但是为了使开发框架能够更好地识别数组更改，进步性能，建议提供该参数。
使用List组件构建列表：
接下来看一下List组件具体的构建步骤。
1、定义列表数据对象：用于封装列表项数据
https://img-blog.csdnimg.cn/img_convert/a1e8e8f83b945e6dc304b2bbc25b2390.png
它由三个元素组件：一个图标，一个标题，一个菜单的状态（单选开关，还是向右的可点击的），所以可以定义如下对象：
https://img-blog.csdnimg.cn/img_convert/58ce903dc201e09170ab7d45002a9476.png
2、创建列表数据数组：为列表创建数据源
https://img-blog.csdnimg.cn/img_convert/32851705b787e9b4126d96306d2a2bd2.png
3、创建列表Item内容：构建列表项组件
接下来则需要来构建Item组件了，此时就需要使用到@Builder装饰器了（关于它可以参考上一篇https://www.cnblogs.com/webor2006/p/18048248），
https://img-blog.csdnimg.cn/img_convert/87bf8af8190766a6dda1945d305c6b94.png
这块的代码比力好明白，就不过多说明。
4、使用ForEach构建列表： 遍历数据源渲染列表项
最后就是来完成整个列表的渲染了，如下：
https://img-blog.csdnimg.cn/img_convert/cf6dc94f7fe14317ff0ce29c525be172.png
5、List实践：
理论基础学完了之后，接下来则回到代码中来实现这么一个列表界面。
1、登录按钮增加点击事件：
在上一次搭建了一个登录的静态界面，这里先给登录按钮添加一个点击事件，登录之后再跳到既将要搭建的列表界面：
https://img-blog.csdnimg.cn/img_convert/57c8ee4546c75032881defdde279c847.png
https://img-blog.csdnimg.cn/img_convert/0e0c0a55d2fbf030d0034bc3cf4d8c1a.png
首先需要判断用户名和密码是否输入了，如果用户没输入则给个非常提示，这里则需要定义两个装饰变量：
https://img-blog.csdnimg.cn/img_convert/b71b5c9026a554de76eb4dd5fc081411.png
而关于这个装饰器的作用可以参考https://www.cnblogs.com/webor2006/p/17729244.html，然后在文本输入框中需要添加文本的监听，如下：
https://img-blog.csdnimg.cn/img_convert/e3a66d7e9b808cf898752bc29be47773.png
此时就可以进行登录参数简单校验了：
https://img-blog.csdnimg.cn/img_convert/14b67c92a892ab740e12cecaabd7c9cb.png
此时运行看一下:
https://img-blog.csdnimg.cn/img_convert/7643d25554674d4526a15becb4d8393d.gif
这里的登录就用延时来模拟一下了，由于登录是一个需要耗时的操纵，所有应该展示一个loading给用户进行等待，所以先定义一个loading的状态变量：
https://img-blog.csdnimg.cn/img_convert/bc42dc0836d22fa163c74b2c15bcb233.png
https://img-blog.csdnimg.cn/img_convert/c0f11ff64da5f2d75c35bb69cd00b026.png
此时运行看一下：
https://img-blog.csdnimg.cn/img_convert/697d53958eefb6966f957e67cbe60b33.gif
接下来则新建一个首页用来进行登录跳转：
https://img-blog.csdnimg.cn/img_convert/f27d47b8e40f8453e15d0ab6302ddeed.png
此时要注意了，需要在这里注册一下：
https://img-blog.csdnimg.cn/img_convert/0e0b1795e789167e2ebeda9c033947e0.png
此时就可以进行路由跳转了：
https://img-blog.csdnimg.cn/img_convert/f41a10c91486c9ba61b85f7d06c8a064.png
其中router需要导入包：
https://img-blog.csdnimg.cn/img_convert/0e09aa1ecb0a3d3ed61b1c735d3240b9.png
此时运行看一下效果：
https://img-blog.csdnimg.cn/img_convert/b80904eb537a75431531f9ba60996260.gif
2、搭建我的列表界面：
1、标题处理：
https://img-blog.csdnimg.cn/img_convert/3b50dfd7ac958cde7ebbb1406aa6ad55.png
首先用一个Scroll包裹一下，因为设置项通常的内容会凌驾一屏，所以需要让用户可以上下滑动：
https://img-blog.csdnimg.cn/img_convert/dd2cedf11991d145b4ca491c00974e26.png
然后整体是垂直分列的，所以用Column包裹一下：
https://img-blog.csdnimg.cn/img_convert/29b903d263c47643cabaa69affc5ac74.png
然后弄一个标题文本控件：
https://img-blog.csdnimg.cn/img_convert/4af72f38be6c85272300772a7b68badf.png
此时运行看一下：
https://img-blog.csdnimg.cn/img_convert/a11edd12b66adb39f216b5c86b4809be.png
另外设置一下页面背景和左右间距：
https://img-blog.csdnimg.cn/img_convert/a0cc7d127025da857c9d624a0d4b22cd.png
此时运行，发现标题居中显示了：
https://img-blog.csdnimg.cn/img_convert/6e98299ac89d62d9d439c2828b9339bc.png
此时需要在Text元素外貌再包裹一层：
https://img-blog.csdnimg.cn/img_convert/3d090ad1ac4786923033d656481e611f.png
再运行：
https://img-blog.csdnimg.cn/img_convert/73be13e7e8eb6597fd3ac29f593ef068.png
2、用户明细地区：
https://img-blog.csdnimg.cn/img_convert/ef0c4a5082a27d0480be77db3f307710.png
/* 用户明细区域 */
Row() {
Image($r('app.media.account'))
.width($r('app.float.setting_account_size'))
.height($r('app.float.setting_account_size'))
Column() {
Text($r('app.string.setting_account_name'))
.fontSize($r('app.float.setting_account_fontSize'))
Text($r('app.string.setting_account_email'))
.fontSize($r('app.float.little_text_size'))
.margin({ top: $r('app.float.setting_name_margin') })
}
.alignItems(HorizontalAlign.Start)
.margin({ left: $r('app.float.setting_account_margin') })
}
.margin({ top: $r('app.float.setting_account_margin') })
.alignItems(VerticalAlign.Center)
.width(CommonConstants.FULL_PARENT)
.height($r('app.float.setting_account_height'))
.backgroundColor(Color.White)
.padding({ left: $r('app.float.setting_account_padding') }) 此时运行看一下：
https://img-blog.csdnimg.cn/img_convert/14e149c01cfb3645fe9d706950cda172.png
再设置一下地区的圆角：
https://img-blog.csdnimg.cn/img_convert/b1244c092b83f4bd1d2e5b8c8c034de9.png
https://img-blog.csdnimg.cn/img_convert/477604fbd6c47df12211f23bf5fdb420.png
3、预备列表数据：
接下来则需要来搭建开关列表了，这里先来预备好列表的数据，这里先新建一个viewmodel文件夹：
https://img-blog.csdnimg.cn/img_convert/bf8087e59c855e284b5b15e3c32651e4.png
然后新建一个列表类：
https://img-blog.csdnimg.cn/img_convert/e2160a3e248552a68e059403fa7e8e56.png
/**
* List item data entity.
*/
export default class PageResource {
/**
* Text of list item.
*/
title: Resource;
/**
* Image of list item.
*/
img: Resource;
/**
* Other resource of list item.
*/
others?: Resource;
constructor(title: Resource, img: Resource, others?: Resource) {
this.title = title;
this.img = img;
this.others = others;
}
} 然后就可以预备列表数据了，如下：
https://img-blog.csdnimg.cn/img_convert/f3ee7f50cf248cb9ebea6797bc3fa607.png
import ItemData from './ItemData';
/**
* Binds data to components and provides interfaces.
*/
export class MainViewModel {
/**
* Get data of the setting list.
*
* @return {Array<PageResource>} settingListData.
*/
getSettingListData(): Array<ItemData> {
let settingListData: ItemData[] = [
new ItemData($r('app.string.setting_list_news'), $r('app.media.news'), $r("app.string.setting_toggle")),
new ItemData($r('app.string.setting_list_data'), $r('app.media.data')),
new ItemData($r('app.string.setting_list_menu'), $r('app.media.menu')),
new ItemData($r('app.string.setting_list_about'), $r('app.media.about')),
new ItemData($r('app.string.setting_list_storage'), $r('app.media.storage')),
new ItemData($r('app.string.setting_list_privacy'), $r('app.media.privacy'))
];
return settingListData;
}
}
export default new MainViewModel(); 4、选项开关地区：
此时咱们就可以这次新学的List组件来搭建列表界面了，如下：
https://img-blog.csdnimg.cn/img_convert/1bea0a125e268acbca831e6b84be2eff.png
运行看一下：
https://img-blog.csdnimg.cn/img_convert/87bbf9dfbf169f1dbf55b590a9a55289.png
发现这块没有间距：
https://img-blog.csdnimg.cn/img_convert/e77b865e7bf84871eb900bb68cd013e8.png
这里可以加一个间距，如下：
https://img-blog.csdnimg.cn/img_convert/1d4bf6d6fbee36c9cfc32d09b236b224.png
https://img-blog.csdnimg.cn/img_convert/1c7cb5cfbb4a9410d6aadbb7eb5b77d6.png
接下来再来对列表项进行一个渲染：
https://img-blog.csdnimg.cn/img_convert/a569e90d15ff3f2359148f5c2f7dc5ac.png
此时运行：
https://img-blog.csdnimg.cn/img_convert/9e664eee8dd0363cab8036b21e059e14.png
这个开关应该是居右的，这里又需要使用到flex结构了，如下：
https://img-blog.csdnimg.cn/img_convert/265c7a89ec11070d0ff78ede2e34cf79.png
这里需要用到上节零基础快速上手HarmonyOS ArkTS开发4---从简单的页面开始所学的知识了，主轴方向上的对齐则需要使用justifyContent：
https://img-blog.csdnimg.cn/img_convert/393e8ef28620872422f40239a847382e.png
此时再运行：
https://img-blog.csdnimg.cn/img_convert/34db9ccaf043076bc2ddc2f045621893.png
最后，对于这个列表的渲染可以使用@Builder装饰器进行一下组件的封装，如下：
https://img-blog.csdnimg.cn/img_convert/5da6650cb41a3998843decc18487cb26.png
https://img-blog.csdnimg.cn/img_convert/c8aba359a4d13f890ed737ebcd4d926b.png
4、退出登录：
最后再弄一个退出登录的按钮：
https://img-blog.csdnimg.cn/img_convert/5c049c8c7e6219fb3b5eda89a7beb8f2.png
此时运行一下：
https://img-blog.csdnimg.cn/img_convert/f3af45823fe6ffb8c4d30e198f1eb974.png
应该它的位置是在底部，那怎么调整一下呢？此时Blank()的本领就可以派上用场了：
https://img-blog.csdnimg.cn/img_convert/18acf8e58867b11f7902638aaa724152.png
这块在上一节中也使用到了：
https://img-blog.csdnimg.cn/img_convert/a9b04e425297b989321f86151fadcfc1.png
此时再运行就如预期了：
https://img-blog.csdnimg.cn/img_convert/26940c01e0d641e41784c8f825091e40.png
Grid组件先容：
对于这个页面，它就是由Grid组件来实现的：
https://img-blog.csdnimg.cn/img_convert/03e695743cb03f19b79b2635692f53a2.png
它是一种网格容器，由“行”和“列”所分割的单元格组成，我们通过指定不同“项目”地点的单元格就可以做出各种各样的结构。
定义：
https://img-blog.csdnimg.cn/img_convert/3b199f623bbb54ca3180c525b44a7740.png
其中它跟List组件雷同，需要搭配着子组件GridItem来使用，其实现在最新的参数有2个了：
https://img-blog.csdnimg.cn/img_convert/1a8dac268d10c90e9339251befb5181b.png
这块未来用到再说，现在先整体把官方的教程给学完。
属性：
重要属性如下：
https://img-blog.csdnimg.cn/img_convert/9d87d3a6cf2eed02d151152cb3c9ccca.png
下面具体来学习一下。
columnsTemplate：
当我们不设置时，默认是1列，它使用的单位是fr，fr是分别网格的，比方'1fr 1fr 2fr'是将父组件分3行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份，如下：
https://img-blog.csdnimg.cn/img_convert/f66e5a2531555cce8f5871902249d716.png
rowsTemplate：
这个也很好明白，如果设置成“1fr 2fr 1fr”时，其样式就是这样：
https://img-blog.csdnimg.cn/img_convert/a92ca4e2069792e5901b899e02f9d755.png
columnsGap：
它是用来设置列的间距，如橘黄色所示：
https://img-blog.csdnimg.cn/img_convert/7808c72ffa47a8ab24876156ce34eed9.png
rowsGap：
它则是用来设置行的间距：
https://img-blog.csdnimg.cn/img_convert/fbccf1879e45a786d94d01264a224999.png
使用Grid组件构建网格：
相识了Grid组件的根本使用之后，下面来看这么一个界面如何使用它来进行构建：
https://img-blog.csdnimg.cn/img_convert/281c98372d4be4a368085714e88d6531.png
定义数据对象：
网格结构中的每一项内容是由两部分组成：
https://img-blog.csdnimg.cn/img_convert/cc398bfd8e32b875e89bf496ea2b0a1c.png
所以可以定义如下：
https://img-blog.csdnimg.cn/img_convert/a9a4fc330837b197f20517bb226e1be2.png
创建网格数据数组：
接下来再来初始化网格数据数组：
https://img-blog.csdnimg.cn/img_convert/fb7fa737efbda246fa7f730106191d09.png
构建列表：
其构建细节跟之前的List组件雷同，如下：
https://img-blog.csdnimg.cn/img_convert/2c4af1a1be9285abf7cdf1bf80a1dbb3.png
比如好明白。
构建可滚动的网格：
在上面实现的网格内容是不能滚动的，那偶然是需要固定高宽，其多余的内容需要能够滚动展示，所以下面来看一下如何来实现，这里还是以这个网格效果为例让其支持上下滑动。
1、将rowsTemplate给去掉，因为要上下可滑动则不需要设置它了：
https://img-blog.csdnimg.cn/img_convert/29eb8994eadd28578d9eab1cf54144a3.png
也就是：
https://img-blog.csdnimg.cn/img_convert/33d354d9472305712844898df59d1994.png
2、在源数据中再增加两个测试数据，此时展示的样式就如下：
https://img-blog.csdnimg.cn/img_convert/dd0ce2378406e95e5f57a9acd128ffd1.png
其中新加的两个测试数据会填充到地区外，此时就可以通过上下滑动进行展示了。
Grid实践：
接下来则继续基于项目的代码来练一练Grid，来实现首页的这么一个效果：
https://img-blog.csdnimg.cn/img_convert/8223636ad8e8792f24e345c23f498481.png
1、备份MainPage.ets文件：
由于现在咱们还没有学习Tabs这样的控件（将在下一篇来学习），所以这里将MainPage.ets实现的我的页面的文件给备份一下：
https://img-blog.csdnimg.cn/img_convert/2d3a94e776e2166450b3ab6655ccb051.png
将此次操练的内容还是写在MainPage.ets当中，等下次学习了Tabs控件之后，再将“我的”和“首页”两页面的内容串联起来，实现跟官方一样的效果，一步步来。
2、预备标题：
https://img-blog.csdnimg.cn/img_convert/aa7329ba4fd8f766b09ca85a143c079b.png
https://img-blog.csdnimg.cn/img_convert/e605af986680b8378eed6672bd63f8e3.png
3、预备Swiper广告轮播的数据：
首先实现的是顶部的广告轮播：
https://img-blog.csdnimg.cn/img_convert/fe1acec063c317e4c3b0966a4480b507.png
先来预备一下广告的数据：
https://img-blog.csdnimg.cn/img_convert/e03720437a5484e821c8f84084eed65a.png
/**
* Get swiper image data.
*
* @return {Array<Resource>} swiperImages.
*/
getSwiperImages(): Array<Resource> {
let swiperImages: Resource[] = [
$r('app.media.fig1'),
$r('app.media.fig2'),
$r('app.media.fig3'),
$r('app.media.fig4')
];
return swiperImages;
} 4、显示广告轮播：
https://img-blog.csdnimg.cn/img_convert/1cdae82be19b1c17530e895ceb225b5a.png
运行一下：
https://img-blog.csdnimg.cn/img_convert/fe8ee52da68c5b2545479bb7df4db4c5.gif
结构有点问题，高度撑满整个屏幕高度了。。这里其实是这个属性造成的：
https://img-blog.csdnimg.cn/img_convert/28273f98212406c3a7781b3af9f0c638.png
将其去掉一下：
https://img-blog.csdnimg.cn/img_convert/fc3db87274a47893045263f8275e481c.png
https://img-blog.csdnimg.cn/img_convert/2e8be47e7d37bcb4ff2175cefebd03a3.png
高度是可以了，但是居中了，我想要让它顶部对齐调了半天木调好，最后这么调整了一下：
https://img-blog.csdnimg.cn/img_convert/d93362880a89321feee708c57d71d136.png
再运行：
https://img-blog.csdnimg.cn/img_convert/e892e828232d14839231836dadbb11e7.png
5、显示Grid分类：
接下来来搭建这块的地区：
https://img-blog.csdnimg.cn/img_convert/040f7d37d850d0ec6349dbf91cc83d39.png
1、预备分类数据:
先来预备分类的数据：
https://img-blog.csdnimg.cn/img_convert/41e933a017d5b702f9bf4f6bba79f39b.png
/**
* Get data of the first grid.
*
* @return {Array<PageResource>} firstGridData.
*/
getFirstGridData(): Array<ItemData> {
let firstGridData: ItemData[] = [
new ItemData($r('app.string.my_love'), $r('app.media.love')),
new ItemData($r('app.string.history_record'), $r('app.media.record')),
new ItemData($r('app.string.message'), $r('app.media.message')),
new ItemData($r('app.string.shopping_cart'), $r('app.media.shopping')),
new ItemData($r('app.string.my_goal'), $r('app.media.target')),
new ItemData($r('app.string.group'), $r('app.media.circle')),
new ItemData($r('app.string.favorites'), $r('app.media.favorite')),
new ItemData($r('app.string.recycle_bin'), $r('app.media.recycle'))
];
return firstGridData;
} 2、定制结构：
https://img-blog.csdnimg.cn/img_convert/3639a3200e0559ebefb6eb2097813d65.png
其中对于Grid这个组件有一些关键属性，可以参考上面，这里也贴一下：
https://img-blog.csdnimg.cn/img_convert/9d87d3a6cf2eed02d151152cb3c9ccca.png
此时运行看一下：
https://img-blog.csdnimg.cn/img_convert/a9dc881e8d30cb33a4f6f5d5b8bfa83b.png
木有圆角效果呀，这需要加一个背景就可以了：
https://img-blog.csdnimg.cn/img_convert/812ae48a2a808b1e9af878e9d398c2ce.png
6、列表显示：
1、先预备列表数据：
https://img-blog.csdnimg.cn/img_convert/cbdb7dded84c6d363dc0e3f5bc535222.png
2、预备标题:
https://img-blog.csdnimg.cn/img_convert/3dcc4f3b7d94eb926435e95e95e17a37.png
运行看一下：
https://img-blog.csdnimg.cn/img_convert/a8c16c3f772e958a262651f40970f2d9.png
左边少了间距，这块在之前会统一进行padding的设置的。
3、列表显示：
接下来处理列表的显示，还是使用Grid组件，如下：
https://img-blog.csdnimg.cn/img_convert/cf0300eaef1d4ef26ecd414aaa33ceca.png
Grid() {
ForEach(mainViewModel.getSecondGridData(), (secondItem: ItemData) => {
GridItem() {
Column() {
Text(secondItem.title)
.fontSize($r('app.float.normal_text_size'))
.fontWeight(FontWeight.Medium)
Text(secondItem.others)
.margin({ top: $r('app.float.home_list_margin') })
.fontSize($r('app.float.little_text_size'))
.fontColor($r('app.color.home_grid_fontColor'))
}
.alignItems(HorizontalAlign.Start)
}
.padding({ top: $r('app.float.home_list_padding'), left: $r('app.float.home_list_padding') })
.borderRadius($r('app.float.home_backgroundImage_borderRadius'))
.align(Alignment.TopStart)
.backgroundImage(secondItem.img)
.backgroundImageSize(ImageSize.Cover)
.width(CommonConstants.FULL_PARENT)
.height(CommonConstants.FULL_PARENT)
}, (secondItem: ItemData) => JSON.stringify(secondItem))
}
.width(CommonConstants.FULL_PARENT)
.height($r('app.float.home_secondGrid_height'))
.columnsTemplate('1fr 1fr')
.rowsTemplate('1fr 1fr')
.columnsGap($r('app.float.home_grid_columnsGap'))
.rowsGap($r('app.float.home_grid_rowGap'))
.margin({ bottom: $r('app.float.setting_button_bottom') }) 运行看一下：
https://img-blog.csdnimg.cn/img_convert/f58dae718d826c7cb1236288bcd14c25.png
其中可以看到，整体的左右边距都没有设置不悦目，所以这里统一设置一下：
https://img-blog.csdnimg.cn/img_convert/2b291f20fba9acdf41abd9f719bb32d0.png
再次运行：
https://img-blog.csdnimg.cn/img_convert/5b4ce9035497c22ba87c970b13b69873.png
总结：
这次重要是学习了学用的List和Grid组件的使用，比力简单，这块的熟练就是通过大量的练习，没有其它本领。在下次，则会使用Tabs组件，将之前所学的两个首页和我的页面进行一个串联，来实现官方的DEMO千篇同等的效果，加油~~
关注个人公众号，获得实时推送
https://img-blog.csdnimg.cn/img_convert/023e56b630510afcb0eaff9745a0c958.bmp
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]