0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

基于HarmonyOS ArkUI3.0框架的木棉花扫雷

电子发烧友开源社区 来源:HarmonyOS官方合作社区 作者:木棉花 2021-12-07 11:08 次阅读

前言

基于HarmonyOS ArkUI 3.0 框架的木棉花扫雷(上)已经给大家分享了木棉花扫雷的欢迎页面和主页面的实战开发,这里继续给大家分享游戏页面的实战开发O(∩_∩)O~
正文

1. 添加顶部功能栏

定义状态变量time并初始化为0,用于记录当前的时间值。定义状态变量mine,调用router.getParams().difficulty来获取到页面跳转来时携带的difficulty对应的数据,即地雷总数,其中同样需要导入router模块。

定义全局变量timeoutID,添加一个名为initialize()的函数通过setInterval()对timeoutID进行初始化为定时器,用于逐秒对time进行递增。在自定义组件的生命周期函数aboutToAppear()中调用函数initialize()。

在菜单按钮组件的点击事件中清除定时器并通过router.back()返回到主页面。

game.ets:

import router from '@system.router'
var timeoutID;
@Entry@Componentstruct Game { @State time: number = 0 @State mine: number = router.getParams().difficulty
 aboutToAppear(){  this.initialize() }
 initialize(){  timeoutID = setInterval(() =>{   this.time += 1  }, 1000); }
 build() {  Column(){   Row() {    Button('菜 单', { type: ButtonType.Normal, stateEffect: true })     .width(95)     .height(50)     .borderRadius(8)     .borderColor('#6379A8')     .borderWidth(2)     .fontSize(26)     .fontWeight(700)     .fontColor('#1E2B46')     .backgroundColor('#C1D0E6')     .margin({ left:10, top: 2 })     .onClick(() => {      clearInterval(timeoutID)      router.back()     })    setImage({ str: 'time.png' })    setText({ num: $time })    setImage({ str: 'lei.png' })    setText({ num: $mine })   }   .width('100%')   .height(60)   .backgroundColor('#C1D0E6')   .margin({ top: 80 })
  }  .width('100%')  .height('100%')  .backgroundColor('#D6DDE7') }}
@Componentstruct setImage { private str: string
 build() {  Image($rawfile(this.str))   .height(50)   .width(50)   .scale({ x: 0.9, y: 0.9 })   .margin({ left:10, top: 3 }) }}
@Componentstruct setText { @Link num: number
 build() {  Text(this.num.toString())   .width(60)   .height(30)   .borderRadius(10)   .borderColor('#4162AA')   .borderWidth(1)   .fontSize(26)   .textAlign(TextAlign.Center)   .fontWeight(700)   .fontColor('#FFFFFF')   .backgroundColor('#4162AA')   .margin({ left:3, top: 5 })   .padding(0) }}

向右滑动查看完整代码→

2. 实现扫雷主体

定义变量row和column,调用router.getParams().Number_row和router.getParams().Number_column来获取到页面跳转来时携带的数据,即网格行数和网格列数。定义状态变量Number_row和Number_column并初始化为1~9的字符数组。定义状态变量statesGrids并初始化为16x16全为0的二维数组,用于记录网格中对应位置格子的状态。定义状态变量isCountDown并初始化为true,用于刷新页面组件状态。

在自定义组件的生命周期函数aboutToAppear()中根据row和column的值对Number_row和Number_column进行更新。

在函数initialize()中随机将地雷放置到网格中,即对应位置的grids置为-1,其余非-1的格子对应的位置放置该格子周围的地雷数量。

添加一个名为estimatemine(i, j)的函数用于翻开该格子周围非地雷的格子。

在容器Grid中通过两个循环渲染ForEach对网格进行绘制,在每一个格子中,若对应位置的statesGrids为1,则表示翻开状态,若对应位置的statesGrids为0,则表示没翻开状态。在翻开状态中,若对应位置的grids为-1,则表示是地雷,否则表示该格子周围地雷的数量。在每个格子的点击事件中,若若对应位置的statesGrids为0,则置为1,若对应位置的grids为0,则调用函数estimatemine(i, j)。最后对isCountDown进行取反,用于刷新页面组件状态。

game.ets:

