鸿蒙系统应用开发项目化教程 课件 项目1、2 建立HarmonyOS开发环境、开发计算器

鸿蒙应用开发项目一建立HarmonyOS开发环境要成为一名HarmonyOS应用程序开发工程师，首先需要正确搭建HarmonyOS应用程序开发环境。正确搭建HarmonyOS应用程序开发环境有三个步骤，首先需要了解HarmonyOS系统架构和技术特性，然后根据现有操作系统选择合适的HarmonyOS开发工具进行安装和配置，最后通过创建一个简单的HarmonyOS应用程序来测试开发环境是否已经安装成果，鸿蒙SDK和模拟器能否正常使用。因此，本项目可以分解为认识HarmonyOS、安装DevEcoStudio工具和创建第一个HarmonyOS应用程序三个子任务。了解HarmonyOS的概念与特性；了解HarmonyOS与OpenHarmony的关系。知识目标能够搭建HarmonyOS开发环境；能够创建并运行HarmonyOS应用程序。能力目标阅读并理解软件技术文档；理解鸿蒙系统开发是突破技术壁垒，实现系统国产化的有效途径。素养目标教学目标任务一认识HarmonyOS应用开发岗位要求任务二

安装DevEcoStudioforHarmonyOS任务三

创建并运行第一个HarmonyOS移动应用程序目录CONTENTS任务一认识HarmonyOS应用开发岗位要求任务目标及重点难点知识清单01HarmonyOS的发展历程02HarmonyOS系统架构03HarmonyOS技术特性04HarmonyOS应用场景知识清单01HarmonyOS的发展历程HarmonyOS升级至2.0版本HarmonyOS4正式发布HarmonyOS3开发者预览版正式发布华为正式发布HarmonyOS2012年2019年2020年2021年2023年华为开始规划自有操作系统“鸿蒙”知识清单02HarmonyOS系统架构知识清单03HarmonyOS技术特性多种设备之间通过HarmonyOS可以实现硬件互助和资源共享，依赖的关键技术主要包括分布式软总线、分布式数据管理、分布式任务调度和分布式设备虚拟化等知识清单03HarmonyOS技术特性多种设备之间通过HarmonyOS可以实现硬件互助和资源共享，依赖的关键技术主要包括分布式软总线、分布式数据管理、分布式任务调度和分布式设备虚拟化等知识清单03HarmonyOS技术特性多种设备之间通过HarmonyOS可以实现硬件互助和资源共享，依赖的关键技术主要包括分布式软总线、分布式数据管理、分布式任务调度和分布式设备虚拟化等知识清单03HarmonyOS技术特性多种设备之间通过HarmonyOS可以实现硬件互助和资源共享，依赖的关键技术主要包括分布式软总线、分布式数据管理、分布式任务调度和分布式设备虚拟化等知识清单03HarmonyOS技术特性多种设备之间通过HarmonyOS可以实现硬件互助和资源共享，依赖的关键技术主要包括分布式软总线、分布式数据管理、分布式任务调度和分布式设备虚拟化等知识清单04HarmonyOS应用场景华为“1+8+N”战略产品示意图HarmonyOS是面向AIoT的下一代操作系统。AIoT=AI+IoT。AI（ArtificialIntelligence）就是人工智能的意思，IoTInternetofThings）就是物联网的意思，也就是说AIoT融合了这两项技术。AI的内核是智能化，IoT的内核是万物互联。HarmonyOS应用开发和安卓应用开发的区别任务实施HarmonyOS应用开发人员需求数量HarmonyOS应用开发人员岗位的招聘要求了解HarmonyOS发展历程、系统架构、技术特性和应用场景，可以帮助进一步分析HarmonyOS应用开发岗位要求。任务实施01HarmonyOS应用开发人员需求数量仅从智能手机应用来看，从HarmonyOS发布以来，迅速成为全球仅次于安卓、iOS外的第三大智能手机操作系统。决定一款操作系统成功的关键在于应用生态，其衡量指标就是用APP的数量，而APP数量的关键又在于开发者数量。开发者数量多，APP就多，生态才能建立起来。目前苹果iOS在全球开发者人数已经超2000万，遍布77个国家，开发的APP超过500万个，苹果iOS在中国就有440万开发者，开发出超过100万个APP。谷歌虽不曾公布具体的数据，但根据有关机构的分析，安卓开发者数量已经超过了苹果，APP数量也超过了苹果，也就是说开发者数量超过了2000万，APP数量也超过了500万。而目前HarmonyOS生态的开发者数量为120万，原生APP数量仅为300多个。虽然HarmonyOS兼容安卓应用，但为了建立鸿蒙应用生态，对HarmonyOS应用开发者的需求量是十分巨大的。任务实施02HarmonyOS应用开发和安卓应用开发的区别HarmonyOS能够兼容安卓应用。但HarmonyOS应用开发与安卓应用开发是有区别的。HarmonyOS是微内核设计，安卓是基于Linux的宏内核设计。为了兼容安卓应用，目前HarmonyOS包含与安卓相同的Linux内核。在未来HarmonyOS生态成熟后，将会去掉Linux内核，只保留鸿蒙微内核，最终实现理想的智能终端分布式系统。相对来说，微内核开发难度大，但是系统稳定性高。HarmonyOS目前可以兼容所有的安卓应用，同时支持等多终端设备。任务实施03HarmonyOS应用开发人员岗位的招聘要求15423熟悉JavaScript/Typescript、React、鸿蒙HiLink、FAJS开发框架（或微信小程序原生框架）、或类似状态管理组件等具有良好编码风格，有较强的独立工作能力和团队合作精神思路清晰，思维敏捷，快速的学习能力熟悉Android或者iOS等其他移动平台应用开发能根据产品定义开发鸿蒙系统的应用任职要求任务拓展OpenHarmony和HarmonyOS有什么区别常见问题及其解决方法了解HarmonyOS系统1学习编程语言和工具2掌握HarmonyOS的UI框架和设计理念3迁移现有Android应用4开发新的HarmonyOS应用5持续学习和跟进6如何从Android开发岗位迁移到HarmonyOS开发岗位任务小结完成的任务学到的知识HarmonyOS发展历程HarmonyOS系统架构HarmonyOS技术特性HarmonyOS应用场景通过本任务认识HarmonyOS，明确鸿蒙应用开发岗位要求，了解OpenHarmony和HarmonyOS的区别，为后续搭建鸿蒙开发环境和应用开发打下了基础。任务二安装DevEcoStudioforHarmonyOS任务目标及重点难点知识清单01DevEcoStudio工具HUAWEIDevEcoStudio（以下简称DevEcoStudio）是基于IntelliJIDEACommunity开源版本打造，面向华为终端全场景多设备的一站式集成开发环境（IDE），为开发者提供工程模板创建、开发、编译、调试、发布等E2E的HarmonyOS应用/服务开发。通过使用DevEcoStudio，开发者可以更高效的开发具备HarmonyOS分布式能力的应用/服务，进而提升创新效率。DevEco

