鴻蒙系統(tǒng)應(yīng)用開發(fā)項(xiàng)目化教程 課件 項(xiàng)目2 開發(fā)計(jì)算器

長(zhǎng)沙民政職業(yè)技術(shù)學(xué)院鴻蒙應(yīng)用開發(fā)開發(fā)計(jì)算器本項(xiàng)目需要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的計(jì)算器應(yīng)用。該應(yīng)用可進(jìn)行簡(jiǎn)單的加、減、乘、除運(yùn)算；單擊C按鈕可清除結(jié)果顯示區(qū)；輸入數(shù)字和運(yùn)算符后可即時(shí)運(yùn)算；輸入等號(hào)后，可計(jì)算出結(jié)果并顯示在結(jié)果區(qū)。項(xiàng)目二開發(fā)計(jì)算器任務(wù)一實(shí)現(xiàn)計(jì)算器界面任務(wù)二

實(shí)現(xiàn)計(jì)算器計(jì)算邏輯目錄CONTENTSPART-01工程中核心文件的關(guān)系工程中核心文件的關(guān)系新建一個(gè)工程MyCal,程序?qū)⒛J(rèn)生成如右圖的目錄結(jié)構(gòu)，其中entry是項(xiàng)目下的一個(gè)工程模塊。有幾個(gè)文件需要關(guān)注，分別是：module.json5、EntryAbility.ts、Index.ets。工程中核心文件的關(guān)系module.json5是模塊配置文件。一個(gè)應(yīng)用里可以有多個(gè)Ability，每次在工程里通過右鍵新建一個(gè)ability，該配置文件將新增一個(gè)ability配置。但只有一個(gè)Ability對(duì)象可以將"skills"的值設(shè)置為{"entities":["entity.system.home"],"actions":["action.system.home"]}，代表該Ability對(duì)象為程序啟動(dòng)后第一個(gè)加載的Ability。工程中核心文件的關(guān)系UIAbility組件是系統(tǒng)調(diào)度的基本單元，為應(yīng)用提供繪制界面的窗口EntryAbility.ts中以on開頭的方法都是生命周期函數(shù)。其中onWindowStageCreate通過windowStage.loadContent方法指明需要加載的頁(yè)面文件工程中核心文件的關(guān)系打開pages/Index.ets，Index.ets文件由ArkTS語(yǔ)言編寫。應(yīng)用的頁(yè)面布局都在后綴為ets的文件中完成Build()方法中，可以完成頁(yè)面的布局。注意：build方法里只能由一個(gè)根布局。比如右圖中，Column()是build()的直接孩子，它沒有兄弟，這里的Column(）就是一個(gè)列布局，是本頁(yè)面的唯一的根布局工程中核心文件的關(guān)系@Entry、@Component和@State都是裝飾器。@Component表示這是個(gè)自定義組件；@Entry則表示這是個(gè)入口組件；@State表示這是組件中的狀態(tài)變量，這個(gè)變量變化會(huì)觸發(fā)UI刷新。ArkTS中默認(rèn)內(nèi)置的基礎(chǔ)組件、容器組件、媒體組件、繪制組件、畫布組件等各種組件，開發(fā)者可以直接調(diào)用，如示例中的Column、Text、Divider、Button等。工程中核心文件的關(guān)系@Component實(shí)現(xiàn)自定義組件；@Entry則表示這是個(gè)入口組件；PART-02常見布局常見布局彈性布局柵格布局網(wǎng)格布局層疊布局12345線性布局常見布局—線性布局線性布局(LinearLayout)是開發(fā)中最常用的布局。線性布局的子組件在線性方向上（水平方向和垂直方向）依次排列。Column容器內(nèi)子組件按照垂直方向排列，Row組件中，子組件按照水平方向排列。根據(jù)不同的排列方向，選擇使用Row或Column容器創(chuàng)建線性布局，通過調(diào)整space，alignItems，justifyContent屬性調(diào)整子組件的間距，水平垂直方向的對(duì)齊方式。常見布局—線性布局space的作用及使用方法常見布局—線性布局space的作用及使用方法常見布局—線性布局alignItems的作用及使用方法常見布局—線性布局justifyContent的作用及使用方法在線性布局下，常用空白填充組件Blank，在容器主軸方向自動(dòng)填充空白空間，達(dá)到自適應(yīng)拉伸效果。自適應(yīng)拉伸

@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%')}}常見布局—線性布局自適應(yīng)縮放自適應(yīng)縮放是指在各種不同大小設(shè)備中，子組件按照預(yù)設(shè)的比例，尺寸隨容器尺寸的變化而變化。第一種方法：父容器尺寸確定時(shí)，設(shè)置了layoutWeight屬性的子組件與兄弟元素占主軸尺寸按照權(quán)重進(jìn)行分配，忽略元素本身尺寸設(shè)置，在任意尺寸設(shè)備下，自適應(yīng)占滿剩余空間。第二種方法：父容器尺寸確定時(shí)，使用百分比設(shè)置子組件以及兄弟組件的width寬度，可以保證各自元素在任意尺寸下的自適應(yīng)占比。常見布局—線性布局自適應(yīng)縮放第一種方法：父容器尺寸確定時(shí)，設(shè)置了layoutWeight屬性的子組件與兄弟元素占主軸尺寸按照權(quán)重進(jìn)行分配，忽略元素本身尺寸設(shè)置，在任意尺寸設(shè)備下，自適應(yīng)占滿剩余空間。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%')}常見布局—線性布局自適應(yīng)縮放第二種方法：父容器尺寸確定時(shí)，使用百分比設(shè)置子組件以及兄弟組件的width寬度，可以保證各自元素在任意尺寸下的自適應(yīng)占比。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）用于在屏幕上預(yù)留一塊區(qū)域來顯示組件中的元素，提供元素可以重疊的布局。通過層疊容器Stack實(shí)現(xiàn)，容器中的子元素依次入棧，后一個(gè)子元素覆蓋前一個(gè)子元素顯示。對(duì)齊方式設(shè)置子元素在容器內(nèi)的對(duì)齊方式。支持左上（TopStart），上中（Top），右上（TopEnd），左（Start），中（Center），右（End），左下（BottomStart），中下（Bottom），右下（BottomEnd）九種對(duì)齊方式Stack({alignContent:Alignment.BottomStart}){…}常見布局—層疊布局層疊布局（StackLayout）用于在屏幕上預(yù)留一塊區(qū)域來顯示組件中的元素，提供元素可以重疊的布局。通過層疊容器Stack實(shí)現(xiàn)，容器中的子元素依次入棧，后一個(gè)子元素覆蓋前一個(gè)子元素顯示。Z序控制Stack容器中兄弟組件顯示層級(jí)關(guān)系可以通過zIndex屬性改變。zIndex值越大，顯示層級(jí)越高，即zIndex值大的組件會(huì)覆蓋在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布局）是自適應(yīng)布局中使用最為靈活的布局。彈性布局提供一種更加有效的方式來對(duì)容器中的子組件進(jìn)行排列、對(duì)齊和分配空白空間。容器：Flex組件作為Flex布局的容器，用于設(shè)置布局相關(guān)屬性。子組件：Flex組件內(nèi)的子組件自動(dòng)成為布局的子組件。主軸：Flex組件布局方向的軸線，子組件默認(rèn)沿著主軸排列。主軸開始的位置稱為主軸起始端，結(jié)束位置稱為主軸終點(diǎn)端。交叉軸：垂直于主軸方向的軸線。交叉軸起始的位置稱為交叉軸首部，結(jié)束位置稱為交叉軸尾部。幾個(gè)重要概念常見布局—彈性布局創(chuàng)建一個(gè)Flex({direction:FlexDirection.Row}){…}為例，主軸方向?yàn)镽ow,代表橫向。交叉軸為縱向。常見布局—彈性布局彈性布局可通過Flex組件提供的Flex接口創(chuàng)建。如下：Flex(options?:{direction?:FlexDirection,wrap?:FlexWrap,justifyContent?:FlexAlign,alignItems?:ItemAlign,alignContent?:FlexAlign})，參數(shù)direction決定主軸的方向，即子組件的排列方向?？蛇x值有Row、RowReverse、Column、ColumnReverse彈性布局的換行方式常見布局—彈性布局默認(rèn)情況下，子組件在Flex容器中都排在一條線（又稱"軸線"）上。通過wrap參數(shù)設(shè)置子組件換行方式?？蛇x值有：FlexWrap.NoWrap（默認(rèn)值）：不換行。如果子組件的寬度總和大于父元素的寬度，則子組件會(huì)被壓縮寬度。FlexWrap.Wrap：換行，每一行子組件按照主軸方向排列。FlexWrap.WrapReverse：換行，每一行子組件按照主軸反方向排列。常見布局—彈性布局FlexWrap.NoWrap（默認(rèn)值）：不換行。如果子組件的寬度總和大于父元素的寬度，則子組件會(huì)被壓縮寬度。彈性布局的換行方式常見布局—彈性布局彈性布局的換行方式FlexWrap.Wrap：換行，每一行子組件按照主軸方向排列。FlexWrap.WrapReverse：換行，每一行子組件按照主軸反方向排列。常見布局—彈性布局彈性布局的換行方式主軸對(duì)齊：通過justifyContent參數(shù)設(shè)置在主軸方向的對(duì)齊方式，存在下面六種情況常見布局—彈性布局彈性布局的換行方式交叉軸對(duì)齊：可以通過Flex組件的alignItems參數(shù)設(shè)置子組件在交叉軸的對(duì)齊方式ItemAlign.Start：交叉軸方向首部對(duì)齊ItemAlign.Center：交叉軸方向居中對(duì)齊ItemAlign.End：交叉軸方向底部對(duì)齊交叉軸方向常見布局—彈性布局彈性布局的換行方式交叉軸對(duì)齊：可以通過Flex組件的alignItems參數(shù)設(shè)置子組件在交叉軸的對(duì)齊方式ItemAlign.Stretch：交叉軸方向拉伸填充，在未設(shè)置尺寸時(shí)，拉伸到容器尺寸ItemAlign.Baseline：交叉軸方向文本基線對(duì)齊交叉軸方向常見布局—彈性布局彈性布局的換行方式子組件的alignSelf屬性也可以設(shè)置子組件在父容器交叉軸的對(duì)齊格式，且會(huì)覆蓋Flex布局容器中alignItems默認(rèn)配置

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