import router from '@system.router'
const colors={ "0": "#E0E4F0", "1": "#2348A0", "2": "#247411", "3": "#AF121B", "4": "#04289E", "5": "#D2090E", "6": "#008000", "7": "#000080", "8": "#800000", "10": "#3C7CF6", "11": "#E0E4F0"}
var grids;var timeoutID;
@Entry@Componentstruct Game { private row: number = router.getParams().Number_row private column: number = router.getParams().Number_column @State time: number = 0 @State mine: number = router.getParams().difficulty @State Number_row: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] @State Number_column: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] @State statesGrids: number[][] = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] @State isCountDown: boolean = true
 aboutToAppear(){  if(this.row == 12){   this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']  } else if(this.row == 16){   this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']  }
  if(this.column == 12){   this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']  } else if(this.column == 16){   this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']  }
  this.initialize() }
 initialize(){  grids = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]
  let i = 0;  while(i < this.mine){   let random_row = Math.floor(Math.random() * this.row);   let random_column = Math.floor(Math.random() * this.column);   if(grids[random_row][random_column] == 0){    grids[random_row][random_column] = -1    i++   }  }
  for(let i = 0; i < this.row; i++){   for(let j = 0; j < this.column; j++){    if(grids[i][j] != -1){     let k = 0     for(let ii = i - 1; ii <= i + 1; ii++){      for(let jj = j - 1; jj <= j + 1; jj++){       if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && grids[ii][jj] == -1){        k++       }      }     }     grids[i][j] = k    }   }  }
  timeoutID = setInterval(() =>{   this.time += 1  }, 1000); }
 estimatemine(i, j){  for(let ii = i - 1; ii <= i + 1; ii++){   for(let jj = j - 1; jj <= j + 1; jj++){    if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && (ii != i || jj != j)){     if(this.statesGrids[ii][jj] == 0){      this.statesGrids[ii][jj] = 1      if(grids[ii][jj] == 0){       this.estimatemine(ii, jj)      }     }    }   }  } }
 build() {  Column(){   Row() {    Button('菜 单', { type: ButtonType.Normal, stateEffect: true })     .width(95)     .height(50)     .borderRadius(8)     .borderColor('#6379A8')     .borderWidth(2)     .fontSize(26)     .fontWeight(700)     .fontColor('#1E2B46')     .backgroundColor('#C1D0E6')     .margin({ left:10, top: 2 })     .onClick(() => {      clearInterval(timeoutID)      router.back()     })    setImage({ str: 'time.png' })    setText({ num: $time })    setImage({ str: 'lei.png' })    setText({ num: $mine })   }   .width('100%')   .height(60)   .backgroundColor('#C1D0E6')   .margin({ top: 80 })
   Grid() {    ForEach(this.Number_row, (day_row: string) => {     ForEach(this.Number_column, (day_column: string) => {      GridItem() {       Button({ type: ButtonType.Normal, stateEffect: true }){        if (this.isCountDown || !this.isCountDown) {         if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 1){          if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == -1){           Image($rawfile('mine.png'))            .height(358 / this.column - 2)            .width(358 / this.column - 2)            .scale({ x: 0.9, y: 0.9 })          }else{           Text(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 ? ' ' : grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString())            .height(358 / this.column - 2)            .width(358 / this.column - 2)            .fontSize(358 / this.column - 4)            .fontColor(colors[grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()])            .textAlign(TextAlign.Center)            .fontWeight(600)          }         }        }       }       .height(353 / this.column - 2)       .width(353 / this.column - 2)       .backgroundColor(colors['1' + this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1]])       .onClick(() => {        if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){         this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 1         if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){          this.estimatemine(parseInt(day_row) - 1, parseInt(day_column) - 1)         }        }        if(this.isCountDown){         this.isCountDown = false        }else{         this.isCountDown = true        }       })      }     }, day_column => day_column)    }, day_row => day_row)   }   .columnsTemplate(this.row == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' :     this.row == 16 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr')   .rowsTemplate(this.column == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' :     this.column == 16 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr')   .columnsGap(2)   .rowsGap(2)   .width(355)   .backgroundColor('#8CC8F5')   .height(355)   .margin({ top: 10 })  }  .width('100%')  .height('100%')  .backgroundColor('#D6DDE7') }}
