关于android:基于HarmonyOS-ArkUI-30-框架的木棉花扫雷上

HarmonyOS ArkUI 3.0 框架试玩初体验二来了 || ヽ (~▽~) ノミ |Ю，这一次相比上一次的合成 1024 开发实战，多了局部内容：显示动画、页面跳转与数据传递、网格容器 Grid、自定义窗口等内容。原本想做成分布式 HarmonyOS ArkUI 3.0 木棉花扫雷的，然而苦于没有相应 API 版本的分布式模拟器或多台真机用于调试和运行，只能落得个单机的难堪实战了~□~||

::: hljs-center

:::

::: hljs-center

:::

DevEco Studio 3.0 下载
DevEco Studio 3.0 装置

DevEco Studio 下载安装胜利后，关上 DevEco Studio，点击左上角的 File，点击 New，再抉择 New Project，抉择 Empty Ability 选项，点击 Next 按钮。

将文件命名为 SaoLei（文件名不能呈现中文或者特殊字符，否则将无奈胜利创立我的项目文件），Project Type 勾选 Application，抉择保留门路，Language 勾选 eTS，抉择 API7，设施勾选 Phone，最初点击 Finish 按钮。

在 entry>src>main>config.json 文件中最下方 ”launchType”: “standard” 的前面增加以下代码，这样就能够实现去掉利用上方的标签栏了。
config.json最下方局部代码：

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

将图片保留到 entry>src>main>resources>rawfile 文件中。

在 entry>src>ets>default>pages>index.ets 文件右键，在弹出的菜单栏中抉择 Refactor，再在弹出的子菜单栏中抉择 Rename，或者按 Shift+F6，将文件命名为 logo.ets。

将 entry>src>main>config.json 文件中 ”js” 项中的 ”pages” 项中的 ”pages/index” 更改为 ”pages/logo”。
config.json最下方局部代码：

    "js": [
      {
        "mode": {
          "syntax": "ets",
          "type": "pageAbility"
        },
        "pages": ["pages/logo"],
        "name": "default",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": false
        }
      }
    ]

在 logo.ets 文件中，通过 Image($rawfile(‘LOGO.png’))可搁置 Logo 图片，通过 Text(‘ 木棉花扫雷 ’)可搁置文字内容。
属性 linearGradient 为设置突变色彩，linearGradient 中的 angle 为突变角度，设置为 180，即为从上往下突变，colors 则为突变的色彩。
logo.ets:

@Entry
@Component
struct Logo {build() {Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, direction: FlexDirection.Column}) {Image($rawfile('LOGO.png'))
        .objectFit(ImageFit.Contain)
        .height(300)
      Text('木棉花扫雷')
        .fontSize(30)
        .fontColor(Color.White)
        .margin({top: 200})
    }
    .width('100%')
    .height('100%')
    .linearGradient(
      {
        angle: 180,
        colors: [['#D3D7DC', 0.1], ["#B4BED2", 0.6],  ["#A0AAC8", 1]]
      })
  }
}

这里应用的动画成果是通过 animateTo 显式动画实现的。animateTo 显式动画能够设置组件从状态 A 到状态 B 的变动动画成果，包含款式、地位信息和节点的减少删除等，开发者无需关注变动过程，只需指定终点和起点的状态。animateTo 还提供播放状态的回调接口，是对属性动画的加强与封装。
增加状态变量 opacityValue 和 scaleValue 并初始化为 0，别离用于示意透明度和放缩的倍数，动画成果中实现这两个数值从 0 到 1，即可实现 Logo 的渐出和放大成果。
定义一个贝塞尔曲线 cubicBezier，Curves.cubicBezier(0.1, 0.2, 1, 1)。因为须要应用到动画能力接口中的插值计算，故须要导入 curves 模块。@ohos.curves 模块提供了线性 Curve. Linear、阶梯 step、三阶贝塞尔（cubicBezier）和弹簧（spring）插值曲线的初始化函数，能够依据入参创立一个插值曲线对象。
在 animateTo 显式动画中，设置动画时长（duration）为 2s，延时（delay）0.1s 开始播放，设置显示动效 event 的闭包函数（curve），即终点状态到起点状态为透明度 opacityValue 和大小 scaleValue 从 0 到 1。
logo.ets:

// @ts-nocheck
import Curves from '@ohos.curves'

@Entry
@Component
struct Logo {
  @State private opacityValue: number = 0
  @State private scaleValue: number = 0
  private curve1 = Curves.cubicBezier(0.1, 0.2, 1, 1)

