鸿蒙应用开发快速学习指南(初级篇-5 从简单的页面开始)

从简单的页面开始

第五课：从简单的页面开始

本课的内容并不复杂，且从本课开始，会更加注重代码，即普通码农真正关注的内容从本课开始。依旧从习题开始。

判断题

1. Button作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮，其类型包括胶囊按钮、圆形按钮、普通按钮。

• 正确(True)
• 错误(False)

看起来很合理的，但是按钮是否有分为这几个种类我不是很清楚，有没有表单提交的类型或者其他的类型不清楚，暂时选错误，但是没能拿下，答案是正确，记着就好了。

2. 对于包含文本元素的组件，如：Text、Span、Button、TextInput等，使用fontFamily设置字体时，参数类型只能是string，当使用多个字体时，用“，”进行分割，按顺序生效。

• 正确(True)
• 错误(False)

在css中fontFamily需要使用多种字体可以用数组，选错误，拿下！

3. 在Column容器中的子组件默认是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向，在Row容器中的组件默认是按照从左到右的水平方向布局的，其主轴的方向是水平方向。

• 正确(True)
• 错误(False)

常识，正确，拿下！

单选题

1. 关于ForEach循环渲染的描述错误的是：

• A. arr数据源，为Array类型的数组
• B. itemGenerator为子组件生成函数，为数组中的每个元素创建对应的组件
• C. keyGenerator为数组项唯一键值生成函数，为数据源arr的每个数组项生成唯一且持久的键值，函数返回值为开发者自定义的键值生成规则
• D. ForEach基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且可以返回任意子组件

前三个看起来都比较合理，D选项中说可以返回任意子组件则看起来不合理，暂时不知道现在主流前端框架有类似的实现。选D，拿下！

2. Image不支持哪种图片格式：

• A. svg
• B. eps
• C. gif
• D. bmp

真不知道，蒙个B，拿下了，记住就行。

3. 下面哪个组件层次结构是错误的：

• A. List>ListItem>Column
• B. Column>List>ListItem
• C. Grid>Row>GridItem
• D. Grid>GridItem

在web中好像没有这种严格的限制，但是按照逻辑，grid和flex是两种不同的布局，C很明显有问题，拿下！

4. 需要在主轴上使第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半，通过下列哪种方式设置：

• A. justifyContent(FlexAlign.SpaceBetween)
• B. justifyContent(FlexAlign.SpaceAround)
• C. justifyContent(FlexAlign.SpaceEvenly)
• D. justifyContent(FlexAlign.Center)

按照其意思，翻译成英语B更有感觉，但是作者并非专业前端开发，不好描述这种奇怪的感觉，拿下！

多选题

1. 关于Grid组件的相关描述正确的是：

• A. 网格布局是由“行”和“列”分割的单元格所组成，具有较强的页面均分能力，子组件占比控制能力
• B. Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比
• C. 设置网格容器的步骤：准备待循环的数据源、设置网格容器Grid、利用ForEach对数据进行渲染
• D. 如果设置的是columnsTemplate，Grid的滚动方向为水平方向；如果设置的是rowsTemplate，Grid的滚动方向为垂直方向
• E. Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件

对于选项A来说就是简单说了下grid布局的优势，没有问题；对于选项B，一开始想的如果这样设计岂不是和flex布局类似，暂时存疑；对于C，没有什么问题；对于选项D，虽然其逻辑有问题，但是说明了这种设计是存在的，那么B也选上；对于选项E，很合理，没有问题；最后选择ABCE，拿下！

2. 关于Swiper组件的相关描述正确的是：

• A. 当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面
• B. Swiper通过设置autoPlay属性，控制是否自动轮播子组件
• C. Swiper支持水平和垂直方向上进行轮播，主要通过vertical属性控制
• D. Swiper支持手指滑动、点击导航点和通过控制器三种方式切换页面

本题是关于轮播组件的内容，描述都比较符合主流设计，全选，拿下！

3. 关于List组件的相关描述正确的是：

• A. List除了提供垂直和水平布局能力、还提供了自适应交叉轴方向上排列个数的布局能力
• B. 当列表项达到一定数量，内容超过屏幕大小时，可以提供滚动功能。它适用于呈现同类数据类型或数据类型集
• C. List提供了divider属性用于给列表项之间添加分隔线。在设置divider属性时，可以通过strokeWidth和color属性设置分隔线的粗细和颜色
• D. List组件主轴默认是垂直方向，即默认情况下不需要手动设置List方向，就可以构建一个垂直滚动列表

解析同上，全选，拿下！

回顾

本课中出师不利，但是后续内容都对了，还是裸考一次通过，后续可以边开发边看组件文档，迅速下一节。

重点总结

附上组件文档