@Componentstruct setImage { private str: string
 build() {  Image($rawfile(this.str))   .height(50)   .width(50)   .scale({ x: 0.9, y: 0.9 })   .margin({ left:10, top: 3 }) }}
@Componentstruct setText { @Link num: number
 build() {  Text(this.num.toString())   .width(60)   .height(30)   .borderRadius(10)   .borderColor('#4162AA')   .borderWidth(1)   .fontSize(26)   .textAlign(TextAlign.Center)   .fontWeight(700)   .fontColor('#FFFFFF')   .backgroundColor('#4162AA')   .margin({ left:3, top: 5 })   .padding(0) }}

3. 实现插旗功能

定义状态变量statesBtn并初始化为1,用于记录当前响应的是哪个按钮,当为1时表示响应翻开按钮的功能,当为0时表示响应插旗按钮的功能。

在容器Grid的每个按钮中,增加对statesBtn的判断以响应相应的按钮功能,当为插旗功能时,当对应位置的statesGrids为2则表示为旗子,当对应位置的statesGrids为3时则表示“?”。在点击事件中增加对statesBtn的判断以响应相应的按钮功能,当为插旗功能时,实现对应位置的statesGrids在0、2、3之间轮换,即没有翻开状态、旗子状态、问号状态。

game.ets:

import router from '@system.router'
const colors={ "0": "#E0E4F0", "1": "#2348A0", "2": "#247411", "3": "#AF121B", "4": "#04289E", "5": "#D2090E", "6": "#008000", "7": "#000080", "8": "#800000", "10": "#3C7CF6", "11": "#E0E4F0", "20": "#CBD8E8", "21": "#4774D8", "30": "#4774D8", "31": "#CBD8E8"}
var grids;var timeoutID;
@Entry@Componentstruct Game { private row: number = router.getParams().Number_row private column: number = router.getParams().Number_column @State time: number = 0 @State mine: number = router.getParams().difficulty @State Number_row: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] @State Number_column: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] @State statesGrids: number[][] = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] @State isCountDown: boolean = true @State statesBtn: number = 1
 aboutToAppear(){  if(this.row == 12){   this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']  } else if(this.row == 16){   this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']  }
  if(this.column == 12){   this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']  } else if(this.column == 16){   this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']  }
  this.initialize() }
 initialize(){  grids = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]
  let i = 0;  while(i < this.mine){   let random_row = Math.floor(Math.random() * this.row);   let random_column = Math.floor(Math.random() * this.column);   if(grids[random_row][random_column] == 0){    grids[random_row][random_column] = -1    i++   }  }
  for(let i = 0; i < this.row; i++){   for(let j = 0; j < this.column; j++){    if(grids[i][j] != -1){     let k = 0     for(let ii = i - 1; ii <= i + 1; ii++){      for(let jj = j - 1; jj <= j + 1; jj++){       if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && grids[ii][jj] == -1){        k++       }      }     }     grids[i][j] = k    }   }  }
  timeoutID = setInterval(() =>{   this.time += 1  }, 1000); }
 estimatemine(i, j){  for(let ii = i - 1; ii <= i + 1; ii++){   for(let jj = j - 1; jj <= j + 1; jj++){    if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && (ii != i || jj != j)){     if(this.statesGrids[ii][jj] == 0){      this.statesGrids[ii][jj] = 1      if(grids[ii][jj] == 0){       this.estimatemine(ii, jj)      }     }    }   }  } }
 build() {  Column(){   Row() {    Button('菜 单', { type: ButtonType.Normal, stateEffect: true })     .width(95)     .height(50)     .borderRadius(8)     .borderColor('#6379A8')     .borderWidth(2)     .fontSize(26)     .fontWeight(700)     .fontColor('#1E2B46')     .backgroundColor('#C1D0E6')     .margin({ left:10, top: 2 })     .onClick(() => {      clearInterval(timeoutID)      router.back()     })    setImage({ str: 'time.png' })    setText({ num: $time })    setImage({ str: 'lei.png' })    setText({ num: $mine })   }   .width('100%')   .height(60)   .backgroundColor('#C1D0E6')   .margin({ top: 80 })
   Grid() {    ForEach(this.Number_row, (day_row: string) => {     ForEach(this.Number_column, (day_column: string) => {      GridItem() {       Button({ type: ButtonType.Normal, stateEffect: true }){        if (this.isCountDown || !this.isCountDown) {         if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 1){          if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == -1){           Image($rawfile('mine.png'))            .height(358 / this.column - 2)            .width(358 / this.column - 2)            .scale({ x: 0.9, y: 0.9 })          }else{           Text(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 ? ' ' : grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString())            .height(358 / this.column - 2)            .width(358 / this.column - 2)            .fontSize(358 / this.column - 4)            .fontColor(colors[grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()])            .textAlign(TextAlign.Center)            .fontWeight(600)          }         }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 2){          Image($rawfile('flag.png'))           .height(358 / this.column - 2)           .width(358 / this.column - 2)           .scale({ x: 0.9, y: 0.9 })         }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 3){          Text('?')           .height(358 / this.column - 2)           .width(358 / this.column - 2)           .fontSize(358 / this.column - 2)           .fontColor('#FFFFFF')           .textAlign(TextAlign.Center)           .fontWeight(800)         }        }       }       .height(353 / this.column - 2)       .width(353 / this.column - 2)       .backgroundColor(colors['1' + this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1]])       .onClick(() => {        if(this.statesBtn == 1){         if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){          this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 1          if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){           this.estimatemine(parseInt(day_row) - 1, parseInt(day_column) - 1)          }         }        }else if(this.statesBtn == 0){         if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 && this.mine > 0) {          this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 2          this.mine--         }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 2) {          this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 3          this.mine++         }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 3) {          this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 0         }        }        if(this.isCountDown){         this.isCountDown = false        }else{         this.isCountDown = true        }       })      }     }, day_column => day_column)    }, day_row => day_row)   }   .columnsTemplate(this.row == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' :     this.row == 16 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr')   .rowsTemplate(this.column == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' :     this.column == 16 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr')   .columnsGap(2)   .rowsGap(2)   .width(355)   .backgroundColor('#8CC8F5')   .height(355)   .margin({ top: 10 })
   Row(){    setbtn({ str: '翻 开', col: '2', sta: $statesBtn })    setbtn({ str: '插 旗', col: '3', sta: $statesBtn })   }  }  .width('100%')  .height('100%')  .backgroundColor('#D6DDE7') }}