Studio的特点知识清单02HarmonyOSSDK及工具链安装DevEcoStudio任务实施下载DevEcoStudio配置DevEcoStudio任务实施01下载DevEcoStudio/consumer/cn/deveco-studio/archive/任务实施02安装DevEcoStudio（1）Windows环境。下载完成后，双击下载的“deveco-studio-xxxx.exe”，进入DevEcoStudio安装向导，在如下安装选项界面勾选DevEcoStudio后，点击Next，直至安装完成。（2）macOS环境。下载完成后，双击下载的“deveco-studio-xxxx.dmg”软件包。在安装界面中，将“DevEco-Studio.app”拖拽到“Applications”中，等待安装完成。任务实施03配置DevEcoStudioHarmonyOS应用/服务支持APIVersion4～APIVersion9，首次使用DevEcoStudio，该工具的配置向导会引导用户下载SDK及工具链。配置向导默认下载APIVersion9的SDK及工具链，如需下载APIVersion4～APIVersion8的SDK及工具链，可在工程配置完成后，进入HarmonyOSSDK界面手动下载任务实施03配置DevEcoStudio运行已安装的DevEcoStudio，若是首次使用，则选择Donotimportsettings单选按钮，单击OK按钮安装Node.js与Ohpm。可以指定本地已安装的Node.js或Ohpm（Node.js版本要求为v14.19.1及以上，且低于v17.0.0；对应的npm版本要求为6.14.16及以上）路径位置在SDKSetup界面单击文件夹按钮，设置HarmonyOSSDK存储路径（HarmonyOSSDK存储路径中不能包含中文字符）在弹出的SDK下载信息界面中单击Next按钮，并在弹出的HarmonyOSSDKLicenseAgreement界面中阅读License协议，须同意License协议后，单击Next按钮开始下载SDK等待Node.js、Ohpm和SDK下载完成后，单击Finish按钮，进入DevEcoStudio欢迎页12345任务拓展

