更多内容请访问：鸿蒙科技社区https://harmonyos.51cto.com，与华为官方共同打造，中国国歌响彻东京，最终夺得38金奖牌和88枚奖牌。2021年8月24日，东京残奥会开幕。中国残疾人运动员将奔赴东京，精彩还在继续……需求分析奥运会是人民群众最关心的体育赛事。他和参赛选手都很熟悉，但十多天后的残奥会却鲜为人知。本APP旨在打造一款让用户快速了解残奥会动态及相关知识的应用，让更多人关注残奥会，关注这群同样为国家争光的运动员。主要功能介绍长按残奥会服务卡应用，点击服务卡选项，会显示开发的服务卡。根据三种不同尺寸的服务卡，可以查看残奥会奖牌榜、残奥会项目、中国残奥会运动员信息。具体如下：1、服务卡（2×2）2×2卡样式为东京残奥会会标，效果如下图1所示：图12×2卡样式点击此处卡片跳转到奖牌列表页面，可以按国家查看奖牌数量。如图2所示：图2奖牌列表2.服务卡（2×4）在2×4的卡片中，左侧显示东京残奥会吉祥物；右侧选择四张东京残奥会图片展示，效果如图3所示：图32×4卡片样式点击卡片进入应用主界面查看具体项目，主界面如图图4中：图4主界面点击主界面中任意一个活动图标，即可进入该活动的详情界面，如图5所示：图5活动介绍3.服务卡（4×4）4中×4张卡片，上面是东京残奥会的吉祥物，上面是我们选出的参加残奥会的中国运动员的照片。点击卡片进入主界面，可以查看每位中国运动员的详细信息。图64×4卡片式技术实现1.创建项目打开DevEcoStudio，点击File→New→NewProject；选择空能力（Java）；单击“下一步”按钮；就可以进入项目配置界面了。在该界面中，ProjectName项目名称可以自定义，这里命名为ParalympicGamesCard；ProjectType项目类型选择Application；PackageName包名会根据前面的信息自动生成；SaveLocation存储路径可自行设置；兼容的API版本对于兼容的API版本，选择版本4；对于设备类型，选择电话。完成配置信息设置后，点击“完成”按钮即可成功创建工程。具体配置信息参见图7。图7配置项二、残奥会服务卡片实现1.卡片生成1)右击项目包名称，选择New→ServiceWidget。图8创建卡片2)选择服务卡片类型，Template下用户可以选择任意模板，选择后点击Next。图9选择模板3)配置服务卡信息。其中ServiceWidgetName卡片名称可以自定义；描述细节也可以由用户自定义；Ability会默认使用MainAbility；Type类型可以根据实际开发情况选择JAVA或者JS语言；SupportDimensions支持的样式可以勾选最后两项，这样可以得到22、24、4*4三种尺寸的服务卡。点击“完成”按钮完成服务卡创建。图10配置服务卡片2.卡片布局本APP中三张卡片的布局分别配置在下图红框内的xml文件中。文件名末尾如“2_2”表示2*2服务卡的布局文件，其余同理适用于尾数为“2_4”和“4_4”的两个xml文件。图11下面的xml文件以2*2的服务卡为例，说明布局的实现。该界面包含一个Image图片和一个Text文本框，将Text的文字设置为“残奥会奖牌列表”，通过height、width、margin等设置两个控件的高度、宽度、间隔等属性。3.卡片信息创建，更新和删除卡片时，需要持久化创建的卡片信息，以便再次获取或更新卡片实例时直接使用，即卡片信息的存储主要通过对象关系实现数据库，需要改写如下几个函数：创建卡片的回调函数onCreateForm()，更新卡片信??息的onUpdataForm()，销毁卡片和删除卡片信息的onDeleteForm()。卡片需要的存储信息包括：卡片ID、卡片名称、卡片大小（22、24、4*4）。这些回调函数可以在服务卡片创建时自动生成。返回调频代码如下：//创建卡片@OverrideprotectedProviderFormInfoonCreateForm(Intentintent){HiLog.info(TAG,"onCreateForm");longformId=intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY,INVALID_FORM_ID);StringformKEYFORMName=intent.getString_Param.(RAMbilityS)intdimension=intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY,DEFAULT_DIMENSION_2X2);HiLog.info(TAG,"onCreateForm:formId="+formId+",formName="+formName);FormControllerManagerformControllerManager=FormControllerManager.getInstance(this);FormControllerformController=formControllerManager.getController(formId);formController=(formController==null)?formControllerManager.createFormController(formId,formName,dimension):formController;if(formController==null){HiLog.error(TAG,"Getnullcontroller.formId:"+formId+",formName:"+formName);returnnull;}returnformController.bindFormData();}//更新卡片@OverrideprotectedvoidonUpdateForm(longformId){HiLog.info(TAG,"onUpdateForm");super.onUpdateForm(formId);FormControllerManagerformControllerManager=FormControllerManager.getInstance(this);FormControllerformController=formControllerManager.getController(formId);formController.updateFormData(formId);}//删除卡片@OverrideprotectedvoidonDeleteForm(longformId){HiLog.info(TAG,"onDeleteForm:formId="+formId);super.onDeleteForm(formId);FormControllerManagerformControllerManager=FormControllerManager.getInstance(this);formControllerManager.deleteFormController(formId);}4.在桌面创建卡片快捷方式下面我们将介绍如何在桌面上为三种不同大小的卡片创建快捷方式。第一步：长按APP图标，点击服务卡片。如图12：图12点击服务卡片Step2：用户选择喜欢的卡片“添加到桌面”，如图13：图13添加到桌面Step3：用户选择喜欢的卡片卡片添加到桌面，相应的服务卡片就会出现在桌面上。如图14所示：图14添加桌面效果5、点击卡片和跳转按钮，进入活动详情页面。下面详细介绍如何实现上面提到的页面跳转功能。1）在widget文件下的AoyunhuiwidgetImpl卡片设置文件中设置了AoyunhuiwidgetImpl文件，需要重写bindFormData()方法。使用switch...case...方法控制跳转的具体方向。当卡牌大小为22时，跳跃点的技能名称为MainAbility2；当卡牌大小为24时，跳跃点的技能名称为MainAbility。图15AoyunhuiwidgetImpl文件位置@OverridepublicProviderFormInfobindFormData(){...switch(dimension){//具体点用来控制跳转caseDEFAULT_DIMENSION_2X2:abilityName="MainAbility2";//跳转到页面的能力名称componentProvider=newComponentProvider();//2*2大小componentProvider.setIntentAgent(ResourceTable.Id_layout_2x2,startAbilityIntentAgent(abilityName));break;caseDIMENSION_2X4:abilityName="MainAbility";//跳转到页面的Ability名称componentProvider=newComponentProvider();//2*4sizecomponentProvider.setIntentAgent(ResourceTable.Id_layout_2x4,startAbilityIntentAgent(abilityName));break;}2)MainAbility2Slice文件中设置MainAbility2Slice文件，调用webview()方法，将url地址作为输入传入方法参数，并完成设置需要跳转的勋章列表网页url地址，实现点击2*2卡片后跳转到勋章列表展示页面的效果。publicvoidonStart(Intentintent){...super.setUIContent(ResourceTable.Layout_ability_main2);Stringurl="https://www.baidu.com/s?ie=utf-8&fr=bks0000&wd=%E5%A5%A5%E8%BF%90%E4%BC%9A%E5%A5%96%E7%89%8C%E6%A6%9C";//跳转到勋章列表...webview(url);}3)MainAbilitySlice文件设置第一步：主界面布局APP的主界面布局定义在ability_main.xml文件中。该界面包含7个Image图片和6个Text文本框。其中7张图片包括首页装饰图和6张活动图标；6Text文本框用于显示事件的名称。设置好各个控件的相关属性后，通过setUIContent()方法将ability_main.xml文件设置为APP的主界面布局。代码如下，布局效果可以参考图16。super.setUIContent(ResourceTable.Layout_ability_main);图16主界面布局Step2：主界面跳转至赛事项目详情界面在MainAbilitySlice文件的onStart()方法中，实现上述1)AoyunhuiwidgetImpl文件通过findComponentById()方法设置提及的比赛项目定位在小节中。以举重项目为例。在主界面，获取“举重”项目的图片控件，为其设置onClick()点击跳转事件，将跳转指向的Ability名称withAbilityName()设置为举重页面的Ability，即为WeightliftingAbility，实现点击举重图片后跳转到举重项目详情页的效果，具体代码如下：{//获取举重项目图片控件@OverridepublicvoidonClick(Componentcomponent){//为举重图片设置点击事件IntensecondIntent=newIntent();secondIntent.setOperation(newIntent.OperationBuilder().withBundleName("com.huawei.ParalympicGamesCard").withAbilityName("com.huawei.ParalympicGamesCard.WeightliftingAbility")//设置跳跃指向的Ability名称为举重Ability.build());startAbility(secondIn帐篷）;}}）;第三步：举重项目详情界面WeightliftingAbilitySliceWeightliftingAbilitySlice举重项目详情界面实现原理与第一步主界面实现??原理类似。在ability_weightlifting.xml文件中，界面包括Image图片和Text文本框控件，其中图片用于存放举重比赛的照片，Text文本用于存放举重赛事的文字介绍。设置完各个控件的属性后，通过setUIContent()方法将ability_weightlifting.xml文件设置为举重项目详情界面的布局。举重项目详细界面效果见图17。super.setUIContent(ResourceTable.Layout_ability_weightlifting);图17举重项目详情界面更多信息请访问：与华为官方共建的鸿蒙科技社区https://harmonyos.51cto.com