@Componentstruct setImage { private str: string
 build() {  Image($rawfile(this.str))   .height(50)   .width(50)   .scale({ x: 0.9, y: 0.9 })   .margin({ left:10, top: 3 }) }}
@Componentstruct setText { @Link num: number
 build() {  Text(this.num.toString())   .width(60)   .height(30)   .borderRadius(10)   .borderColor('#4162AA')   .borderWidth(1)   .fontSize(26)   .textAlign(TextAlign.Center)   .fontWeight(700)   .fontColor('#FFFFFF')   .backgroundColor('#4162AA')   .margin({ left:3, top: 5 })   .padding(0) }}
@Componentstruct setbtn { private str: string private col: string @Link sta: number
 build() {  Button(this.str, { type: ButtonType.Normal, stateEffect: true })   .width(130)   .height(50)   .borderRadius(8)   .borderColor('#6379A8')   .borderWidth(2)   .fontSize(26)   .fontWeight(700)   .fontColor('#1E2B46')   .backgroundColor(colors[this.col + this.sta])   .margin(10)   .onClick(() => {    if(this.col == '2'){     this.sta = 1    }else if(this.col == '3'){     this.sta = 0    }   }) }}

向右滑动查看完整代码→

4. 实现自定义弹窗和重新开始

定义状态变量success和over并初始化为false和true,用于记录游戏是否成功和游戏是否失败,当success为true时表示游戏成功,当over为false时表示游戏失败。

添加名为gamesuccess()和gameover()用于判断游戏是否成功和游戏是否失败。

使用装饰器@Customdialog自定义弹窗界面。

在函数initialize()的定时器中对success和over进行实时更新,并且当游戏成功或游戏失败时停止定时器和通过open()启动自定义弹窗界面。