DevEcoStudio开发环境依赖于网络环境，需要连接网络才能确保工具的正常使用。一般来说，如果使用的是个人或家庭网络，那么是不需要配置代理信息的；只有在部分企业网络受限的情况下，才需要配置代理信息。

如果首次使用DevEcoStudio，那配置向导中会出现SetupHTTPProxy界面，如果用户通过代理服务器上网，可以通过配置代理的方式来解决，包括配置DevEcoStudio代理、npm代理和Ohpm代理。配置DevEcoStudio代理配置NPM代理配置Ohpm代理常见问题及其解决方法HarmonyOSSDK无法安装

修改DevEcoStudio快捷方式的兼容性，以管理员身份运行此程序任务小结完成的任务学到的知识DevEcoStudio工具HarmonyOSSDK及工具链在本任务中，完成了DevEcoStudio的安装与配置。以管理员身份启动DevEcoStudio能正常进入开发工具主界面，确保HarmonyOSSDK和相关工具已经正确安装并配置，表明任务测评通过，这样就为后续应用的开发搭建了必需的开发环境任务三创建并运行第一个HarmonyOS移动应用程序任务目标及重点难点知识清单01HarmonyOS应用/服务开发流程使用DevEcoStudio，只需要按照如下几步，即可轻松开发并上架一个HarmonyOS应用/服务到华为应用市场开发HarmonyOS应用/服务使用DevEcoStudio开发应用或者服务发布HarmonyOS应用/服务HarmonyOS应用/服务开发一切就绪后，需要将应用发布至华为应用市场开发准备注册一个华为开发者账号，并完成实名认证运行、调试和测试HarmonyOS应用/服务HarmonyOS应用/服务开发完成后，可以使用真机进行调试，或者使用模拟器进行调试使用Previewer工具预览程序界面任务实施创建HelloWorld项目使用模拟器运行HelloWorld任务实施01创建HelloWorld项目（1）打开DevEcoStudio，在欢迎页点击CreateProject，创建一个新工程；（2）根据工程创建向导，选择创建Application应用或AtomicService原子化服务；（3）填写工程相关信息，保持默认值即可；（4）工程创建完成后，DevEcoStudio会自动进行工程的同步。任务实施02使用Previewer工具预览程序运行效果（1）在HelloWorld项目左边目录结构中找到Index.ets文件并打开（2）单击右侧边框栏中的Previewer工具，可以看到程序运行效果任务实施03使用远程模拟器运行HelloWorld（1）在DevEcoStudio菜单栏中执行Tools→DeviceManager，找到远程模拟器；（2）在RemoteEmulator标签中单击SignIn按钮，弹出华为开发者联盟账号（实际一般用“账号”，软件中通常为“帐号”）登录界面，输入已实名认证的华为开发者联盟账号的用户名和密码进行登录；（3）成功登录后，单击界面中的“允许”按钮进行授权；（4）在弹出的设备列表中，选择设备P50，并单击启动按钮，运行远程模拟器；（5）单击DevEcoStudio工具栏中的图标运行项目，或者使用默认快捷键<Shift+F10>（macOS为<Ctrl+R>HarmonyOS）运行项目；（6）DevEcoStudio会启动HarmonyOS应用/服务的编译构建，完成后HarmonyOS应用/服务即可运行在远程模拟器上。任务实施03使用远程模拟器运行HelloWorld任务拓展配置NPM代理配置Ohpm代理HarmonyOSAPP工程结构常见问题及其解决方法输入华为账号开发者联盟账号后，未出现“允许”按钮，浏览器界面无跳转