  build() {Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, direction: FlexDirection.Column}) {Image($rawfile('LOGO.png'))
        .objectFit(ImageFit.Contain)
        .height(300)
        .scale({x: this.scaleValue, y: this.scaleValue})
        .opacity(this.opacityValue)
        .onAppear(() => {
          animateTo({
            duration: 2000,
            curve: this.curve1,
            delay: 100,
          }, () => {
            this.opacityValue = 1
            this.scaleValue = 1
          })
        })
      Text('木棉花扫雷')
        .fontSize(30)
        .fontColor(Color.White)
        .margin({top: 200})
    }
    .width('100%')
    .height('100%')
    .linearGradient(
      {
        angle: 180,
        colors: [['#D3D7DC', 0.1], ["#B4BED2", 0.6],  ["#A0AAC8", 1]]
      })
  }
}

先创立一个 mainpage.ets 文件。
在 animateTo 显示动画播放完结的 onFinish 回调接口中，调用定时器 Timer 的 setTimeout 接口延时 1s 后，调用 router.replace，显示 mainpage.ets 页面。其中同样须要导入 router 模块。
logo.ets:

// @ts-nocheck
import router from '@system.router'
import Curves from '@ohos.curves'

@Entry
@Component
struct Logo {
  @State private opacityValue: number = 0
  @State private scaleValue: number = 0
  private curve1 = Curves.cubicBezier(0.1, 0.2, 1, 1)

  build() {Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, direction: FlexDirection.Column}) {Image($rawfile('LOGO.png'))
        .objectFit(ImageFit.Contain)
        .height(300)
        .scale({x: this.scaleValue, y: this.scaleValue})
        .opacity(this.opacityValue)
        .onAppear(() => {
          animateTo({
            duration: 2000,
            curve: this.curve1,
            delay: 100,
            onFinish: () => {setTimeout(() => {router.replace({ uri: "pages/mainpage"})
              }, 1000);
            }
          }, () => {
            this.opacityValue = 1
            this.scaleValue = 1
          })
        })
      Text('木棉花扫雷')
        .fontSize(30)
        .fontColor(Color.White)
        .margin({top: 200})
    }
    .width('100%')
    .height('100%')
    .linearGradient(
      {
        angle: 180,
        colors: [['#D3D7DC', 0.1], ["#B4BED2", 0.6],  ["#A0AAC8", 1]]
      })
  }
}

游戏页面的背景和欢送页面的背景简直一样，这里就不反复啰嗦了。
mainpage.ets:

@Entry
@Component
struct Mainpage {build() {Column() {Image($rawfile('mine.png'))
        .objectFit(ImageFit.Contain)
        .height(300)
        .scale({x: 0.5, y: 0.5})
        .opacity(0.8)
    }
    .width('100%')
    .height('100%')
    .linearGradient(
      {
        angle: 180,
        colors: [['#D3D7DC', 0.1], ["#B4BED2", 0.6],  ["#A0AAC8", 1]]
      })
  }
}

从效果图能够看出按钮的款式是统一的，因而咱们能够应用装璜器 @Component 自定义按钮。增加四个变量 String、difficulty、Number_row 和 Number_column，别离用于记录难度文本、地雷数量、网格的行数和网格的列数。在 Button 组件中设置图片和文本的款式。[br/> 在装璜器 @Entry 装璜的组件中，通过调用自定义组件的模式绘制三个按钮。
mainpage.ets:](mailto:br/%3E%E5%9C%A8%E8%A3%85%E9%A5%B0%E5%99%A8@Entry%E8%A3%85%E9%A5%B0%E7%9A%84%E7%BB%84%E4%BB%B6%E4%B8%AD%EF%BC%8C%E9%80%9A%E8%BF%87%E8%B0%83%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84%E5%BD%A2%E5%BC%8F%E7%BB%98%E5%88%B6%E4%B8%89%E4%B8%AA%E6%8C%89%E9%92%AE%E3%80%82%3Cbr/)

@Entry
@Component
struct Mainpage {build() {Column() {Image($rawfile('mine.png'))
        .objectFit(ImageFit.Contain)
        .height(300)
        .scale({x: 0.5, y: 0.5})
        .opacity(0.8)

      setButton({String: '高级', difficulty: 10, Number_row: 9, Number_column: 9});
      setButton({String: '中级', difficulty: 30, Number_row: 12, Number_column: 12});
      setButton({String: '高级', difficulty: 50, Number_row: 16, Number_column: 16});
    }
    .width('100%')
    .height('100%')
    .linearGradient(
      {
        angle: 180,
        colors: [['#D3D7DC', 0.1], ["#B4BED2", 0.6],  ["#A0AAC8", 1]]
      })
  }
}

