鸿蒙开发案例：进京赶考（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中re模块结合正则表达式的实际应用案例

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提
阅读更多...
Python get()函数用法案例详解

Python get()函数用法案例详解

《Pythonget()函数用法案例详解》在Python中,get()是字典（dict）类型的内置方法,用于安全地获取字典中指定键对应的值,它的核心作用是避免因访问不存在的键而引发KeyError错... 目录简介基本语法一、用法二、案例：安全访问未知键三、案例：配置参数默认值简介python是一种高级编
阅读更多...
MySQL中的索引结构和分类实战案例详解

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2
阅读更多...
SpringBoot开发中十大常见陷阱深度解析与避坑指南

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错？是不是同时用了.properties和.yml？二、换个位置配置就失效？搞清楚加
阅读更多...
从入门到精通MySQL 数据库索引(实战案例)

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么？能干嘛？核心作用：二、索引的 4 种主要类型（附通俗例子）1. BTree 索引（
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
Python中对FFmpeg封装开发库FFmpy详解

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》：本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF
阅读更多...
基于Python开发Windows屏幕控制工具

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间
阅读更多...
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.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2