HarmonyOS ArkUI 3.0框架試玩初體驗

HarmonyOS ArkUI 3.0正式到來，今天就給大家分享一下我的 HarmonyOS ArkUI 3.0 框架試玩初體驗，以合成 1024 的開發(fā)實戰(zhàn)，帶大家感受一下 HarmonyOS ArkUI 3.0 的極簡開發(fā)。

創(chuàng)建一個空白的工程

①安裝和配置 DevEco Studio

https://developer.harmonyos.com/cn/develop/deveco-studio#download

DevEco Studio 安裝：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415

②創(chuàng)建一個 Empty Ability 應(yīng)用

將文件命名為 MyETSApplication（文件名不能出現(xiàn)中文或者特殊字符，否則將無法成功創(chuàng)建項目文件），Project Type 勾選 Application，選擇保存路徑。

③準(zhǔn)備工作

在 entry>src>main>config.json 文件中最下方"launchType": "standard"的后面添加以下代碼，這樣就可以實現(xiàn)去掉應(yīng)用上方的標(biāo)簽欄了。

"metaData":{
"customizeData":[
{
"name":"hwc-theme",
"value":"androidhwext:style/Theme.Emui.Light.NoTitleBar",
"extra":""
}
]
}

實現(xiàn)界面布局

①保存圖片

將 logo 圖片保存到 entry>src>main>resources>base>media 文件中。

②新一代的聲明式 UI 開發(fā)范式

③實現(xiàn)界面

• aboutToAppear：函數(shù)在創(chuàng)建自定義組件的新實例后，在執(zhí)行其build函數(shù)之前執(zhí)行。允許在 aboutToAppear 函數(shù)中改變狀態(tài)變量，這些更改將在后續(xù)執(zhí)行build函數(shù)中生效。

• aboutToDisappear：函數(shù)在自定義組件析構(gòu)消耗之前執(zhí)行。不允許在 aboutToDisappear 函數(shù)中改變狀態(tài)變量，特別是 @Link 變量的修改可能會導(dǎo)致應(yīng)用程序行為不穩(wěn)定。

• onPageShow：當(dāng)此頁面顯示時觸發(fā)一次。包括路由過程、應(yīng)用進(jìn)入前后臺等場景，僅 @Entry 修飾的自定義組件生效。

• onPageHide：當(dāng)此頁面消失時觸發(fā)一次。包括路由過程、應(yīng)用進(jìn)入前后臺等場景，僅 @Entry 修飾的自定義組件生效。

• onBackPress：當(dāng)用戶點(diǎn)擊返回按鈕時觸發(fā)，，僅 @Entry 修飾的自定義組件生效。

index.ets：先定義一個方格的背景顏色字典 colors，用以繪制不同數(shù)字的背景顏色，和一個全局變量 number，用以 ForEach 的鍵值生成。

varnumber=1
constcolors={
"0":"#CDC1B4",
"2":"#EEE4DA",
"4":"#ECE0C6",
"8":"#F2B179",
"16":"#F59563",
"32":"#F67C5F",
"64":"#F65E3B",
"128":"#EDCF72",
"256":"#EDCC61",
"512":"#99CC00",
"1024":"#83AF9B",
"2048":"#0099CC",
"4096":"#0099CC",
"8192":"#0099CC"
}

文本顏色判斷其值是否為 2 或 4，如果為 2 或 4，則采用顏色 #645B52，否則采用背景顏色白色。

@Component
structsetText{
@Linkgrids:number[]

build(){
Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Row}){
ForEach(this.grids,
(item:number)=>Text(item==0?'':item.toString())
.width(70)
.height(70)
.textAlign(TextAlign.Center)
.fontSize(30)
.margin({left:5,top:5,right:5,bottom:5})
.backgroundColor(colors[item.toString()])
.fontColor((item==2||item==4)?'#645B52':'#FFFFFF'),
(item:number)=>(number++)+item.toString())
}
}
}