在容器Grid的按钮组件的点击事件中增加判断,当游戏没有成功或游戏没有失败时才响应点击事件。

在重新开始按钮的点击事件中对所有变量进行初始化,并且调用函数initialize()。

game.ets:

import router from '@system.router'
const colors={ "0": "#E0E4F0", "1": "#2348A0", "2": "#247411", "3": "#AF121B", "4": "#04289E", "5": "#D2090E", "6": "#008000", "7": "#000080", "8": "#800000", "10": "#3C7CF6", "11": "#E0E4F0", "20": "#CBD8E8", "21": "#4774D8", "30": "#4774D8", "31": "#CBD8E8"}
var grids;var timeoutID;
@Entry@Componentstruct Game { private row: number = router.getParams().Number_row private column: number = router.getParams().Number_column @State time: number = 0 @State mine: number = router.getParams().difficulty @State Number_row: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] @State Number_column: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] @State statesGrids: number[][] = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],                  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] @State isCountDown: boolean = true @State statesBtn: number = 1 @State success: boolean = false @State over: boolean = true dialogController: CustomDialogController = new CustomDialogController({  builder: CustomDialogExample({ success : $success, difficulty : $mine, time : $time}),  autoCancel: true })
 aboutToAppear(){  if(this.row == 12){   this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']  } else if(this.row == 16){   this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']  }
  if(this.column == 12){   this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']  } else if(this.column == 16){   this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']  }
  this.initialize() }
 initialize(){  grids = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]
  let i = 0;  while(i < this.mine){   let random_row = Math.floor(Math.random() * this.row);   let random_column = Math.floor(Math.random() * this.column);   if(grids[random_row][random_column] == 0){    grids[random_row][random_column] = -1    i++   }  }
  for(let i = 0; i < this.row; i++){   for(let j = 0; j < this.column; j++){    if(grids[i][j] != -1){     let k = 0     for(let ii = i - 1; ii <= i + 1; ii++){      for(let jj = j - 1; jj <= j + 1; jj++){       if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && grids[ii][jj] == -1){        k++       }      }     }     grids[i][j] = k    }   }  }
  timeoutID = setInterval(() =>{   this.time += 1   this.success = this.gamesuccess()   this.over = this.gameover()   if(this.success || !this.over){    clearInterval(timeoutID)    this.dialogController.open()   }  }, 1000); }
 estimatemine(i, j){  for(let ii = i - 1; ii <= i + 1; ii++){   for(let jj = j - 1; jj <= j + 1; jj++){    if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && (ii != i || jj != j)){     if(this.statesGrids[ii][jj] == 0){      this.statesGrids[ii][jj] = 1      if(grids[ii][jj] == 0){       this.estimatemine(ii, jj)      }     }    }   }  } }
 gamesuccess(){  for(let i = 0; i < this.row; i++){   for(let j = 0; j < this.column; j++){    if(grids[i][j] != -1){     if(this.statesGrids[i][j] != 1){      return false     }    }   }  }  return true }
 gameover(){  for(let i = 0; i < this.row; i++){   for(let j = 0; j < this.column; j++){    if(grids[i][j] == -1){     if(this.statesGrids[i][j] == 1){      return false     }    }   }  }  return true }
 build() {  Column(){   Row() {    Button('菜 单', { type: ButtonType.Normal, stateEffect: true })     .width(95)     .height(50)     .borderRadius(8)     .borderColor('#6379A8')     .borderWidth(2)     .fontSize(26)     .fontWeight(700)     .fontColor('#1E2B46')     .backgroundColor('#C1D0E6')     .margin({ left:10, top: 2 })     .onClick(() => {      clearInterval(timeoutID)      router.back()     })    setImage({ str: 'time.png' })    setText({ num: $time })    setImage({ str: 'lei.png' })    setText({ num: $mine })   }   .width('100%')   .height(60)   .backgroundColor('#C1D0E6')   .margin({ top: 80 })
   Grid() {    ForEach(this.Number_row, (day_row: string) => {     ForEach(this.Number_column, (day_column: string) => {      GridItem() {       Button({ type: ButtonType.Normal, stateEffect: true }){        if (this.isCountDown || !this.isCountDown) {         if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 1){          if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == -1){           Image($rawfile('mine.png'))            .height(358 / this.column - 2)            .width(358 / this.column - 2)            .scale({ x: 0.9, y: 0.9 })          }else{           Text(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 ? ' ' : grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString())            .height(358 / this.column - 2)            .width(358 / this.column - 2)            .fontSize(358 / this.column - 4)            .fontColor(colors[grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()])            .textAlign(TextAlign.Center)            .fontWeight(600)          }         }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 2){          Image($rawfile('flag.png'))           .height(358 / this.column - 2)           .width(358 / this.column - 2)           .scale({ x: 0.9, y: 0.9 })         }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 3){          Text('?')           .height(358 / this.column - 2)           .width(358 / this.column - 2)           .fontSize(358 / this.column - 2)           .fontColor('#FFFFFF')           .textAlign(TextAlign.Center)           .fontWeight(800)         }        }       }       .height(353 / this.column - 2)       .width(353 / this.column - 2)       .backgroundColor(colors['1' + this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1]])       .onClick(() => {        if(!this.success && this.over){         if(this.statesBtn == 1){          if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){           this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 1           if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){            this.estimatemine(parseInt(day_row) - 1, parseInt(day_column) - 1)           }          }         }else if(this.statesBtn == 0){          if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 && this.mine > 0) {           this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 2           this.mine--          }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 2) {           this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 3           this.mine++          }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 3) {           this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 0          }         }         if(this.isCountDown){          this.isCountDown = false         }else{          this.isCountDown = true         }        }       })      }     }, day_column => day_column)    }, day_row => day_row)   }   .columnsTemplate(this.row == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' :    this.row == 16 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr')   .rowsTemplate(this.column == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' :     this.column == 16 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr')   .columnsGap(2)   .rowsGap(2)   .width(355)   .backgroundColor('#8CC8F5')   .height(355)   .margin({ top: 10 })
   Row(){    setbtn({ str: '翻 开', col: '2', sta: $statesBtn })    setbtn({ str: '插 旗', col: '3', sta: $statesBtn })   }   Button('重新开始', { type: ButtonType.Normal, stateEffect: true })    .width(150)    .height(50)    .borderRadius(8)    .borderColor('#6379A8')    .borderWidth(2)    .fontSize(26)    .fontWeight(700)    .fontColor('#1E2B46')    .backgroundColor('#CBD8E8')    .margin(10)    .onClick(() => {     clearInterval(timeoutID)     this.statesBtn = 1     this.success = false     this.over = true     this.time = 0     this.mine = router.getParams().difficulty     if(this.isCountDown){      this.isCountDown = false     }else{      this.isCountDown = true     }     for(let i = 0; i < this.row; i++){      for(let j = 0; j < this.column; j++){       this.statesGrids[i][j] = 0      }     }     this.initialize()    })  }  .width('100%')  .height('100%')  .backgroundColor('#D6DDE7') }}
