零基础快速上手HarmonyOS ArkTS开发5---从简单的页面开始2---使用List组件
接着继承往放学习页面布局的知识。最近发现之前学习这一章节的内容在官方已经被下了，替换成了另外一个案例了( https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101717497398588123)：https://img-blog.csdnimg.cn/img_convert/411639554b56023964e7456ad359517d.png
而且整个视频的风格也不一样了，先看看之前的这个美女讲师：
https://img-blog.csdnimg.cn/img_convert/6abb3cd1fb3e0c0a647ca92aa3b55e24.png
再看看如今的：
https://img-blog.csdnimg.cn/img_convert/c4f1dd293aa445d7a4cfcc0627a4ab84.png
哇塞，档次一看就不一样了，新的肯定是佳构，但是我这章学习才刚开始绘了个静态的登录界面呀，就想让我直接放弃治疗了~~只能说我学得如蜗牛般快，跟不上官方的步调。
还幸亏B站上搜到了当时整个系列的课程： https://space.bilibili.com/1785849877/channel/seriesdetail?sid=3844174
这也挺好，等我把旧的学完，再以最新的这个案例再举行巩固加深~~
在上一次搭建好登录的界面之后，这次则在登录界面成功之后，再来构建一下我的设置界面：
https://img-blog.csdnimg.cn/img_convert/270713d3e15411c1de71eff6f1134695.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/381cb457776eeffa56492e1213a3e6c4.png
关于这块的更多属性可以参考官方api文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5
循环渲染(ForEach)先容：
由于列表是有多个列表项，以是构建列表需要使用ForEach举行循环渲染，先看一下它的界说：
https://img-blog.csdnimg.cn/img_convert/d45a3448b6a404b3e8556501c8305ece.png
参数1：arr为需要迭代的数组；
参数2：itemGenerator为子组件天生函数；
参数3： keyGenerator为数组项唯一键值天生函数，它是一个可选项参数，但是为了使开发框架可以或许更好地辨认数组更改，提高性能，发起提供该参数。
使用List组件构建列表：
接下来看一下List组件详细的构建步调。
1、界说列表数据对象：用于封装列表项数据
https://img-blog.csdnimg.cn/img_convert/e8ae8d3bbd3a4decd7926e90d6b5658d.png
它由三个元素组件：一个图标，一个标题，一个菜单的状态(单选开关，照旧向右的可点击的)，以是可以界说如下对象：
https://img-blog.csdnimg.cn/img_convert/e8f200fa2c1ab2aba3b682af5c94f82a.png
2、创建列表数据数组：为列表创建数据源
https://img-blog.csdnimg.cn/img_convert/2e363125ec79e70dcd9d3b95d5487363.png
3、创建列表Item内容：构建列表项组件
接下来则需要来构建Item组件了，此时就需要使用到@Builder装饰器了(关于它可以参考上一篇)，
https://img-blog.csdnimg.cn/img_convert/9ad61e8bd1c92e85078295786778587f.png
这块的代码比较好理解，就不过多说明。
4、使用ForEach构建列表： 遍历数据源渲染列表项
最后就是来完成整个列表的渲染了，如下：
https://img-blog.csdnimg.cn/img_convert/626e91b6f5e205d30f868873aff744e3.png
5、List实践：
理论基础学完了之后，接下来则回到代码中来实现这么一个列表界面。
1、登录按钮增长点击事件：
在上一次搭建了一个登录的静态界面，这里先给登录按钮添加一个点击事件，登录之后再跳到既将要搭建的列表界面：
https://img-blog.csdnimg.cn/img_convert/ade8fc184d26a37805e80b68f9c7feee.png
https://img-blog.csdnimg.cn/img_convert/42da2585b769a13aa53ce0a41fba92f6.png
起首需要判断用户名和暗码是否输入了，假如用户没输入则给个非常提示，这里则需要界说两个装饰变量：
https://img-blog.csdnimg.cn/img_convert/ae6b69100ec7c4d99f7c2d8e068f48ff.png
而关于这个装饰器的作用可以参考，然后在文本输入框中需要添加文本的监听，如下：
https://img-blog.csdnimg.cn/img_convert/53eacd10c68f96690721b8a1b82d98df.png
此时就可以举行登录参数简单校验了：
https://img-blog.csdnimg.cn/img_convert/dd1c6066e744940f25ae6df392ffd527.png
此时运行看一下:
https://img-blog.csdnimg.cn/img_convert/cc9e602420afdfbe332b46c2a910be2a.gif
这里的登录就用延时来模拟一下了，由于登录是一个需要耗时的操纵，所有应该展示一个loading给用户举行等待，以是先界说一个loading的状态变量：
https://img-blog.csdnimg.cn/img_convert/e4765636c3fe8afd18f30bc3409e60ab.png
https://img-blog.csdnimg.cn/img_convert/158319ec2c9a71db25425c0d6fe651a7.png
此时运行看一下：
https://img-blog.csdnimg.cn/img_convert/6015c6cc490d35dd12c35cba206930fe.gif
接下来则新建一个首页用来举行登录跳转：
https://img-blog.csdnimg.cn/img_convert/be456ef797c7869fe61f8c71d90c9c86.png
此时要注意了，需要在这里注册一下：
https://img-blog.csdnimg.cn/img_convert/6f47b85b5688a708af9949fef154d437.png
此时就可以举行路由跳转了：
https://img-blog.csdnimg.cn/img_convert/ff6e7615ed9a0ef62446d749f846556a.png
其中router需要导入包：
https://img-blog.csdnimg.cn/img_convert/916cf92aa79bd54e2aac8d725825b7da.png
此时运行看一下结果：
https://img-blog.csdnimg.cn/img_convert/ad30e5268f0bab20302410ee7f477a83.gif
2、搭建我的列表界面：
1、标题处置惩罚：
https://img-blog.csdnimg.cn/img_convert/480fe562728ff83ea0fc8830789b8e18.png
起首用一个Scroll包裹一下，因为设置项通常的内容会超过一屏，以是需要让用户可以上下滑动：
https://img-blog.csdnimg.cn/img_convert/0d0bc5a7b2c4c89da9329de2cff76ed9.png
然后团体是垂直排列的，以是用Column包裹一下：
https://img-blog.csdnimg.cn/img_convert/18172bea0f67532cb3727270a40eeea3.png
然后弄一个标题文本控件：
https://img-blog.csdnimg.cn/img_convert/40faf337f604a5941dcb9b07f8dffb3c.png
此时运行看一下：
https://img-blog.csdnimg.cn/img_convert/c185b6ece163c4471b16f685deae974a.png
另外设置一下页面背景和左右间距：
https://img-blog.csdnimg.cn/img_convert/e93c4987ba22ff8c56dc0612f7bca018.png
此时运行，发现标题居中表现了：
https://img-blog.csdnimg.cn/img_convert/36d27d895477f0c8969ec3b1711bb499.png
此时需要在Text元素外面再包裹一层：
https://img-blog.csdnimg.cn/img_convert/6b9f53bc1311b46236834c0e6503bf72.png
再运行：
https://img-blog.csdnimg.cn/img_convert/6e487f15702eae702e3dc5d2a24133f4.png
2、用户明细地区：
https://img-blog.csdnimg.cn/img_convert/aafc690c2b51ec91b138c66ef89af54a.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') })
[*]1.
[*]2.
[*]3.
[*]4.
[*]5.
[*]6.
[*]7.
[*]8.
[*]9.
[*]10.
[*]11.
[*]12.
[*]13.
[*]14.
[*]15.
[*]16.
[*]17.
[*]18.
[*]19.
[*]20.
[*]21.
此时运行看一下：
https://img-blog.csdnimg.cn/img_convert/d4ae1a32b0fc4b1dfff6fb1d7975e043.png
再设置一下地区的圆角：
https://img-blog.csdnimg.cn/img_convert/57b4f716a3e736789b44314f81a2f50e.png
https://img-blog.csdnimg.cn/img_convert/2ece9ed8129adab5b65ad82d8f57fcd8.png
3、准备列表数据：
接下来则需要来搭建开关列表了，这里先来准备好列表的数据，这里先新建一个viewmodel文件夹：
https://img-blog.csdnimg.cn/img_convert/c792c9538765241249a6d015cfb1b45d.png
然后新建一个列表类：
https://img-blog.csdnimg.cn/img_convert/5760d43593fbe0cedcc6251108ec2289.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;
}
}
[*]1.
[*]2.
[*]3.
[*]4.
[*]5.
[*]6.
[*]7.
[*]8.
[*]9.
[*]10.
[*]11.
[*]12.
[*]13.
[*]14.
[*]15.
[*]16.
[*]17.
[*]18.
[*]19.
[*]20.
[*]21.
[*]22.
[*]23.
然后就可以准备列表数据了，如下：
https://img-blog.csdnimg.cn/img_convert/ee17248c8929e29f036c995d9fabdfa3.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();
[*]1.
[*]2.
[*]3.
[*]4.
[*]5.
[*]6.
[*]7.
[*]8.
[*]9.
[*]10.
[*]11.
[*]12.
[*]13.
[*]14.
[*]15.
[*]16.
[*]17.
[*]18.
[*]19.
[*]20.
[*]21.
[*]22.
[*]23.
[*]24.
[*]25.
[*]26.
4、选项开关地区：
此时咱们就可以这次新学的List组件来搭建列表界面了，如下：
https://img-blog.csdnimg.cn/img_convert/ba2c2f47ec978e694fea2524fc1ef5f5.png
运行看一下：
https://img-blog.csdnimg.cn/img_convert/7dd4effb3792fb01e552b2da688a8741.png
发现这块没有间距：
https://img-blog.csdnimg.cn/img_convert/7a648c4c0564f499102ef6907b87edc8.png
这里可以加一个间距，如下：
https://img-blog.csdnimg.cn/img_convert/f28117a0237edfe0842c52cb82c07cf3.png
https://img-blog.csdnimg.cn/img_convert/24f5a4f27e39f96f1eefaf266a9953c0.png
接下来再来对列表项举行一个渲染：
https://img-blog.csdnimg.cn/img_convert/664fc61466bc1aff9196f20fb658732b.png
此时运行：
https://img-blog.csdnimg.cn/img_convert/da7939e68e2ffcadf229da84dd0ef33c.png
这个开关应该是居右的，这里又需要使用到flex布局了，如下：
https://img-blog.csdnimg.cn/img_convert/ff94172f01dbb7a700828c81e8d4ebce.png
这里需要用到上节所学的知识了，主轴方向上的对齐则需要使用justifyContent：
https://img-blog.csdnimg.cn/img_convert/22e305b3e2436154f99f0631416f6c4f.png
此时再运行：
https://img-blog.csdnimg.cn/img_convert/2d3fd2faef02057dfa6903efaa392c0b.png
最后，对于这个列表的渲染可以使用@Builder装饰器举行一下组件的封装，如下：
https://img-blog.csdnimg.cn/img_convert/192200b3f9ad40b5cac4996bb32ad3fc.png
https://img-blog.csdnimg.cn/img_convert/0287786d55d00f92a97f5a27a4c045fb.png
4、退出登录：
最后再弄一个退出登录的按钮：
https://img-blog.csdnimg.cn/img_convert/204252e6094dc3cbeae75b120350a684.png
此时运行一下：
https://img-blog.csdnimg.cn/img_convert/1abe200980d5c88a06b937f6275a7972.png
应该它的位置是在底部，那怎么调解一下呢？此时Blank()的本领就可以派上用场了：
https://img-blog.csdnimg.cn/img_convert/33dedc109e6a0946b7b6c54ba80b62c8.png
这块在上一节中也使用到了：
https://img-blog.csdnimg.cn/img_convert/5373e533a5cc0e756edd9da783add2e8.png
此时再运行就如预期了：
https://img-blog.csdnimg.cn/img_convert/e8f9c31bcdb9f64df1947fda0c72b3bf.png
Grid组件先容：
对于这个页面，它就是由Grid组件来实现的：
https://img-blog.csdnimg.cn/img_convert/e56fd0bef110ac0b696d0ef25c59b01a.png
它是一种网格容器，由“行”和“列”所分割的单元格构成，我们通过指定差异“项目”所在的单元格就可以做出各种各样的布局。
界说：
https://img-blog.csdnimg.cn/img_convert/7fd19e75ae19fbaf793437da025933b2.png
其中它跟List组件雷同，需要搭配着子组件GridItem来使用，其实现在最新的参数有2个了：
https://img-blog.csdnimg.cn/img_convert/f7fa2ea4fcacd6e0f6d6897a17458f8a.png
这块未来用到再说，现在先团体把官方的教程给学完。
属性：
重要属性如下：
https://img-blog.csdnimg.cn/img_convert/f8da13edd77e63e35583c31ee792875c.png
下面详细来学习一下。
columnsTemplate：
当我们不设置时，默认是1列，它使用的单位是fr，fr是划分网格的，例如'1fr 1fr 2fr'是将父组件分3行，将父组件答应的高分为4等份，第一行占1份，第二行占一份，第三行占2份，如下：
https://img-blog.csdnimg.cn/img_convert/d7226ae6079475f28d07658fb14e5edb.png
rowsTemplate：
这个也很好理解，假如设置成“1fr 2fr 1fr”时，其样式就是如许：
https://img-blog.csdnimg.cn/img_convert/e40e03284b657ab954053a813cd84312.png
columnsGap：
它是用来设置列的间距，如橘黄色所示：
https://img-blog.csdnimg.cn/img_convert/e74d46ff30bf744c22665f66fcc66240.png
rowsGap：
它则是用来设置行的间距：
https://img-blog.csdnimg.cn/img_convert/f042e8d657f5df5ec1375dcb95c6729a.png
使用Grid组件构建网格：
相识了Grid组件的基本使用之后，下面来看这么一个界面如何使用它来举行构建：
https://img-blog.csdnimg.cn/img_convert/af9e69975e3bad370883a1be44222afe.png
界说数据对象：
网格布局中的每一项内容是由两部分构成：
https://img-blog.csdnimg.cn/img_convert/62d7aa36bc7937597b2055dc824c769a.png
以是可以界说如下：
https://img-blog.csdnimg.cn/img_convert/cddc50c4872d62a870fc41e676159bc9.png
创建网格数据数组：
接下来再来初始化网格数据数组：
https://img-blog.csdnimg.cn/img_convert/26f236632571e5296a6ac6218aac0a54.png
构建列表：
其构建细节跟之前的List组件雷同，如下：
https://img-blog.csdnimg.cn/img_convert/6cd294e1014afd979013e794a73013be.png
好比好理解。
构建可滚动的网格：
在上面实现的网格内容是不能滚动的，那有时是需要固定高宽，其多余的内容需要可以或许滚动展示，以是下面来看一下如何来实现，这里照旧以这个网格结果为例让其支持上下滑动。
1、将rowsTemplate给去掉，因为要上下可滑动则不需要设置它了：
https://img-blog.csdnimg.cn/img_convert/55fc0adfa22ff4b3075673973a8dca4e.png
也就是：
https://img-blog.csdnimg.cn/img_convert/a5053e52116350fc456bbfe5ea47f1f8.png
2、在源数据中再增长两个测试数据，此时展示的样式就如下：
https://img-blog.csdnimg.cn/img_convert/f1c2d3ba35159cc5c27f3589762e051e.png
其中新加的两个测试数据会填充到地区外，此时就可以通过上下滑动举行展示了。
Grid实践：
接下来则继承基于项目的代码来练一练Grid，来实现首页的这么一个结果：
https://img-blog.csdnimg.cn/img_convert/28a5ecc4874cc007abcf9656a6ba02eb.png
1、备份MainPage.ets文件：
由于现在咱们还没有学习Tabs如许的控件(将在下一篇来学习)，以是这里将MainPage.ets实现的我的页面的文件给备份一下：
https://img-blog.csdnimg.cn/img_convert/5733fac399917f301583ce3e5c514d27.png
将此次操练的内容照旧写在MainPage.ets当中，等下次学习了Tabs控件之后，再将“我的”和“首页”两页面的内容串联起来，实现跟官方一样的结果，一步步来。
2、准备标题：
https://img-blog.csdnimg.cn/img_convert/923c7197a1e97a6d075d087645f966a6.png
https://img-blog.csdnimg.cn/img_convert/5afb0826ad05daf84664b929c7f73ed7.png
3、准备Swiper广告轮播的数据：
起首实现的是顶部的广告轮播：
https://img-blog.csdnimg.cn/img_convert/baad3916bd916959f30efa78b9b5da5d.png
先来准备一下广告的数据：
https://img-blog.csdnimg.cn/img_convert/c65596015891c6859ab0be03f121ad5e.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;
}
[*]1.
[*]2.
[*]3.
[*]4.
[*]5.
[*]6.
[*]7.
[*]8.
[*]9.
[*]10.
[*]11.
[*]12.
[*]13.
[*]14.
4、表现广告轮播：
https://img-blog.csdnimg.cn/img_convert/a93a314441f941722fd15254d28bdfef.png
运行一下：
https://img-blog.csdnimg.cn/img_convert/9ca4eb93fdcd2959bdca7515b950cf8c.gif
布局有点标题，高度撑满整个屏幕高度了。。这里其实是这个属性造成的：
https://img-blog.csdnimg.cn/img_convert/bdd8652bea7ea5dcf655ab011c7b4595.png
将其去掉一下：
https://img-blog.csdnimg.cn/img_convert/7c434ee73c4d7215752f6cbf9e03346e.png
https://img-blog.csdnimg.cn/img_convert/6e844177a52fa0737a185d4be0b1895b.png
高度是可以了，但是居中了，我想要让它顶部对齐调了半天木调好，最后这么调解了一下：
https://img-blog.csdnimg.cn/img_convert/4efe28774cc4177c583b4417fed5ea0f.png
再运行：
https://img-blog.csdnimg.cn/img_convert/1a6e1e4cba1b3922c505f32421da0b56.png
5、表现Grid分类：
接下来来搭建这块的地区：
https://img-blog.csdnimg.cn/img_convert/4526b1c7417e41557f9330171ec0eeec.png
1、准备分类数据:
先来准备分类的数据：
https://img-blog.csdnimg.cn/img_convert/8655b1c71911a4342cfa8d3eb14be518.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;
}
[*]1.
[*]2.
[*]3.
[*]4.
[*]5.
[*]6.
[*]7.
[*]8.
[*]9.
[*]10.
[*]11.
[*]12.
[*]13.
[*]14.
[*]15.
[*]16.
[*]17.
[*]18.
2、定制布局：
https://img-blog.csdnimg.cn/img_convert/ecf6196a7384161574d6dabcb45219a9.png
其中对于Grid这个组件有一些关键属性，可以参考上面，这里也贴一下：
https://img-blog.csdnimg.cn/img_convert/16e2c642bb388f75e15b640d4d784d92.png
此时运行看一下：
https://img-blog.csdnimg.cn/img_convert/a43450f5cb6cd27ff19a184d0a69ea89.png
木有圆角结果呀，这需要加一个背景就可以了：
https://img-blog.csdnimg.cn/img_convert/4b7041bfee9f8a9c6b0a10518901dc85.png
6、列表表现：
1、先准备列表数据：
https://img-blog.csdnimg.cn/img_convert/236a50d65309b79c4db3d3855fdecdce.png
2、准备标题:
https://img-blog.csdnimg.cn/img_convert/1555960d12a9506e06e13fcc1b330bfc.png
运行看一下：
https://img-blog.csdnimg.cn/img_convert/3e6005a4caf0e2f9b768fa68c431bcdd.png
左边少了间距，这块在之前会统一举行padding的设置的。
3、列表表现：
接下来处置惩罚列表的表现，照旧使用Grid组件，如下：
https://img-blog.csdnimg.cn/img_convert/ae3ba58bbdcc8b1cfe3b002a470070eb.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') })
[*]1.
[*]2.
[*]3.
[*]4.
[*]5.
[*]6.
[*]7.
[*]8.
[*]9.
[*]10.
[*]11.
[*]12.
[*]13.
[*]14.
[*]15.
[*]16.
[*]17.
[*]18.
[*]19.
[*]20.
[*]21.
[*]22.
[*]23.
[*]24.
[*]25.
[*]26.
[*]27.
[*]28.
[*]29.
[*]30.
运行看一下：
https://img-blog.csdnimg.cn/img_convert/5be1bc035b7e8772f15fad64d716445d.png
其中可以看到，团体的左右边距都没有设置不好看，以是这里统一设置一下：
https://img-blog.csdnimg.cn/img_convert/2bc12b5502f4f39dca4170853fbdd689.png
再次运行：
https://img-blog.csdnimg.cn/img_convert/dc054e3572b1d8720af7e7dd775184b9.png
总结：
这次重要是学习了学用的List和Grid组件的使用，比较简单，这块的纯熟就是通过大量的练习，没有其它本领。在下次，则会使用Tabs组件，将之前所学的两个首页和我的页面举行一个串联，来实现官方的DEMO一模一样的结果，加油~~
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]