同理，使用裝飾器 @Component，自定義一個按鈕 Button 組件，用以繪制上下左右四個按鈕。

@Component
structsetButton{
privatedirtext:string
privatedir:string
@LinkGrids:number[][]
@Linkgrid1:number[]
@Linkgrid2:number[]
@Linkgrid3:number[]
@Linkgrid4:number[]

build(){
Button(this.dirtext)
.width(60)
.height(60)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.align(Alignment.Center)
.backgroundColor('#974B31')
.fontColor('#FFFFFF')
.margin({left:5,top:3,right:5,bottom:3})
}
}

@Entry
@Component
structIndex{
@Stategrids:number[][]=[[0,0,0,0],
[0,2,0,0],
[0,0,2,0],
[0,0,0,0]]
@Stategrid1:number[]=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3]]
@Stategrid2:number[]=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3]]
@Stategrid3:number[]=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3]]
@Stategrid4:number[]=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3]]

build(){
Column(){
Image($r('app.media.logo1024')).width('100%').height(140).align(Alignment.Center)
Column(){
setText({grids:$grid1})
setText({grids:$grid2})
setText({grids:$grid3})
setText({grids:$grid4})
}
.width(320)
.height(320)
.backgroundColor("#BBADA0")
setButton({dirtext:'↑',dir:'up',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Row}){
setButton({dirtext:'←',dir:'left',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
setButton({dirtext:'→',dir:'right',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
}
setButton({dirtext:'↓',dir:'down',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
Button('重新開始')
.width(180)
.height(50)
.fontSize(30)
.align(Alignment.Center)
.backgroundColor('#974B31')
.fontColor('#FFFFFF')
.margin({left:5,top:3,right:5,bottom:3})
}
.width('100%')
.height('100%')
.backgroundColor("#FFFFFF")
.alignItems(HorizontalAlign.Center)
}
}

編寫邏輯代碼

• addTwoOrFourToGrids()：用以隨機(jī)生成一個新的方格數(shù)字，數(shù)字為2或4。

• swipeGrids(direction)：用以實現(xiàn)方格的重新生成。

• changeGrids(direction)：用以實現(xiàn)方格的上下左右移動。

• changeString()：用以將二維數(shù)組分成四個一維數(shù)組。

最后在 Button 組件的屬性里添加一個點(diǎn)擊事件，依次調(diào)用函數(shù) swipeGrids(direction)、addTwoOrFourToGrids() 和 changeString()。

@Component
structsetButton{
privatedirtext:string
privatedir:string
@LinkGrids:number[][]
@Linkgrid1:number[]
@Linkgrid2:number[]
@Linkgrid3:number[]
@Linkgrid4:number[]

addTwoOrFourToGrids(){
letarray=[];
for(letrow=0;row4;row++)
for(letcolumn=0;column4;column++)
if(this.Grids[row][column]==0)
array.push([row,column]);

letrandomIndes=Math.floor(Math.random()*array.length);
letrow=array[randomIndes][0];
letcolumn=array[randomIndes][1];
if(Math.random()0.8){
this.Grids[row][column]=2;
}else{
this.Grids[row][column]=4;
}
}

swipeGrids(direction){
letnewGrids=this.changeGrids(direction);
if(newGrids.toString()!=this.Grids.toString()){
this.Grids=newGrids;
}
}

changeGrids(direction){
letnewGrids=[[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]];

if(direction=='left'||direction=='right'){
letstep=1;
if(direction=='right'){
step=-1;//step作為循環(huán)時數(shù)組下標(biāo)改變的方向
}
for(letrow=0;row4;row++){//每一層
letarray=[];

letcolumn=0;//如果為left則從0開始right從3開始，
if(direction=='right'){
column=3;
}
for(leti=0;i4;i++){
if(this.Grids[row][column]!=0){//把所有非零元依次放入數(shù)組中
array.push(this.Grids[row][column]);
}
column+=step;//當(dāng)direction為left時則從0向3遞增，為right時則從3向0遞減
}
for(leti=0;i1;i++){//訪問當(dāng)前元素及他的下一個元素，所有循環(huán)次數(shù)為length-1
if(array[i]==array[i+1]){//判斷是否可合并，
array[i]+=array[i+1];//合并，
array[i+1]=0;//合并后參與合并的第二個元素消失
i++;
}
}

column=0;
if(direction=='right'){
column=3;
}

for(constelemofarray){
if(elem!=0){//跳過array里的空元素
newGrids[row][column]=elem;//把合并后的狀態(tài)賦給新數(shù)組grids，
column+=step;
}
}
}
}elseif(direction=='up'||direction=='down'){//同理
letstep=1;
if(direction=='down'){
step=-1;
}

for(letcolumn=0;column4;column++){
letarray=[];

letrow=0;
if(direction=='down'){
row=3;
}
for(leti=0;i4;i++){
if(this.Grids[row][column]!=0){
array.push(this.Grids[row][column]);
}
row+=step;
}
for(leti=0;i1;i++){
if(array[i]==array[i+1]){
array[i]+=array[i+1];
array[i+1]=0;
i++;
}
}
row=0;
if(direction=='down'){
row=3;
}
for(constelemofarray){
if(elem!=0){
newGrids[row][column]=elem;
row+=step;
}
}
}
}
returnnewGrids;
}

changeString(){
this.grid1=[this.Grids[0][0],this.Grids[0][1],this.Grids[0][2],this.Grids[0][3]]
this.grid2=[this.Grids[1][0],this.Grids[1][1],this.Grids[1][2],this.Grids[1][3]]
this.grid3=[this.Grids[2][0],this.Grids[2][1],this.Grids[2][2],this.Grids[2][3]]
this.grid4=[this.Grids[3][0],this.Grids[3][1],this.Grids[3][2],this.Grids[3][3]]
}

build(){
Button(this.dirtext)
.width(60)
.height(60)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.align(Alignment.Center)
.backgroundColor('#974B31')
.fontColor('#FFFFFF')
.margin({left:5,top:3,right:5,bottom:3})
.onClick((event:ClickEvent)=>{
this.swipeGrids(this.dir)
this.addTwoOrFourToGrids()
this.changeString()
})
}
}

在結(jié)構(gòu)體 index 中文本內(nèi)容為“重新開始”的按鈕添加一個點(diǎn)擊事件，用以重新初始化數(shù)據(jù)。

@Entry
@Component
structIndex{
@Stategrids:number[][]=[[0,0,0,0],
[0,2,0,0],
[0,0,2,0],
[0,0,0,0]]
@Stategrid1:number[]=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3]]
@Stategrid2:number[]=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3]]
@Stategrid3:number[]=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3]]
@Stategrid4:number[]=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3]]

build(){
Column(){
Image($r('app.media.logo1024')).width('100%').height(140).align(Alignment.Center)
Column(){
setText({grids:$grid1})
setText({grids:$grid2})
setText({grids:$grid3})
setText({grids:$grid4})
}
.width(320)
.height(320)
.backgroundColor("#BBADA0")
setButton({dirtext:'↑',dir:'up',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Row}){
setButton({dirtext:'←',dir:'left',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
setButton({dirtext:'→',dir:'right',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
}
setButton({dirtext:'↓',dir:'down',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
Button('重新開始')
.width(180)
.height(50)
.fontSize(30)
.align(Alignment.Center)
.backgroundColor('#974B31')
.fontColor('#FFFFFF')
.margin({left:5,top:3,right:5,bottom:3})
.onClick((event:ClickEvent)=>{
this.grids=[[0,0,0,0],
[0,2,0,0],
[0,0,2,0],
[0,0,0,0]]

this.grid1=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3]]
this.grid2=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3]]
this.grid3=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3]]
this.grid4=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3]]
})
}
.width('100%')
.height('100%')
.backgroundColor("#FFFFFF")
.alignItems(HorizontalAlign.Center)
}
}

寫在最后