鸿蒙开发案例：进京赶考（1）

2024-02-29 04:36
文章标签 开发 案例 鸿蒙 赶考 进京

本文主要是介绍鸿蒙开发案例：进京赶考（1），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

系列文章目录

鸿蒙开发案例：进京赶考（1）

案例介绍

“进京赶考”是一款抽卡游戏，玩家在游戏界面中通过随机抽取到不同颜色的卡片，可获得不 同积分；抽卡结束后，根据积分的高低对游戏成绩进行判定（状元、榜眼、探花、进士）。本篇完成如图1所示的入口界面布局及问号的事件处理

图1

一、准备图片素材

所有图片放入项目-resources-media目录下，如图2所示

图2

二、分析布局

整体Column布局，内嵌三个Row布局，如图3所示

图3

三、实现布局

1.布局代码如下

@Entry
@Component
struct Index {build() {Column({space:10}) {Text('进京赶考').fontSize(40).fontWeight(700).margin({top:10,bottom:10})Row({space:20}) {Button('状').backgroundColor(0xC7000B).type(ButtonType.Normal).fontSize(50).fontWeight(FontWeight.Bold).width('40%').height('20%').borderRadius(8).fontWeight(600).shadow({radius:10,color:0xD3D3D3,offsetX:20,offsetY:20})Button('元').backgroundColor(Color.Yellow).type(ButtonType.Normal).fontSize(50).fontWeight(FontWeight.Bold).width('40%').height('20%').borderRadius(8).fontWeight(600).shadow({radius:10,color:0xD3D3D3,offsetX:20,offsetY:20})}.width('100%').justifyContent(FlexAlign.Center)Row({space:20}) {Button('及').backgroundColor(Color.Blue).type(ButtonType.Normal).fontSize(50).fontWeight(FontWeight.Bold).width('40%').height('20%').borderRadius(8).fontWeight(600).shadow({radius:10,color:0xD3D3D3,offsetX:20,offsetY:20})Button('第').backgroundColor(Color.Green).type(ButtonType.Normal).fontSize(50).fontWeight(FontWeight.Bold).width('40%').height('20%').borderRadius(8).fontWeight(600).shadow({radius:10,color:0xD3D3D3,offsetX:20,offsetY:20})}.width('100%').justifyContent(FlexAlign.Center)Row({space:10}){TextInput({placeholder:'输入考生姓名'}).width('80%').fontSize(20)Image($r('app.media.about')).width(30)}.margin({top:20})Button('进入游戏').width('50%').borderRadius(8).fontSize(20).fontWeight(600).shadow({radius:10,color:0xD3D3D3,offsetX:20,offsetY:20})}.height('100%')}
}

2.代码优化

观察初始界面，虽然实现了界面效果，但你有没有发现代码存在重复问题呢？如下图所示4个按钮组件的这部分设置代码完全一样。

我们可以如何对代码优化呢？可以将上述代码提取出来成为组件样式，另外四个组件背景色不同，可以定义为方法参数即可，最后4个组件去调用即可

抽取的组件样式代码如下：

@Extend(Button)
function buttonStyle(color:Color){.backgroundColor(color).type(ButtonType.Normal).fontSize(50).fontWeight(FontWeight.Bold).width('40%').height('20%').borderRadius(8).fontWeight(600).shadow({radius:10,color:0xD3D3D3,offsetX:20,offsetY:20})
}

整个入口界面代码优化后如下：