@Component
struct setButton {
  private String: string
  private difficulty: number
  private Number_row: number
  private Number_column: number

  build() {Button({ type: ButtonType.Capsule, stateEffect: true}){Column(){Text(this.String)
          .textAlign(TextAlign.Center)
          .fontSize(30)
          .fontWeight(600)
          .fontColor('#0000FF')
          .margin({top: -5})
        Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, direction: FlexDirection.Row}) {Text('（' + this.difficulty.toString() + '个')
            .textAlign(TextAlign.Center)
            .fontSize(22)
            .fontWeight(600)
            .fontColor('#416EBE')
            .margin({top: -2, right: 5})
          Image($rawfile('mine.png'))
            .height(26)
            .width(26)
          Text(this.Number_row.toString() + '*' + this.Number_column.toString() + '）')
            .textAlign(TextAlign.Center)
            .fontSize(22)
            .fontWeight(600)
            .fontColor('#416EBE')
            .margin({left: 5, top: -2})
        }.margin({top: 5})
      }
    }
    .width(220)
    .height(90)
    .backgroundColor('#F3F7FF')
    .margin({top: 10})
  }
}

先创立一个 game.ets 文件。
在自定义按钮组件中增加点击事件 onClick()，调用 router.push 接口，其中 uri 为跳转的页面，params 为携带的数据，模式为 params: { key: values}，在新页面调用 router.getParams().key 来获取到页面跳转来时携带的 key 对应的数据，其中同样须要导入 router 模块。
mainpage.ets:

import router from '@system.router'

@Entry
@Component
struct Mainpage {build() {Column() {Image($rawfile('mine.png'))
        .objectFit(ImageFit.Contain)
        .height(300)
        .scale({x: 0.5, y: 0.5})
        .opacity(0.8)

      setButton({String: '高级', difficulty: 10, Number_row: 9, Number_column: 9});
      setButton({String: '中级', difficulty: 30, Number_row: 12, Number_column: 12});
      setButton({String: '高级', difficulty: 50, Number_row: 16, Number_column: 16});
    }
    .width('100%')
    .height('100%')
    .linearGradient(
      {
        angle: 180,
        colors: [['#D3D7DC', 0.1], ["#B4BED2", 0.6],  ["#A0AAC8", 1]]
      })
  }
}

@Component
struct setButton {
  private String: string
  private difficulty: number
  private Number_row: number
  private Number_column: number

  build() {Button({ type: ButtonType.Capsule, stateEffect: true}){Column(){Text(this.String)
          .textAlign(TextAlign.Center)
          .fontSize(30)
          .fontWeight(600)
          .fontColor('#0000FF')
          .margin({top: -5})
        Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, direction: FlexDirection.Row}) {Text('（' + this.difficulty.toString() + '个')
            .textAlign(TextAlign.Center)
            .fontSize(22)
            .fontWeight(600)
            .fontColor('#416EBE')
            .margin({top: -2, right: 5})
          Image($rawfile('mine.png'))
            .height(26)
            .width(26)
          Text(this.Number_row.toString() + '*' + this.Number_column.toString() + '）')
            .textAlign(TextAlign.Center)
            .fontSize(22)
            .fontWeight(600)
            .fontColor('#416EBE')
            .margin({left: 5, top: -2})
        }.margin({top: 5})
      }
    }
    .width(220)
    .height(90)
    .backgroundColor('#F3F7FF')
    .margin({top: 10})
    .onClick(() => {
      router.push({
        uri: 'pages/game',
        params: {difficulty: this.difficulty, Number_row: this.Number_row ,Number_column: this.Number_column}
      })
    })
  }
}

至此，欢送页面和主页面都曾经全副实现了，在基于 HarmonyOS ArkUI 3.0 框架的木棉花扫雷（下）将会持续分享游戏页面的实现(～~▽~)～

关注我，每天分享常识干货~

关于android:基于HarmonyOS-ArkUI-30-框架的木棉花扫雷上

前言

效果图

代码文件构造

注释

一、创立一个空白的工程

1. 装置和配置 DevEco Studio 3.0

2. 创立一个 Empty eTS Ability 利用

3. 筹备工作

4. 保留图片

二、欢送页面

1. 更改文件名

2. 增加背景

3. 增加动画成果

4. 增加跳转成果

三、主页页面

1. 增加背景

2. 增加按钮

3. 响应点击跳转事件