《鸿蒙应用开发项目教程》全套教学课件

全套可编辑PPT课件

《鸿蒙应用开发基础》项目1搭建鸿蒙应用开发环境全套可编辑PPT课件

本课件是可编辑的正常PPT课件目录Contents项目1搭建鸿蒙应用开发环境一、课程介绍二、鸿蒙系统简介三、鸿蒙系统开发套件四、搭建鸿蒙开发环境五、拓展本课件是可编辑的正常PPT课件一、

课程介绍1、课程性质：专业课职业拓展模块（信创安全）。2、课时：64，学分：4学分。3、期末成绩=平时成绩（50%）+期末成绩（50%）

平时成绩=考勤（40%）+作业（40%）+课堂表现（20%）

期末考试=统一笔试

本课件是可编辑的正常PPT课件二、

鸿蒙系统简介1.鸿蒙系统发展历程华为从2012年开始规划自有操作系统，并在芬兰赫尔辛基设立智能手机研发中心。2019年8月9日，华为在开发者大会上发布了HarmonyOS1.0。2021年发布的HarmonyOS2.0版本正式覆盖到手机等移动终端。2022年7月，HarmonyOS3.0正式发布，万物互联成为其新标签。2023年8月，HarmonyOS4.0正式发布。2024年10月22日，华为正式发布华为原生鸿蒙系统（HarmonyOSNext）。本课件是可编辑的正常PPT课件二、

鸿蒙系统简介2.鸿蒙系统技术架构鸿蒙系统（HarmonyOS）的技术架构‌整体遵从分层设计，从下向上依次为：

内核层：采用多内核设计，支持针对不同资源受限设备选用适合的OS内核。

系统服务层：鸿蒙系统的核心能力集合，通过框架层对应用程序提供服务。框架层：为应用开发提供了C++、JavaScript(JS)等多语言的用户程序框架和能力（Ability）框架。应用层：直接面向用户，提供各种应用程序和服务。本课件是可编辑的正常PPT课件二、

鸿蒙系统简介鸿蒙技术特征：1.一套代码多端运行：即“一次开发，多端部署”，指一个工程，一次开发上架，多端按需部署，其目的是支撑开发者高效地开发多种终端设备上的应用。2.可分可合自由流转：在开发态，开发者通过业务解耦，把不同的业务拆分为多个模块。在部署态，开发者可以将一个或多个模块自由组合，打包成一个应用程序包（ApplicationPackage，AppPack）统一上架。在分发运行态，每个HAP都可以单独分发满足用户单一使用场景，也可以多个HAP组合分发满足用户更加复杂的使用场景。3.统一生态原生智能：能够支持手机、平板电脑、智能穿戴设备、智慧屏、车机等多种终端设备，为消费者带来更加便捷和全面的智能体验。本课件是可编辑的正常PPT课件三、