@Componentstruct setImage { private str: string
 build() {  Image($rawfile(this.str))   .height(50)   .width(50)   .scale({ x: 0.9, y: 0.9 })   .margin({ left:10, top: 3 }) }}
@Componentstruct setText { @Link num: number
 build() {  Text(this.num.toString())   .width(60)   .height(30)   .borderRadius(10)   .borderColor('#4162AA')   .borderWidth(1)   .fontSize(26)   .textAlign(TextAlign.Center)   .fontWeight(700)   .fontColor('#FFFFFF')   .backgroundColor('#4162AA')   .margin({ left:3, top: 5 })   .padding(0) }}
@Componentstruct setbtn { private str: string private col: string @Link sta: number
 build() {  Button(this.str, { type: ButtonType.Normal, stateEffect: true })   .width(130)   .height(50)   .borderRadius(8)   .borderColor('#6379A8')   .borderWidth(2)   .fontSize(26)   .fontWeight(700)   .fontColor('#1E2B46')   .backgroundColor(colors[this.col + this.sta])   .margin(10)   .onClick(() => {    if(this.col == '2'){     this.sta = 1    }else if(this.col == '3'){     this.sta = 0    }   }) }}
@CustomDialogstruct CustomDialogExample { controller: CustomDialogController @Link success: boolean @Link difficulty: number @Link time: number
 build() {  Column() {   Text(this.success ? '挑战成功' : '挑战失败')    .width('100%')    .fontSize(28)    .fontWeight(900)    .fontColor('#FFFFFF')    .textAlign(TextAlign.Center)    .margin({ top: 5, bottom: 5 })   Text('当前难度:' + (this.difficulty == 10 ? '初级' : this.difficulty == 30 ? '中级' :   this.difficulty == 50 ? '高级' : ' '))    .width('100%')    .fontSize(26)    .fontWeight(600)    .fontColor('#1E2B46')    .textAlign(TextAlign.Center)    .margin({ top: 5, bottom: 5 })   Text('用时:' + (Math.floor(this.time / 3600) < 10 ? '0' + Math.floor(this.time / 3600).toString() : Math.floor(this.time / 3600).toString())   + ':' + (Math.floor(this.time % 3600 / 60) < 10 ? '0' + Math.floor(this.time % 3600 / 60).toString() : Math.floor(this.time % 3600 / 60).toString())   + ':' + (Math.floor(this.time % 3600 % 60) < 10 ? '0' + Math.floor(this.time % 3600 % 60).toString() : Math.floor(this.time % 3600 % 60).toString()))    .width('100%')    .fontSize(26)    .fontWeight(600)    .fontColor('#1E2B46')    .textAlign(TextAlign.Center)    .margin({ top: 5, bottom: 5 })   Row() {    Button("返回主页", { type: ButtonType.Normal, stateEffect: true })     .width(130)     .height(50)     .borderRadius(8)     .borderColor('#6379A8')     .borderWidth(2)     .fontSize(22)     .fontWeight(600)     .fontColor('#1E2B46')     .backgroundColor('#D6DDE7')     .margin({ left: 25, top: 5, bottom: 5 })     .onClick(() => {      router.back()     })    Button("返回界面", { type: ButtonType.Normal, stateEffect: true })     .width(130)     .height(50)     .borderRadius(8)     .borderColor('#6379A8')     .borderWidth(2)     .fontSize(22)     .fontWeight(600)     .fontColor('#1E2B46')     .backgroundColor('#D6DDE7')     .margin({ left: 25, top: 5, bottom: 5 })     .onClick(() => {      this.controller.close()     })   }   .width('100%')  }.backgroundColor('#CBD2E4') }}