@Entry
@Component
struct Index {build() {Column({space:10}) {Text('进京赶考').fontSize(40).fontWeight(700).margin({top:10,bottom:10})Row({space:20}) {Button('状').buttonStyle(0xC7000B)Button('元').buttonStyle(Color.Yellow)}.width('100%').justifyContent(FlexAlign.Center)Row({space:20}) {Button('及').buttonStyle(Color.Blue)Button('第').buttonStyle(Color.Green)}.width('100%').justifyContent(FlexAlign.Center)Row({space:10}){TextInput({placeholder:'输入考生姓名'}).width('80%').fontSize(20)Image($r('app.media.about')).width(30)}.margin({top:20})Button('进入游戏').width('50%').borderRadius(8).fontSize(20).fontWeight(600).shadow({radius:10,color:0xD3D3D3,offsetX:20,offsetY:20})}.height('100%')}
}
@Extend(Button)
function buttonStyle(color:Color){.backgroundColor(color).type(ButtonType.Normal).fontSize(50).fontWeight(FontWeight.Bold).width('40%').height('20%').borderRadius(8).fontWeight(600).shadow({radius:10,color:0xD3D3D3,offsetX:20,offsetY:20})
}

四、事件处理

目前点击问号图片没有任何反应，我们希望点击问号按钮时，出现游戏规则介绍弹窗，该如何实现呢？

由于游戏规则描述比较长，直接放在界面里面可读性不好，将游戏规则提取出来，放到单独的存放常量的文件里面。该文件需要单独创建，在ets下新建common文件夹，在common下新建constants文件夹，在constants文件夹下新建CommonConstants.ets文件

CommonConstants.ets文件代码如下：

export default class CommonConstants{/*** 游戏规则*/static readonly RULES_OF_THE_GAME='' +'共有红黄蓝绿四种签；' +'红签+50，黄签+10，绿签-5，蓝签归0；' +'每轮游戏共3次抽签机会，' +'每抽一次、记录一次得分，' +'抽签结束后根据总得分进行成绩分段：'+'【 状元(≥50)、榜眼(40)、探花(25)、进士(10)、壮志未酬(<10) 】  ' +'抽到红签(得分≥50)游戏结束；' +'抽到蓝签(得分归0)游戏结束；' +'3次机会用完,游戏结束。';
}

弹窗功能模块单独放到一个方法里

 //定义到struct内部aboutGame(){AlertDialog.show({title:'游戏规则',message:CommonConstants.RULES_OF_THE_GAME,autoCancel:true,alignment:DialogAlignment.Bottom,gridCount:3,offset:{dx:0,dy:-300},primaryButton:{value:'cancel',action:()=>{console.info('Callback when the first button is clicked')}},secondaryButton:{value:'ok',action:()=>{console.info('Callback when the second button is clicked')}},cancel:()=>{console.info('Closed callbacks')}})}

注意：aboutGame为自定义方法，该方法和样式代码不同，该方法需要定义到struct内部

小技巧：关于AlertDialog.show方法里面的这些参数如果不了解什么含义，可以通过去掉部分属性观察运行效果，改变某些属性观察运行效果，这样你就了解了各个属性具体的作用了

接下来实现问号按钮的点击事件处理，也就是直接调用上面的自定义方法aboutGame

Image($r('app.media.about')).width(30).onClick(()=>{this.aboutGame()})

总结

本文实现了如何界面布局并对其进行了优化，并实现了问号按钮的事件处理。完整代码如下：

import CommonConstants from '../common/constants/CommonConstants'
@Entry
@Component
struct Index {build() {Column({space:10}) {Text('进京赶考').fontSize(40).fontWeight(700).margin({top:10,bottom:10})Row({space:20}) {Button('状').buttonStyle(0xC7000B)Button('元').buttonStyle(Color.Yellow)}.width('100%').justifyContent(FlexAlign.Center)Row({space:20}) {Button('及').buttonStyle(Color.Blue)Button('第').buttonStyle(Color.Green)}.width('100%').justifyContent(FlexAlign.Center)Row({space:10}){TextInput({placeholder:'输入考生姓名'}).width('80%').fontSize(20)Image($r('app.media.about')).width(30).onClick(()=>{this.aboutGame()})}.margin({top:20})Button('进入游戏').width('50%').borderRadius(8).fontSize(20).fontWeight(600).shadow({radius:10,color:0xD3D3D3,offsetX:20,offsetY:20})}.height('100%')}//定义到struct内部aboutGame(){AlertDialog.show({title:'游戏规则',message:CommonConstants.RULES_OF_THE_GAME,autoCancel:true,alignment:DialogAlignment.Bottom,gridCount:3,offset:{dx:0,dy:-300},primaryButton:{value:'cancel',action:()=>{console.info('Callback when the first button is clicked')}},secondaryButton:{value:'ok',action:()=>{console.info('Callback when the second button is clicked')}},cancel:()=>{console.info('Closed callbacks')}})}
}
@Extend(Button)
function buttonStyle(color:Color){.backgroundColor(color).type(ButtonType.Normal).fontSize(50).fontWeight(FontWeight.Bold).width('40%').height('20%').borderRadius(8).fontWeight(600).shadow({radius:10,color:0xD3D3D3,offsetX:20,offsetY:20})
}