鸿蒙系统开发套件1．鸿蒙系统视觉设计套件2．鸿蒙应用开发语言ArkTS3．鸿蒙开发框架ArkUI4．鸿蒙方舟编译器5．鸿蒙集成开发环境6．鸿蒙测试套件7．鸿蒙应用发布套件8．鸿蒙软件开发工具包本课件是可编辑的正常PPT课件四、搭建鸿蒙系统开发环境搭建鸿蒙系统开发环境参见教材【项目实现】本课件是可编辑的正常PPT课件五、拓展鸿蒙在中国传统文化中象征着宇宙形成前的混沌状态，寓意着万物的起源和初始。代表着鸿蒙系统的基石作用。其次，鸿蒙在《庄子》等古代典籍中被描述为一个神仙，负责制作天地间的元气，这种神话色彩也赋予了鸿蒙神秘而强大的形象，象征着鸿蒙系统在技术上的创新。此外，鸿蒙代表着开源和包容，符合操作系统的定位，旨在实现多种设备的无缝连接。鸿蒙系统的出现为我国在操作系统这一关键基础软件领域实现自主可控提供了可能，降低了我国对外国操作系统的依赖，保障了国家信息安全和产业安全，体现了为国家战略需求服务、为民族复兴助力的家国情怀。本课件是可编辑的正常PPT课件《鸿蒙应用开发基础》学习进步本课件是可编辑的正常PPT课件《鸿蒙应用开发基础》项目2设计转盘式抽奖程序鸿蒙应用开发概述本课件是可编辑的正常PPT课件目录Contents鸿蒙应用开发概述一、鸿蒙应用程序包结构二、鸿蒙应用配置文件三、资源分类与访问方法四、拓展本课件是可编辑的正常PPT课件一、鸿蒙应用程序包结构鸿蒙应用程序泛指运行在基于鸿蒙系统之上的程序，为用户提供特定服务的程序，简称“应用”。一个应用所对应的软件包文件，称为“应用程序包”。鸿蒙应用程序包的结构在开发态、编译态、发布态等不同阶段是有区别的。本课件是可编辑的正常PPT课件一、鸿蒙应用程序包结构1.开发态包结构AppScope目录AppScope目录由DevEcoStudio自动生成，不可更改。Module目录Module目录名称可以由DevEcoStudio自动生成（比如entry、library等），也可以自定义。本课件是可编辑的正常PPT课件一、鸿蒙应用程序包结构1.开发态包结构配置文件：应用级配置信息app.json5（位于AppScope目录）配置文件，用于声明应用的全局配置信息，比如应用Bundle名称、应用名称、应用图标、应用版本号等。Module级配置信息module.json5（位于Module_name>src>main目录）配置文件，用于声明Module基本信息、支持的设备类型、所含的组件信息、运行所需申请的权限等。本课件是可编辑的正常PPT课件一、鸿蒙应用程序包结构1.开发态包结构ArkTS源码文件ArkTS源码文件（位于Module_name>src>main>ets目录），其文件后缀名为“.ets”。资源文件资源文件包括应用级资源文件（位于AppScope>resources目录）和Module级资源文件（位于Module_name>src>main>resources目录），支持图形、多媒体、字符串、布局文件等。本课件是可编辑的正常PPT课件一、鸿蒙应用程序包结构1.开发态包结构其他配置文件其他配置文件用于编译构建，包括构建配置文件（build-profile.json5）、编译构建任务脚本（hvigorfile.ts）、混淆规则文件（obfuscation-rules.txt）、依赖库的信息（oh-package.json5）等。本课件是可编辑的正常PPT课件一、鸿蒙应用程序包结构2.编译态包结构不同类型的Module编译后会生成对应的HAP（HarmonyAbilityPackage，鸿蒙能力包）、HAR（HarmonyArchive，静态共享包）、HSP（HarmonySharePackage，动态共享包）等文件，从开发态到编译态，Module中的文件会发生如下变更。（1）ets目录：ArkTS源码编译生成.abc文件。（2）resources目录：AppScope目录下的资源文件会合入Module下面资源目录中，如果两个目录下存在重名文件，编译打包后只会保留AppScope目录下的资源文件。（3）module配置文件：AppScope目录下的app.json5文件字段会合入到Module下面的module.json5文件之中，编译后生成HAP或HSP最终的module.json文件。本课件是可编辑的正常PPT课件一、鸿蒙应用程序包结构2.编译态包结构本课件是可编辑的正常PPT课件一、鸿蒙应用程序包结构3.发布态包结构每个应用中至少包含一个.hap文件，可能包含若干个.hsp文件、也可能不含，一个应用中的所有.hap与.hsp文件合在一起称为包（Bundle），其对应的包名（bundleName）是应用的唯一标识。当应用发布上架到应用市场时，需要将Bundle打包为一个.app后缀的文件用于上架，这个.app文件称为AppPack，与此同时，DevEcoStudio工具会自动生成一个文件。文件描述了AppPack中每个HAP和HSP的属性，包含APP中的bundleName和版本编号（versionCode）信息，以及Module中的name、type和abilities等信息。本课件是可编辑的正常PPT课件二、鸿蒙应用配置文件每个应用项目的代码目录下必须包含应用配置文件，这些配置文件会向编译工具、操作系统和应用市场提供应用的基本信息。在基于Stage模型开发的应用项目代码下，都存在一个app.json5配置文件，以及一个或多个module.json5配置文件。本课件是可编辑的正常PPT课件二、鸿蒙应用配置文件（1）应用的全局配置信息，包含应用的Bundle名称、开发厂商、版本号等基本信息。（2）特定设备类型的配置信息。1.配置文件app.json5{"app":{"bundleName":"ject1","vendor":"example","versionCode":1000000,"versionName":"1.0.0","icon":"$media:app_icon","label":"$string:app_name"}}本课件是可编辑的正常PPT课件二、鸿蒙应用配置文件（1）Module的基本配置信息，包含Module名称、类型、描述、支持的设备类型等基本信息。（2）应用组件信息，包含UIAbility组件和ExtensionAbility组件的描述信息。（3）应用运行过程中所需的权限信息。2.配置文件module.json5本课件是可编辑的正常PPT课件三、资源分类与访问方法1.资源分类（1）base。二级子目录element用于存放字符串、颜色、布尔值等基础元素，media、profile存放媒体、动画、布局等资源文件。（2）限定词目录。二级子目录element、media、profile用于存放字符串、颜色、布尔值等基础元素，以及媒体、动画、布局等资源文件。（3）rawfile。可以自由放置各类资源文件。（4）resfile。可以自由放置各类资源文件。（5）资源组目录。用于存放特定类型资源。本课件是可编辑的正常PPT课件三、资源分类与访问方法2.资源访问（1）通过"$r"或"$rawfile"访问资源。对于“color”“float”“string”“plural”“media”“profile”等类型的资源，通过"$r('')"形式访问。对于rawfile目录资源，通过"$rawfile('filename')"形式访问。（2）通过应用上下文获取ResourceManager后调用资源管理接口访问资源getContext().resourceManager.getStringByNameSync(‘test’)可获取字符串资源。本课件是可编辑的正常PPT课件四、拓展鸿蒙系统的出现为我国在操作系统这一关键基础软件领域实现自主可控提供了可能，降低了我国对外国操作系统的依赖，保障了国家信息安全和产业安全，体现了为国家战略需求服务、为民族复兴助力的家国情怀。本课件是可编辑的正常PPT课件《鸿蒙应用开发基础》学习进步本课件是可编辑的正常PPT课件《鸿蒙应用开发基础》项目2设计转盘式抽奖程序鸿蒙语言开发基础本课件是可编辑的正常PPT课件目录Contents鸿蒙语言开发基础一、基础语法二、函数三、鸿蒙开发框架四、拓展本课件是可编辑的正常PPT课件一、基础语法1.变量声明以关键字let开头的声明引入变量，该变量在程序执行期间可以具有不同的值。lethi:string='hello';hi='hello,world';2.常量声明以关键字const开头的声明引入只读常量，该常量只能被赋值一次。consthello:string='hello';本课件是可编辑的正常PPT课件一、基础语法3.自动类型推断在ArkTS中所有数据的类型都必须在编译时确定，若一个变量或常量的声明包含了初值，就不需要显式指定其类型。lethi1:string='hello';lethi2='hello,world';本课件是可编辑的正常PPT课件一、基础语法4.数据类型数字（number）类型逻辑（boolean）类型字符（string）类型无（void）类型对象（Object）类型数组（array）类型枚举（enum）类型联合（union）类型匿名（Aliases）类型letn1=117;//十进制整数letn2=0x1123;//十六进制整数letn3=0b11;//二进制整数letn4=3.141592;//浮点数letisDone1:boolean=false;//boolean类型lets1='Hello,world!\n';//字符类型leta='Success';//字符类型lets3=`Theresultis${a}`;//反向单引号括起来的模板字符类型letnames:string[]=['Alice','Bob','Carol'];//数组类型enumColorSet1{Red,Green,Blue}//枚举类型letc1:ColorSet1=ColorSet1.Red;//常量表达式可以用于显式设置枚举常量的值enumColorSet2{White=0xFF,Grey=0x7F,Black=0x00}letc2:ColorSet2=ColorSet2.Black;本课件是可编辑的正常PPT课件一、基础语法5.运算符（1）算术运算符算术运算符包括一元运算符和二元运算符，其中一元运算符有负号（-）、正号（+）、自减（--）、自增（++），二元运算符有加法（+）、减法（-）、乘法（*）、除法（/）、取余（%）。（2）逻辑运算符逻辑运算符有逻辑与（&&）、逻辑或（||）、逻辑非（!）。本课件是可编辑的正常PPT课件一、基础语法5.运算符（3）赋值运算符赋值运算符=，使用方式如x=y。（4）比较运算符比较运算符有严格相等（===）、严格不相等（!==）、相等（==）、不相等（!=）、大于（>）、大于等于（>=）、小于（<）、小于等于（<=）。本课件是可编辑的正常PPT课件一、基础语法6.语句（1）If语句if语句用于需要根据逻辑条件执行不同语句的场景。当逻辑条件为真时，执行对应的一组语句，否则执行另一组语句（如果有的话）。另外，else部分也可能包含if语句。lets1='Hello';if(s1){console.log(s1);//打印“Hello”}lets2='World';if(s2.length!=0){console.log(s2);//打印“World”}本课件是可编辑的正常PPT课件一、基础语法6.语句（2）switch语句switch语句用来执行与switch表达式值匹配的代码块。switch(expression){caselabel1://如果label1匹配，则执行//...//语句1//...break;//可省略caselabel2:caselabel3://如果label2或label3匹配，则执行//...//语句23//...break;//可省略default://默认语句}本课件是可编辑的正常PPT课件一、基础语法6.语句（3）条件表达式。条件表达式由第一个表达式的布尔值来决定返回其他两个表达式中的一个。condition?expression1:expression2本课件是可编辑的正常PPT课件一、基础语法6.语句（4）for语句。for语句会被重复执行，直到循环退出语句值为false。letsum=0;for(leti=0;i<10;i+=2){sum+=i;}（5）for-of。使用for-of语句可遍历数组或字符串。for(letchof'astringobject'){/*processch*/}本课件是可编辑的正常PPT课件一、基础语法6.语句（6）while语句。只要condition为真值（转换后为true的值），while语句就会执行statements语句。letsum=0;for(leti=0;i<10;i+=2){sum+=i;}（7）do-while。如果condition的值为真值（转换后为true的值），那么statements语句会重复执行。do{statements}while(condition)本课件是可编辑的正常PPT课件一、基础语法6.语句（8）break语句和continue语句break语句可以终止循环语句或switch，而continue语句会停止当前循环迭代的执行并将控制传递给下一个迭代。本课件是可编辑的正常PPT课件二、函数函数声明引入一个函数，包含其名称、参数列表、返回类型和函数体。在函数声明中，必须为每个参数标记类型。如果参数为可选参数，那么允许在调用函数时省略该参数。函数的最后一个参数可以是rest参数（以“...”开头，并跟随一个参数名和一个类型数组）。可选参数的格式可为“name?:Type”，或为“name:Type=常量”即为参数设置默认值。functionsum(...numbers:number[]):number{letres=0;for(letnofnumbers)res+=n;returnres;}sum();//返回0sum(1,2,3);//返回6本课件是可编辑的正常PPT课件二、函数函数可以定义为箭头函数（又名匿名函数）。letsum=(x:number,y:number):number=>{returnx+y;}箭头函数的返回类型可以省略；省略时，返回类型通过函数体推断。表达式可以指定为箭头函数，使表达更简短，因此以下两种表达方式是等价的：letsum1=(x:number,y:number)=>{returnx+y;}letsum2=(x:number,y:number)=>x+y;本课件是可编辑的正常PPT课件三、鸿蒙开发框架鸿蒙原生的开发框架是ArkUI，它采用ArkTS语言，提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能和实时界面预览工具等，支持开发者进行分布式应用界面的开发。@Entry@ComponentstructIndex{@Statemessage:string='云林科技欢迎你'build(){RelativeContainer(){Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center:{anchor:'__container__',align:VerticalAlign.Center},middle:{anchor:'__container__',align:HorizontalAlign.Center}})}.height('100%').width('100%').onClick(()=>{this.message='鸿蒙欢迎你';})}}1．装饰器装饰器用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。本课件是可编辑的正常PPT课件三、鸿蒙开发框架鸿蒙原生的开发框架是ArkUI，它采用ArkTS语言，提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能和实时界面预览工具等，支持开发者进行分布式应用界面的开发。@Entry@ComponentstructIndex{@Statemessage:string='云林科技欢迎你'build(){RelativeContainer(){Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center:{anchor:'__container__',align:VerticalAlign.Center},middle:{anchor:'__container__',align:HorizontalAlign.Center}})}.height('100%').width('100%').onClick(()=>{this.message='鸿蒙欢迎你';})}}2．UI描述以声明式的方式来描述UI的结构，例如build()方法中的代码块。本课件是可编辑的正常PPT课件三、鸿蒙开发框架鸿蒙原生的开发框架是ArkUI，它采用ArkTS语言，提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能和实时界面预览工具等，支持开发者进行分布式应用界面的开发。@Entry@ComponentstructIndex{@Statemessage:string='云林科技欢迎你'build(){RelativeContainer(){Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center:{anchor:'__container__',align:VerticalAlign.Center},middle:{anchor:'__container__',align:HorizontalAlign.Center}})}.height('100%').width('100%').onClick(()=>{this.message='鸿蒙欢迎你';})}}3．自定义组件自定义组件是可复用的UI单元，可组合其他组件，如被@Component装饰的structIndex。本课件是可编辑的正常PPT课件三、鸿蒙开发框架鸿蒙原生的开发框架是ArkUI，它采用ArkTS语言，提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能和实时界面预览工具等，支持开发者进行分布式应用界面的开发。@Entry@ComponentstructIndex{@Statemessage:string='云林科技欢迎你'build(){RelativeContainer(){Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center:{anchor:'__container__',align:VerticalAlign.Center},middle:{anchor:'__container__',align:HorizontalAlign.Center}})}.height('100%').width('100%').onClick(()=>{this.message='鸿蒙欢迎你';})}}4．系统组件系统组件是指ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text。本课件是可编辑的正常PPT课件三、鸿蒙开发框架鸿蒙原生的开发框架是ArkUI，它采用ArkTS语言，提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能和实时界面预览工具等，支持开发者进行分布式应用界面的开发。@Entry@ComponentstructIndex{@Statemessage:string='云林科技欢迎你'build(){RelativeContainer(){Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center:{anchor:'__container__',align:VerticalAlign.Center},middle:{anchor:'__container__',align:HorizontalAlign.Center}})}.height('100%').width('100%').onClick(()=>{this.message='鸿蒙欢迎你';})}}5．属性方法组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。本课件是可编辑的正常PPT课件三、鸿蒙开发框架鸿蒙原生的开发框架是ArkUI，它采用ArkTS语言，提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能和实时界面预览工具等，支持开发者进行分布式应用界面的开发。@Entry@ComponentstructIndex{@Statemessage:string='云林科技欢迎你'build(){RelativeContainer(){Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center:{anchor:'__container__',align:VerticalAlign.Center},middle:{anchor:'__container__',align:HorizontalAlign.Center}})}.height('100%').width('100%').onClick(()=>{this.message='鸿蒙欢迎你';})}}6．事件方法组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Row后面的onClick()。除此之外，ArkUI扩展了多种语法范式来使开发更加便捷。本课件是可编辑的正常PPT课件三、鸿蒙开发框架鸿蒙原生的开发框架是ArkUI，它采用ArkTS语言，提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能和实时界面预览工具等，支持开发者进行分布式应用界面的开发。@Entry@ComponentstructIndex{@Statemessage:string='云林科技欢迎你'build(){RelativeContainer(){Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center:{anchor:'__container__',align:VerticalAlign.Center},middle:{anchor:'__container__',align:HorizontalAlign.Center}})}.height('100%').width('100%').onClick(()=>{this.message='鸿蒙欢迎你';})}}7．自定义构建函数自定义构建函数是指由@Builder装饰的函数，再加上@BuilderParam的配合传参，可以更好地封装UI描述的方法，实现细粒度的封装和复用UI描述。本课件是可编辑的正常PPT课件三、鸿蒙开发框架鸿蒙原生的开发框架是ArkUI，它采用ArkTS语言，提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能和实时界面预览工具等，支持开发者进行分布式应用界面的开发。@Entry@ComponentstructIndex{@Statemessage:string='云林科技欢迎你'build(){RelativeContainer(){Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center:{anchor:'__container__',align:VerticalAlign.Center},middle:{anchor:'__container__',align:HorizontalAlign.Center}})}.height('100%').width('100%').onClick(()=>{this.message='鸿蒙欢迎你';})}}8．定义扩展组件样式组件样式可用@Styles进行重用，在@Styles的基础上更是可以使用@Extend进行样式的扩展。本课件是可编辑的正常PPT课件三、鸿蒙开发框架鸿蒙原生的开发框架是ArkUI，它采用ArkTS语言，提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能和实时界面预览工具等，支持开发者进行分布式应用界面的开发。@Entry@ComponentstructIndex{@Statemessage:string='云林科技欢迎你'build(){RelativeContainer(){Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center:{anchor:'__container__',align:VerticalAlign.Center},middle:{anchor:'__container__',align:HorizontalAlign.Center}})}.height('100%').width('100%').onClick(()=>{this.message='鸿蒙欢迎你';})}}9．多态样式多态样式是指利用属性方法stateStyles，根据UI内部状态的不同来设置不同的样式。本课件是可编辑的正常PPT课件四、拓展鸿蒙系统的出现为我国在操作系统这一关键基础软件领域实现自主可控提供了可能，降低了我国对外国操作系统的依赖，保障了国家信息安全和产业安全，体现了为国家战略需求服务、为民族复兴助力的家国情怀。本课件是可编辑的正常PPT课件《鸿蒙应用开发基础》学习进步本课件是可编辑的正常PPT课件《鸿蒙应用开发基础》项目2设计转盘式抽奖程序UI常用布局-自适应布局本课件是可编辑的正常PPT课件目录ContentsUI常用布局-自适应布局一、线性布局二、拓展本课件是可编辑的正常PPT课件一、线性布局线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Column和Row构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。本课件是可编辑的正常PPT课件一、线性布局1.ColumnColumn，沿垂直方向布局的容器，可以包含子组件。其接口如下：Column(value?:{space?:string|number})【例2-1】Column布局效果，展示子元素在水平方向上和垂直方向上的对齐方式。实现此布局的思路：设置子元素在垂直方向上的间距，设置子元素在水平方向对左、对右、居中对齐，设置子元素在垂直方向上居中对齐、底部对齐、顶部对齐。本课件是可编辑的正常PPT课件一、线性布局1.Column//ColumnExam.ets@Entry@ComponentstructColumnExam{build(){Column({space:5}){Text('设置子元素垂直方向间距').width('90%').textAlign(TextAlign.Center)Column({space:5}){Column().width('100%').height(25).backgroundColor(0x990000)Column().width('100%').height(25).backgroundColor(0xFF0000)}.width('90%').height(80).border({width:1})Text('设置子元素水平方向对齐方式\n左对齐').width('90%').textAlign(TextAlign.Center)Column(){Column().width('50%').height(25).backgroundColor(0x990000)Column().width('50%').height(25).backgroundColor(0xFF0000)}.alignItems(HorizontalAlign.Start).width('90%').border({width:1})Text('右对齐').width('90%').textAlign(TextAlign.Center)本课件是可编辑的正常PPT课件一、线性布局1.ColumnColumn(){Column().width('50%').height(25).backgroundColor(0x990000)Column().width('50%').height(25).backgroundColor(0xFF0000)}.alignItems(HorizontalAlign.End).width('90%').border({width:1})Text('居中对齐').width('90%').textAlign(TextAlign.Center)Column(){Column().width('50%').height(25).backgroundColor(0x990000)Column().width('50%').height(25).backgroundColor(0xFF0000)}.alignItems(HorizontalAlign.Center).width('90%').border({width:1})Text('设置子元素垂直方向对齐方式\n垂直居中').width('90%').textAlign(TextAlign.Center)Column(){Column().width('90%').height(25).backgroundColor(0x990000)Column().width('90%').height(25).backgroundColor(0xFF0000)}.height(90).border({width:1}).justifyContent(FlexAlign.Center)Text('底部对齐').width('90%').textAlign(TextAlign.Center)本课件是可编辑的正常PPT课件一、线性布局1.ColumnColumn(){Column().width('90%').height(25).backgroundColor(0x990000)Column().width('90%').height(25).backgroundColor(0xFF0000)}.height(80).border({width:1}).justifyContent(FlexAlign.End)Text('顶部对齐').width('90%').textAlign(TextAlign.Center)Column(){Column().width('90%').height(25).backgroundColor(0x990000)Column().width('90%').height(25).backgroundColor(0xFF0000)}.height(90).border({width:1}).justifyContent(FlexAlign.Start)}.width('100%').padding({top:5})}}本课件是可编辑的正常PPT课件一、线性布局2.RowRow，沿水平方向布局容器，可以包含子组件。其接口如下：Row(value?:{space?:number|string})【例2-2】Row布局，展示子元素在水平方向上和垂直方向上的对齐方式。实现此布局的思路：设置子元素在垂直方向上的间距，设置子元素在水平方向对左、对右、居中对齐，设置子元素在垂直方向上居中对齐、底部对齐、顶部对齐。本课件是可编辑的正常PPT课件一、线性布局2.Row//RowExam.ets@Entry@ComponentstructRowExam{build(){Column({space:5}){Text('设置子组件水平方向的间距').width('90%').textAlign(TextAlign.Center)Row({space:5}){Row().width('30%').height(30).backgroundColor(0x990000)Row().width('30%').height(30).backgroundColor(0xFF0000)}.width('90%').height(90).border({width:1})Text('设置子元素垂直方向对齐方式\n底部对齐').width('90%').textAlign(TextAlign.Center)Row(){Row().width('30%').height(30).backgroundColor(0x990000)Row().width('30%').height(30).backgroundColor(0xFF0000)}.width('90%').alignItems(VerticalAlign.Bottom).height('12%').border