编辑:jq
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 函数
    +关注

    关注

    3

    文章

    4303

    浏览量

    62411
  • 容器
    +关注

    关注

    0

    文章

    492

    浏览量

    22041
  • HarmonyOS
    +关注

    关注

    79

    文章

    1967

    浏览量

    29997

原文标题:基于HarmonyOS ArkUI 3.0 框架的木棉花扫雷(下)

文章出处:【微信号:HarmonyOS_Community,微信公众号:电子发烧友开源社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    HarmonyOS NEXT Developer Beta1中的Kit

    HarmonyOS NEXT Developer Preview1(API 11)版本开始,HarmonyOS SDK以Kit维度提供丰富、完备的开放能力,涵盖应用框架、系统、媒体、图形、应用服务
    发表于 06-26 10:47

    鸿蒙开发ArkUI-X基础知识:【ArkUI代码工程及构建介绍】

    ArkUI作为OpenHarmony的默认开发框架,在本项目(ArkUI-X)中需要做到一套代码同时支持多平台构建,所以会采取共仓开发的方式,部分仓直接指向OpenHarmony相关开源仓。
    的头像 发表于 05-25 16:45 1988次阅读
    鸿蒙开发<b class='flag-5'>ArkUI</b>-X基础知识:【<b class='flag-5'>ArkUI</b>代码工程及构建介绍】

    鸿蒙开发ArkUI-X基础知识:【ArkUI跨平台设计总体说明】

    本文档描述ArkUI开发框架跨平台运行能力相关的总体技术方案。
    的头像 发表于 05-24 15:41 1484次阅读
    鸿蒙开发<b class='flag-5'>ArkUI</b>-X基础知识:【<b class='flag-5'>ArkUI</b>跨平台设计总体说明】

    鸿蒙ArkUI-X框架开发:【开发准备】

    本文档适用于ArkUI-X框架开发的初学者。通过环境搭建、代码下载、代码编译、API扩展和使用,快速了解跨平台项目开发流程。
    的头像 发表于 05-23 21:02 427次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>-X<b class='flag-5'>框架</b>开发:【开发准备】

    鸿蒙ArkUI-X跨语言调用说明:【平台桥接(@arkui-x.bridge)】

    平台桥接用于客户端(ArkUI)和平台(Android或iOS)之间传递消息,即用于ArkUI与平台双向数据传递、ArkUI侧调用平台的方法、平台调用ArkUI侧的方法。
    的头像 发表于 05-21 15:09 667次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>-X跨语言调用说明:【平台桥接(@<b class='flag-5'>arkui</b>-x.bridge)】

    鸿蒙ArkUI-X跨平台开发:【SDK目录结构介绍】

    本文档配套ArkUI-X,将OpenHarmony ArkUI开发框架扩展到不同的OS平台,比如Android和iOS平台,让开发者基于ArkUI,可复用大部分的应用代码(UI以及主要
    的头像 发表于 05-20 16:28 768次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>-X跨平台开发:【SDK目录结构介绍】

    鸿蒙ArkUI-X跨平台开发:【 应用工程结构说明】

    本文档配套ArkUI-X,将OpenHarmony ArkUI开发框架扩展到不同的OS平台,比如Android和iOS平台,让开发者基于ArkUI,可复用大部分的应用代码(UI以及主要
    的头像 发表于 05-19 21:05 537次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>-X跨平台开发:【 应用工程结构说明】

    鸿蒙跨平台框架:【ArkUi-X】创建工程

    鸿蒙推出了鸿ArkUi-X 框架所以就写个文章分享一下
    的头像 发表于 05-13 17:48 860次阅读
    鸿蒙跨平台<b class='flag-5'>框架</b>:【<b class='flag-5'>ArkUi</b>-X】创建工程

    鸿蒙ArkUI:【从代码到UI显示的整体渲染流程】

    方舟开发框架(简称ArkUI)是鸿蒙开发的UI框架,提供如下两种开发范式,我们 **只学声明式开发范式**
    的头像 发表于 05-13 16:06 796次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>:【从代码到UI显示的整体渲染流程】

    鸿蒙开发学习:初探【ArkUI-X】

    **简单来说,ArkTS + ArkUI-X 对标的框架为 flutter,一次代码,编译为 native 全平台运行**
    的头像 发表于 05-13 15:58 976次阅读
    鸿蒙开发学习:初探【<b class='flag-5'>ArkUI</b>-X】

    HarmonyOS开发案例:【常用组件与布局】

    HarmonyOS ArkUI提供了丰富多样的UI组件,您可以使用这些组件轻松地编写出更加丰富、漂亮的界面。
    的头像 发表于 05-09 18:20 1163次阅读
    <b class='flag-5'>HarmonyOS</b>开发案例:【常用组件与布局】

    鸿蒙ArkUI开发学习:【渲染控制语法】

    ArkUI开发框架是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架,它支持程序使用 `if/else` 条件渲染, `ForEach` 循环渲染
    的头像 发表于 04-09 16:40 894次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>开发学习:【渲染控制语法】

    2024款鸿蒙OS 最新HarmonyOS Next_HarmonyOS4.0系列教程分享

    Next_HarmonyOS4.0系列教程由业内大神录制于2024年,包括:HarmonyOS ArkTs、ArkUI、ArkTs Api、ArkTs Native、OpenHarmony
    发表于 02-28 10:29

    跨Android、iOS、鸿蒙多平台框架ArkUI-X

    ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具,帮助您提升移动应用界面开发效率30%。您只需使用一套ArkTS API,就能
    的头像 发表于 01-31 14:52 1718次阅读
    跨Android、iOS、鸿蒙多平台<b class='flag-5'>框架</b><b class='flag-5'>ArkUI</b>-X

    鸿蒙ArkUI开发-Tabs组件的使用

    鸿蒙ArkUI开发-Tabs组件的使用
    的头像 发表于 01-19 16:01 1754次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>开发-Tabs组件的使用