这篇关于鸿蒙开发案例：进京赶考（1）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/757595。

相关文章

Python实例题之pygame开发打飞机游戏实例代码

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,：本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部
阅读更多...
使用Python开发一个现代化屏幕取色器

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,：本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.
阅读更多...
华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

《华为鸿蒙HarmonyOS5.1官宣7月开启升级!首批支持名单公布》在刚刚结束的华为Pura80系列及全场景新品发布会上，除了众多新品的发布，还有一个消息也点燃了所有鸿蒙用户的期待，那就是Ha... 在今日的华为 Pura 80 系列及全场景新品发布会上，华为宣布鸿蒙 HarmonyOS 5.1 将于 7
阅读更多...
六个案例搞懂mysql间隙锁

六个案例搞懂mysql间隙锁

《六个案例搞懂mysql间隙锁》MySQL中的间隙是指索引中两个索引键之间的空间,间隙锁用于防止范围查询期间的幻读,本文主要介绍了六个案例搞懂mysql间隙锁,具有一定的参考价值,感兴趣的可以了解一下... 目录概念解释间隙锁详解间隙锁触发条件间隙锁加锁规则案例演示案例一：唯一索引等值锁定存在的数据案例二：
阅读更多...
Python使用smtplib库开发一个邮件自动发送工具

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件
阅读更多...
基于Python开发一个有趣的工作时长计算器

基于Python开发一个有趣的工作时长计算器

《基于Python开发一个有趣的工作时长计算器》随着远程办公和弹性工作制的兴起,个人及团队对于工作时长的准确统计需求日益增长,本文将使用Python和PyQt5打造一个工作时长计算器,感兴趣的小伙伴可... 目录概述功能介绍界面展示php软件使用步骤说明代码详解1.窗口初始化与布局2.工作时长计算核心逻辑3
阅读更多...
MySQL 表的内外连接案例详解

MySQL 表的内外连接案例详解

《MySQL表的内外连接案例详解》本文给大家介绍MySQL表的内外连接,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录表的内外连接（重点）内连接外连接表的内外连接（重点）内连接内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选，我
阅读更多...
python web 开发之Flask中间件与请求处理钩子的最佳实践

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1
阅读更多...
如何基于Python开发一个微信自动化工具

如何基于Python开发一个微信自动化工具

《如何基于Python开发一个微信自动化工具》在当今数字化办公场景中,自动化工具已成为提升工作效率的利器,本文将深入剖析一个基于Python的微信自动化工具开发全过程,有需要的小伙伴可以了解下... 目录概述功能全景1. 核心功能模块2. 特色功能效果展示1. 主界面概览2. 定时任务配置3. 操作日志演示
阅读更多...
Java Stream.reduce()方法操作实际案例讲解

Java Stream.reduce()方法操作实际案例讲解

《JavaStream.reduce()方法操作实际案例讲解》reduce是JavaStreamAPI中的一个核心操作,用于将流中的元素组合起来产生单个结果,：本文主要介绍JavaStream.... 目录一、reduce的基本概念1. 什么是reduce操作2. reduce方法的三种形式二、reduce
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2