({width:1})Text('居中对齐').width('90%').textAlign(TextAlign.Center)本课件是可编辑的正常PPT课件一、线性布局2.RowRow(){Row().width('30%').height(30).backgroundColor(0x990000)Row().width('30%').height(30).backgroundColor(0xFF0000)}.width('90%').alignItems(VerticalAlign.Center).height('12%').border

({width:1})Text('顶部对齐').width('90%').textAlign(TextAlign.Center)Row(){Row().width('30%').height(30).backgroundColor(0x990000)Row().width('30%').height(30).backgroundColor(0xFF0000)}.width('90%').alignItems(VerticalAlign.Top).height('12%').border

({width:1})Text('设置子元素水平方向对齐方式\n右对齐').width('90%').textAlign(TextAlign.Center)Row(){Row().width('30%').height(30).backgroundColor(0x990000)Row().width('30%').height(30).backgroundColor(0xFF0000)}.width('90%').border({width:1}).justifyContent(FlexAlign.End)Text('左对齐').width('90%').textAlign(TextAlign.Center)本课件是可编辑的正常PPT课件一、线性布局2.RowRow(){Row().width('30%').height(30).backgroundColor(0x990000)Row().width('30%').height(30).backgroundColor(0xFF0000)}.width('90%').border({width:1}).justifyContent(FlexAlign.Start)Text('居中对齐').width('90%').textAlign(TextAlign.Center)Row(){Row().width('30%').height(30).backgroundColor(0x990000)Row().width('30%').height(30).backgroundColor(0xFF0000)}.width('90%').border({width:1}).justifyContent(FlexAlign.Center)}.width('100%')}}本课件是可编辑的正常PPT课件二、拓展鸿蒙系统的出现为我国在操作系统这一关键基础软件领域实现自主可控提供了可能，降低了我国对外国操作系统的依赖，保障了国家信息安全和产业安全，体现了为国家战略需求服务、为民族复兴助力的家国情怀。本课件是可编辑的正常PPT课件《鸿蒙应用开发基础》学习进步本课件是可编辑的正常PPT课件《鸿蒙应用开发基础》项目2设计转盘式抽奖程序UI自适应布局-其它布局本课件是可编辑的正常PPT课件目录ContentsUI常用布局-自适应布局一、层叠布局二、弹性布局五、拓展三、层叠布局四、弹性布局本课件是可编辑的正常PPT课件一、层叠布局层叠布局用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。Stack，堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。其接口如下：Stack(value?:{alignContent?:Alignment})本课件是可编辑的正常PPT课件一、层叠布局【例2-3】Stack层叠布局，展示子元素位置的固定定位与层叠。实现此布局的思路：设置子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加。//StackExam.ets@Entry@ComponentstructStackExam{build(){Stack({alignContent:Alignment.Center}){Text('子组件1，显示在底部').width('90%').height('100%').textAlign(TextAlign.Center).fontColor(0xffffff).backgroundColor(0x660000).align(Alignment.Top)Text('子组件2，显示在中间').width('70%').height('70%').textAlign(TextAlign.Center).fontColor(0xffffff).backgroundColor(0x990000).align(Alignment.Top)Text('子组件3，显示在顶部').width('50%').height('40%').textAlign(TextAlign.Center).fontColor(0xffffff).backgroundColor(0xFF0000).align(Alignment.Top)}.width('100%').height('100%').margin({top:5})}}本课件是可编辑的正常PPT课件二、弹性布局弹性布局提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多，比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。Flex，以弹性方式布局子组件的容器组件，其接口如下：Flex(value?:{direction?:FlexDirection,wrap?:FlexWrap,justifyContent?:FlexAlign,alignItems?:ItemAlign,alignContent?:FlexAlign})本课件是可编辑的正常PPT课件二、弹性布局【例2-4】Flex弹性布局，展示子元素水平方向上的排列。实现此布局的思路：设置子元素子沿水平方向排列，两端对齐，子组件间距平分，竖直方向上子组件居中。本课件是可编辑的正常PPT课件二、弹性布局//FlexExam.ets@Entry@ComponentstructFlexExam{build(){Column(){Column({space:5}){Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){Text('子组件1').width('30%').height('90%').backgroundColor(0x660000).textAlign(TextAlign.Center).fontColor(0xffffff)Text('子组件2').width('30%').height('90%').backgroundColor(0xFF0000).textAlign(TextAlign.Center).fontColor(0xffffff)Text('子组件3').width('30%').height('90%').backgroundColor(0x990000).textAlign(TextAlign.Center).fontColor(0xffffff)}.height('95%').width('90%').backgroundColor(0xFFCCCC)}.width('100%').margin({top:5})}.width('100%')}}本课件是可编辑的正常PPT课件三、相对布局相对布局，支持容器内部的子元素设置相对位置关系，支持子元素指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。RelativeContainer：相对布局组件，用于复杂场景中元素对齐的布局。可以设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“__container__”，其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。其接口如下：RelativeContainer()本课件是可编辑的正常PPT课件三、相对布局【例2-5】相对布局，展示子元素复杂布局。实现此布局的思路：指定锚点，基于锚点做相对位置布局。本课件是可编辑的正常PPT课件三、相对布局//Relative.ets@Entry@ComponentstructRelative{build(){Row(){RelativeContainer(){Row().width(100).height(100).backgroundColor('#AA3333').alignRules({//以父容器为锚点竖直方向顶头对齐top:{anchor:'__container__',align:VerticalAlign.Top},//以父容器为锚点水平方向居中对齐middle:{anchor:'__container__',align:HorizontalAlign.Center}}).id('row1')//设置锚点为row1本课件是可编辑的正常PPT课件三、相对布局Row().backgroundColor("#FF0000").height(100).width(100).alignRules({//以row1组件为锚点竖直方向底端对齐top:{anchor:'row1',align:VerticalAlign.Bottom},//以row1组件为锚点水平方向开头对齐left:{anchor:'row1',align:HorizontalAlign.Start}}).id('row2')//设置锚点row2Row().width(100).height(100).backgroundColor('#BBCC00').alignRules({top:{anchor:'row2',align:VerticalAlign.Top}}).id('row3')//设置锚点row3本课件是可编辑的正常PPT课件三、相对布局Row().width(100).height(100).backgroundColor('#EE9966').alignRules({top:{anchor:'row2',align:VerticalAlign.Top},left:{anchor:'row2',align:HorizontalAlign.End},}).id('row4')//设置锚点row4Row().width(100).height(100).backgroundColor('#EE66FF').alignRules({top:{anchor:'row2',align:VerticalAlign.Bottom},middle:{anchor:'row2',align:HorizontalAlign.Center}}).id('row5')//设置锚点row5}.width(300).height(300).border({width:2,color:'#6699EE'})}.height('100%').margin({left:30})}}本课件是可编辑的正常PPT课件四、网格布局网格布局由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要的自适应布局，其使用场景有九宫格图片展示、日历、计算器等。Grid组件为网格容器，其中容器内每一个条目对应一个GridItem组件。网格布局是一种二维布局。Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列，同时提供了垂直和水平布局能力。当网格容器组件尺寸发生变化时，所有子组件以及间距会等比例调整，从而实现网格布局的自适应能力。根据Grid的这些布局能力，可以构建出不同样式的网格布局。其接口如下：Grid(scroller?:Scroller)本课件是可编辑的正常PPT课件四、网格布局【例2-6】网格布局，展示页面均分能力以及子组件占比控制能力。实现此布局的思路：使用Grid设置网格布局相关参数，使用GridItem定义子组件相关特征，进而构建网格布局。本课件是可编辑的正常PPT课件四、网格布局//GridExam.ets@Entry@ComponentstructGridExam{@Stateitems:Array<string>=['智慧办公','智能家居','影音娱乐','运动健康','热卖榜','直播间','以旧换新','配件中心','甄选推荐','她之选']build(){Column(){Grid(){ForEach(this.items,(item:string)=>{GridItem(){Text(item).fontSize(40).fontWeight(FontWeight.Bolder).border({width:1}).backgroundColor(0xBBCC00).width('100%').height('100%').textAlign(TextAlign.Center)}},(item:string)=>item)}

本课件是可编辑的正常PPT课件四、网格布局.rowsTemplate('1fr1fr1fr1fr').columnsTemplate('1fr1fr1fr').columnsGap(10).rowsGap(10).width('100%').backgroundColor(0xEEEEEE).height('100%')}.margin(5)}}本课件是可编辑的正常PPT课件五、拓展鸿蒙系统的出现为我国在操作系统这一关键基础软件领域实现自主可控提供了可能，降低了我国对外国操作系统的依赖，保障了国家信息安全和产业安全，体现了为国家战略需求服务、为民族复兴助力的家国情怀。本课件是可编辑的正常PPT课件《鸿蒙应用开发基础》学习进步本课件是可编辑的正常PPT课件《鸿蒙应用开发基础》项目2设计转盘式抽奖程序UI响应式布局本课件是可编辑的正常PPT课件目录ContentsUI常用布局-响应式布局一、栅格布局二、媒体查询布局三、拓展本课件是可编辑的正常PPT课件一、栅格布局栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。栅格布局可以完成一对多布局的自动换行和自适应。当页面元素的数量超出了一行或一列的容量时，它们会自动换到下一行或下一列，并且在不同的设备上自适应排版，使得页面布局更加灵活和适应性强。Gr