使用浏览器登录华为帐号后，如果帐号已经实名认证，但还是未出现授权的“允许”按钮，浏览器界面也未跳转或提示。

出现该问题的原因可能是浏览器不兼容导致，模拟器登录授权在Chrome、IE11和Safari浏览器中进行过充分验证，建议您将默认浏览器设置为其中一种。

以Windows10为例，打开控制面板>程序>默认程序>设置默认程序，更改或设置默认浏览器任务小结完成的任务学到的知识HarmonyOS应用/服务开发流程通过此任务，能够运行第一个HarmonyOS移动应用程序，且能够运用Previewer工具和远程模拟器查看界面运行效果。特别注意的是，远程模拟器需要实名认证的华为开发者联盟账号登录以后才能使用，推荐使用个人银行卡或者身份证进行实名认证。——感谢观看——THANKS长沙民政职业技术学院鸿蒙应用开发开发计算器本项目需要实现一个简单的计算器应用。该应用可进行简单的加、减、乘、除运算；单击C按钮可清除结果显示区；输入数字和运算符后可即时运算；输入等号后，可计算出结果并显示在结果区。项目二开发计算器任务一实现计算器界面任务二

实现计算器计算逻辑目录CONTENTSPART-01工程中核心文件的关系工程中核心文件的关系新建一个工程MyCal,程序将默认生成如右图的目录结构，其中entry是项目下的一个工程模块。有几个文件需要关注，分别是：module.json5、EntryAbility.ts、Index.ets。工程中核心文件的关系module.json5是模块配置文件。一个应用里可以有多个Ability，每次在工程里通过右键新建一个ability，该配置文件将新增一个ability配置。但只有一个Ability对象可以将"skills"的值设置为{"entities":["entity.system.home"],"actions":["action.system.home"]}，代表该Ability对象为程序启动后第一个加载的Ability。工程中核心文件的关系UIAbility组件是系统调度的基本单元，为应用提供绘制界面的窗口EntryAbility.ts中以on开头的方法都是生命周期函数。其中onWindowStageCreate通过windowStage.loadContent方法指明需要加载的页面文件工程中核心文件的关系打开pages/Index.ets，Index.ets文件由ArkTS语言编写。应用的页面布局都在后缀为ets的文件中完成Build()方法中，可以完成页面的布局。注意：build方法里只能由一个根布局。比如右图中，Column()是build()的直接孩子，它没有兄弟，这里的Column(）就是一个列布局，是本页面的唯一的根布局工程中核心文件的关系@Entry、@Component和@State都是装饰器。@Component表示这是个自定义组件；@Entry则表示这是个入口组件；@State表示这是组件中的状态变量，这个变量变化会触发UI刷新。ArkTS中默认内置的基础组件、容器组件、媒体组件、绘制组件、画布组件等各种组件，开发者可以直接调用，如示例中的Column、Text、Divider、Button等。工程中核心文件的关系@Component实现自定义组件；@Entry则表示这是个入口组件；PART-02常见布局常见布局弹性布局栅格布局网格布局层叠布局12345线性布局常见布局—线性布局线性布局(LinearLayout)是开发中最常用的布局。线性布局的子组件在线性方向上（水平方向和垂直方向）依次排列。Column容器内子组件按照垂直方向排列，Row组件中，子组件按照水平方向排列。根据不同的排列方向，选择使用Row或Column容器创建线性布局，通过调整space，alignItems，justifyContent属性调整子组件的间距，水平垂直方向的对齐方式。常见布局—线性布局space的作用及使用方法常见布局—线性布局space的作用及使用方法常见布局—线性布局alignItems的作用及使用方法常见布局—线性布局justifyContent的作用及使用方法在线性布局下，常用空白填充组件Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。自适应拉伸

@Entry@ComponentstructBlankExample{build(){Column(){Row(){Text('Bluetooth').fontSize(18)Blank()Toggle({type:ToggleType.Switch,isOn:true})}.backgroundColor(0xFFFFFF).borderRadius(15).padding({left:12}).width('100%')}.backgroundColor(0xEFEFEF).padding(20).width('100%')}}常见布局—线性布局自适应缩放自适应缩放是指在各种不同大小设备中，子组件按照预设的比例，尺寸随容器尺寸的变化而变化。第一种方法：父容器尺寸确定时，设置了layoutWeight属性的子组件与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，在任意尺寸设备下，自适应占满剩余空间。第二种方法：父容器尺寸确定时，使用百分比设置子组件以及兄弟组件的width宽度，可以保证各自元素在任意尺寸下的自适应占比。常见布局—线性布局自适应缩放第一种方法：父容器尺寸确定时，设置了layoutWeight属性的子组件与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，在任意尺寸设备下，自适应占满剩余空间。Column(){Text('1:2:3').width('100%')Row(){Column(){Text('layoutWeight(1)').textAlign(TextAlign.Center)

}.layoutWeight(2).backgroundColor(0xffd306).height('100%')

Column(){Text('layoutWeight(2)').textAlign(TextAlign.Center)

}.layoutWeight(4).backgroundColor(0xffed97).height('100%')Column(){Text('layoutWeight(6)').textAlign(TextAlign.Center)

}.layoutWeight(6).backgroundColor(0xffd306).height('100%')}.backgroundColor(0xffd306).height('30%')}常见布局—线性布局自适应缩放第二种方法：父容器尺寸确定时，使用百分比设置子组件以及兄弟组件的width宽度，可以保证各自元素在任意尺寸下的自适应占比。Column(){Row(){Column(){Text('leftwidth20%').textAlign(TextAlign.Center)

}.width('20%').backgroundColor(0xffd306).height('100%')Column(){Text('centerwidth50%').textAlign(TextAlign.Center)

}.width('50%').backgroundColor(0xffed97).height('100%')

Column(){Text('rightwidth30%').textAlign(TextAlign.Center)

}.width('30%').backgroundColor(0xffd306).height('100%')}.backgroundColor(0xffd306).height('30%')}常见布局—线性布局常见布局—层叠布局层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。通过层叠容器Stack实现，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素显示。对齐方式设置子元素在容器内的对齐方式。支持左上（TopStart），上中（Top），右上（TopEnd），左（Start），中（Center），右（End），左下（BottomStart），中下（Bottom），右下（BottomEnd）九种对齐方式Stack({alignContent:Alignment.BottomStart}){…}常见布局—层叠布局层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。通过层叠容器Stack实现，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素显示。Z序控制Stack容器中兄弟组件显示层级关系可以通过zIndex属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。

Stack({alignContent:Alignment.BottomStart}){Column(){Text('Stack子元素1').fontSize(20)}.width(100).height(100).backgroundColor(0xffd306).zIndex(2)Column(){Text('Stack子元素2').fontSize(20)}.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)Column(){Text('Stack子元素3').fontSize(20)}.width(200).height(200).backgroundColor(Color.Grey)}.margin({top:100}).width(350).height(350).backgroundColor(0xe0e0e0)常见布局—弹性布局弹性布局（Flex布局）是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子组件进行排列、对齐和分配空白空间。容器：Flex组件作为Flex布局的容器，用于设置布局相关属性。子组件：Flex组件内的子组件自动成为布局的子组件。主轴：Flex组件布局方向的轴线，子组件默认沿着主轴排列。主轴开始的位置称为主轴起始端，结束位置称为主轴终点端。交叉轴：垂直于主轴方向的轴线。交叉轴起始的位置称为交叉轴首部，结束位置称为交叉轴尾部。几个重要概念常见布局—弹性布局创建一个Flex({direction:FlexDirection.Row}){…}为例，主轴方向为Row,代表横向。交叉轴为纵向。常见布局—弹性布局弹性布局可通过Flex组件提供的Flex接口创建。如下：Flex(options?:{direction?:FlexDirection,wrap?:FlexWrap,justifyContent?:FlexAlign,alignItems?:ItemAlign,alignContent?:FlexAlign})，参数direction决定主轴的方向，即子组件的排列方向。可选值有Row、RowReverse、Column、ColumnReverse弹性布局的换行方式常见布局—弹性布局默认情况下，子组件在Flex容器中都排在一条线（又称"轴线"）上。通过wrap参数设置子组件换行方式。可选值有：FlexWrap.NoWrap（默认值）：不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度。FlexWrap.Wrap：换行，每一行子组件按照主轴方向排列。FlexWrap.WrapReverse：换行，每一行子组件按照主轴反方向排列。常见布局—弹性布局FlexWrap.NoWrap（默认值）：不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度。弹性布局的换行方式常见布局—弹性布局弹性布局的换行方式FlexWrap.Wrap：换行，每一行子组件按照主轴方向排列。FlexWrap.WrapReverse：换行，每一行子组件按照主轴反方向排列。常见布局—弹性布局弹性布局的换行方式主轴对齐：通过justifyContent参数设置在主轴方向的对齐方式，存在下面六种情况常见布局—弹性布局弹性布局的换行方式交叉轴对齐：可以通过Flex组件的alignItems参数设置子组件在交叉轴的对齐方式ItemAlign.Start：交叉轴方向首部对齐ItemAlign.Center：交叉轴方向居中对齐ItemAlign.End：交叉轴方向底部对齐交叉轴方向常见布局—弹性布局弹性布局的换行方式交叉轴对齐：可以通过Flex组件的alignItems参数设置子组件在交叉轴的对齐方式ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸ItemAlign.Baseline：交叉轴方向文本基线对齐交叉轴方向常见布局—弹性布局弹性布局的换行方式子组件的alignSelf属性也可以设置子组件在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems默认配置

Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){//容器组件设置子组件居中Text('alignSelfStart').width('25%').height(80)

.alignSelf(ItemAlign.Start)//子组件自己设置为首部对齐.backgroundColor(0xF5DEB3)}.width('90%').height(220).backgroundColor(0xAFEEEE)常见布局—弹性布局使用弹性布局，可以实现子组件沿水平方向排列，两端对齐，子组件间距平分，竖直方向上子组件居中的效果

@Entry@ComponentstructFlexExample{build(){Column(){Column({space:5}){Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){Text('1').width('30%').height(50).backgroundColor(0xF5DEB3)Text('2').width('30%').height(50).backgroundColor(0xD2B48C)Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)}.height(70).width('90%').backgroundColor(0xAFEEEE)}.width('100%').margin({top:5})}.width('100%')}}常见布局—网格布局网格布局（GridLayout）是自适应布局中一种重要的布局，具备较强的页面均分能力，子组件占比控制能力。通过Grid容器组件和子组件GridItem实现，Grid用于设置网格布局相关参数，GridItem定义子组件相关特征（1）容器组件尺寸发生变化时，所有子组件以及间距等比例调整，实现布局的自适应能力。（2）支持自定义网格布局行数和列数，以及每行每列尺寸占比。（3）支持设置网格布局中子组件的行列间距。（4）支持设置子组件横跨几行或者几列。优势常见布局—网格布局行列数量占比：通过Grid的组件的columnsTemplate和rowTemplate属性设置网格布局行列数量与尺寸占比。