.alignSelf(ItemAlign.Start)//子組件自己設(shè)置為首部對(duì)齊.backgroundColor(0xF5DEB3)}.width('90%').height(220).backgroundColor(0xAFEEEE)常見布局—彈性布局使用彈性布局，可以實(shí)現(xiàn)子組件沿水平方向排列，兩端對(duì)齊，子組件間距平分，豎直方向上子組件居中的效果

@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%')}}常見布局—網(wǎng)格布局網(wǎng)格布局（GridLayout）是自適應(yīng)布局中一種重要的布局，具備較強(qiáng)的頁(yè)面均分能力，子組件占比控制能力。通過Grid容器組件和子組件GridItem實(shí)現(xiàn)，Grid用于設(shè)置網(wǎng)格布局相關(guān)參數(shù)，GridItem定義子組件相關(guān)特征（1）容器組件尺寸發(fā)生變化時(shí)，所有子組件以及間距等比例調(diào)整，實(shí)現(xiàn)布局的自適應(yīng)能力。（2）支持自定義網(wǎng)格布局行數(shù)和列數(shù)，以及每行每列尺寸占比。（3）支持設(shè)置網(wǎng)格布局中子組件的行列間距。（4）支持設(shè)置子組件橫跨幾行或者幾列。優(yōu)勢(shì)常見布局—網(wǎng)格布局行列數(shù)量占比：通過Grid的組件的columnsTemplate和rowTemplate屬性設(shè)置網(wǎng)格布局行列數(shù)量與尺寸占比。

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)一行四列常見布局—網(wǎng)格布局通過layoutDirection可以設(shè)置網(wǎng)格布局的主軸方向，決定子組件的排列方式?？蛇x值包括Row，RowReverse，Column，ColumnReverse四種情況。排列方式常見布局—網(wǎng)格布局行列間距columnsGap用于設(shè)置網(wǎng)格子組件GridItem垂直方向的間距，rowsGap用于設(shè)置GridItem水平方向的間距Grid().columnsTemplate('1fr1fr1fr1fr').columnsGap(10).rowsGap(20)常見布局—網(wǎng)格布局網(wǎng)格子組件GridItem設(shè)置子組件橫跨多行時(shí)，通過rowStart設(shè)置子組件起始行編號(hào)，rowEnd設(shè)置終點(diǎn)行編號(hào)。當(dāng)rowStart值與rowEnd值相同時(shí)，子組件只占一個(gè)網(wǎng)格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)一行五列，第四列做了列合并常見布局—網(wǎng)格布局網(wǎng)格子組件GridItem設(shè)置子組件橫跨多行時(shí)，通過rowStart設(shè)置子組件起始行編號(hào)，rowEnd設(shè)置終點(diǎn)行編號(hào)。當(dāng)rowStart值與rowEnd值相同時(shí)，子組件只占一個(gè)網(wǎng)格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常見組件常見組件組件是構(gòu)建頁(yè)面的核心，每個(gè)組件通過對(duì)數(shù)據(jù)和方法的簡(jiǎn)單封裝，實(shí)現(xiàn)獨(dú)立的可視、可交互功能單元。組件之間相互獨(dú)立，隨取隨用，也可以在需求相同的地方重復(fù)使用。組件類型主要組件基礎(chǔ)組件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常見組件組件的創(chuàng)建都是以組件名開頭，接一對(duì)英文圓括號(hào)，括號(hào)內(nèi)是組件的參數(shù)，在括號(hào)外可級(jí)聯(lián)調(diào)用組件的屬性方法和事件方法。以Text組件為例：Text('你好').fontSize(60).width('95%').height('100%')組件的創(chuàng)建常見組件組件的創(chuàng)建Text組件的創(chuàng)建語(yǔ)法：Text(content?:string|Resource)。參數(shù)說明如表參數(shù)名參數(shù)類型必填參數(shù)描述contentstring|Resource否文本內(nèi)容。包含子組件Span時(shí)不生效，顯示Span內(nèi)容，并且此時(shí)text組件的樣式不生效。默認(rèn)值：''常見組件所有組件有一些通用屬性，比如尺寸設(shè)置、位置設(shè)置、邊框設(shè)置、背景設(shè)置等。名稱參數(shù)說明描述widthLength設(shè)置組件自身的寬度，缺省時(shí)使用元素自身內(nèi)容需要的寬度。若子組件的寬大于父組件的寬，則會(huì)畫出父組件的范圍heightLength設(shè)置組件自身的高度，缺省時(shí)使用元素自身內(nèi)容需要的高度。若子組件的高大于父組件的高，則會(huì)畫出父組件的范圍paddingPadding|Length設(shè)置內(nèi)邊距屬性。參數(shù)為L(zhǎng)ength類型時(shí)，四個(gè)方向內(nèi)邊距同時(shí)生效。默認(rèn)值：0padding設(shè)置百分比時(shí)，上下左右內(nèi)邊距均以父容器的width作為基礎(chǔ)值。marginMargin|Length設(shè)置外邊距屬性。參數(shù)為L(zhǎng)ength類型時(shí)，四個(gè)方向外邊距同時(shí)生效。默認(rèn)值：0margin設(shè)置百分比時(shí)，上下左右外邊距均以父容器的width作為基礎(chǔ)值alignAlignment設(shè)置元素內(nèi)容在元素繪制區(qū)域內(nèi)的對(duì)齊方式。默認(rèn)值：Alignment.CenterbackgroundColorResourceColor設(shè)置組件的背景色。backgroundImagesrc:ResourceStr,repeat?:ImageRepeatsrc：圖片地址，支持網(wǎng)絡(luò)圖片資源和本地圖片資源地址(不支持svg類型的圖片)。repeat：設(shè)置背景圖片的重復(fù)樣式，默認(rèn)不重復(fù)fontColorResourceColor設(shè)置字體顏色fontSizeLength設(shè)置字體大小，Length為number類型時(shí)，使用fp單位。字體默認(rèn)大小16。不支持設(shè)置百分比字符串fontStyleFontStyle.Normal正常字體FontStyle.Italic斜體設(shè)置字體樣式。默認(rèn)值：FontStyle.Normal組件的通用屬性常見組件某些組件在創(chuàng)建時(shí)，圓括號(hào)里的參數(shù)會(huì)用到一些特有屬性，以Button組件為例。Button('Disable',{type:ButtonType.Capsule,stateEffect:false})名稱描述Capsule膠囊型按鈕（圓角默認(rèn)為高度的一半）Circle圓形按鈕Normal普通按鈕（默認(rèn)不帶圓角）ButtonType取值組件參數(shù)中的屬性PART-04開發(fā)計(jì)算器界面任務(wù)實(shí)施—開發(fā)計(jì)算器界面將計(jì)算器布局從整體到局