鸿蒙系统应用开发项目化教程 课件 项目2 开发计算器

长沙民政职业技术学院鸿蒙应用开发开发计算器本项目需要实现一个简单的计算器应用。该应用可进行简单的加、减、乘、除运算；单击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设置元素内容在元素绘制区域内的对齐方式。默认值：Alignment.CenterbackgroundColorResourceColor设置组件的背景色。backgroundImagesrc:ResourceStr,repeat?:ImageRepeatsrc：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。repeat：设置背景图片的重复样式，默认不重复fontColorResourceColor设置字体颜色fontSizeLength设置字体大小，Length为number类型时，使用fp单位。字体默认大小16。不支持设置百分比字符串fontStyleFontStyle.Normal正常字体FontStyle.Italic斜体设置字体样式。默认值：FontStyle.Normal组件的通用属性常见组件某些组件在创建时，圆括号里的参数会用到一些特有属性，以Button组件为例。Button('Disable',{type:ButtonType.Capsule,stateEffect:false})名称描述Capsule胶囊型按钮（圆角默认为高度的一半）Circle圆形按钮Normal普通按钮（默认不带圆角）ButtonType取值组件参数中的属性PART-04开发计算器界面任务实施—开发计算器界面将计算器布局从整体到局