Grid(){ForEach(this.Number,(num:string)=>{GridItem(){Text(`列${num}`).fontSize(16).textAlign(TextAlign.Center).backgroundColor(0xd0d0d0).width('100%').height('100%').borderRadius(5)}})

}.columnsTemplate('1fr1fr1fr1fr').rowsTemplate('1fr').columnsGap(10).rowsGap(20).width('90%').backgroundColor(0xF0F0F0).height(100)一行四列常见布局—网格布局通过layoutDirection可以设置网格布局的主轴方向，决定子组件的排列方式。可选值包括Row，RowReverse，Column，ColumnReverse四种情况。排列方式常见布局—网格布局行列间距columnsGap用于设置网格子组件GridItem垂直方向的间距，rowsGap用于设置GridItem水平方向的间距Grid().columnsTemplate('1fr1fr1fr1fr').columnsGap(10).rowsGap(20)常见布局—网格布局网格子组件GridItem设置子组件横跨多行时，通过rowStart设置子组件起始行编号，rowEnd设置终点行编号。当rowStart值与rowEnd值相同时，子组件只占一个网格Grid(){GridItem(){Text('4').fontSize(16).textAlign(TextAlign.Center).textStyle()

}.columnStart(4).columnEnd(5)//4从第四列到第五列}.columnsTemplate('1fr1fr1fr1fr1fr').rowsTemplate('1fr').columnsGap(10).rowsGap(20).width('90%').backgroundColor(0xF0F0F0).height('200vp').layoutDirection(GridDirection.Column)一行五列，第四列做了列合并常见布局—网格布局网格子组件GridItem设置子组件横跨多行时，通过rowStart设置子组件起始行编号，rowEnd设置终点行编号。当rowStart值与rowEnd值相同时，子组件只占一个网格Grid(){

GridItem(){Text('5').fontSize(16).textAlign(TextAlign.Center).textStyle()

}.rowStart(2).rowEnd(3)//5子组件从第二行到第三行}.columnsTemplate('1fr').rowsTemplate(‘1fr1fr1fr').columnsGap(10).rowsGap(20).width('90%').backgroundColor(0xF0F0F0).height('200vp').layoutDirection(GridDirection.Column)三行一列，第二行做了行合并PART-03常见组件常见组件组件是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。组件类型主要组件基础组件Blank、Button、Checkbox、CheckboxGroup、DataPanel、DatePicker、Divider、Gauge、Image、ImageAnimator、LoadingProgress、Marquee、Navigation、PatternLock、PluginComponent、Progress、QRCode、Radio、Rating、RemoteWindow、RichText、ScrollBar、Search、Select、Slider、Span、Stepper、StepperItem、Text、TextArea、TextClock、TextInput、TextPicker、TextTimer、TimePicker、Toggle、Web、XComponent容器组件AbilityComponent、AlphabetIndexer、Badge、Column、ColumnSplit、Counter、Flex、、GridContainer、GridCol、GridRow、Grid、GridItem、List、ListItem、ListItemGroup、Navigator、Panel、Refresh、RelativeContainer、Row、RowSplit、Scroll、SideBarContainer、Stack、Swiper、Tabs、TabContent媒体组件Video绘制组件Circle、Ellipse、Line、Polyline、Polygon、Path、Rect、Shape画布组件Canvas常见组件组件的创建都是以组件名开头，接一对英文圆括号，括号内是组件的参数，在括号外可级联调用组件的属性方法和事件方法。以Text组件为例：Text('你好').fontSize(60).width('95%').height('100%')组件的创建常见组件组件的创建Text组件的创建语法：Text(content?:string|Resource)。参数说明如表参数名参数类型必填参数描述contentstring|Resource否文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。默认值：''常见组件所有组件有一些通用属性，比如尺寸设置、位置设置、边框设置、背景设置等。名称参数说明描述widthLength设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围heightLength设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围paddingPadding|Length设置内边距属性。参数为Length类型时，四个方向内边距同时生效。默认值：0padding设置百分比时，上下左右内边距均以父容器的width作为基础值。marginMargin|Length设置外边距属性。参数为Length类型时，四个方向外边距同时生效。默认值：0margin设置百分比时，上下左右外边距均以父容器的width作为基础值alignAlignment设置元素内容在元素绘制