HarmonyOS鸿蒙Next ArkUI入门训练营—健康生活实战:ArkUI菜谱应用《冰箱有什么》

HarmonyOS鸿蒙Next ArkUI入门训练营—健康生活实战:ArkUI菜谱应用《冰箱有什么》 这个活动早就在论坛看到了,但是一直没时间做,真是起个大早,赶了个晚集哈。此次活动是为了练习ArkUI,顺便看看可不可以有奖品拿 /哈哈 。

APP主要业务路径为①填写或者选择蔬菜名,点击获得菜谱按钮进行搜索②搜索后跳转到菜谱列表结果页面,可以查看和点击待选菜谱③查看菜谱介绍,做菜原料用量,操作步骤等。

国际惯例先看一下操作演示:

操作演示.gif

APP详细功能

下面将从功能方面分别介绍,欢迎大家留言指导:

1、搜索首页

该页面为APP首页,提供蔬菜输入框和搜索按钮,并提供一部分待选蔬菜名称可以直接点击进行搜索,并跳转到菜谱列表页面查看结果。

这部分主要用到了UI控件(Image、TextInput、Button),并在待选蔬菜的部分使用了ForEach循环。

搜索首页.png

2、菜谱列表

该页面为菜谱列表页面,通过接受上个页面传递(路由页面跳转传参)过来的搜索关键词,来获取不同的结果。点击其中某一项可以跳转到菜谱详情页面。

这部分主要用到了布局容器(Row、Column、Scroll、Flex)的配合,以及使用了封装组件扩展FoodListItem。

菜谱列表.png

3、菜谱详情

该页面为菜谱详情页面,可以在此页面查看菜品图片,菜谱介绍,做菜原料用量,操作步骤等。

这部分通过布局容器和UI控件的组合,实现了页面的布局样式。并且和上个列表页面共享图片元素(菜谱预览图),实现了双向的图片补间动画,增加了用户体验。

菜谱详情.png

总结

通过这次的活动视频学习并参与此活动练手,深刻体会到了ArkUI声明式开发简洁明快的特点,DevEco Studio对ArkUI开发的友好便捷性,更是提高了开发效率。

此次活动我只是浅浅的对ArkUI有了一个基本的了解和使用,对代码的使用和封装上面还需要多多积累经验,后期还要多多练习,希望大家多多包涵。

代码已经推送到活动仓库,地址附上:https://gitee.com/openharmony-sig/contest


更多关于HarmonyOS鸿蒙Next ArkUI入门训练营—健康生活实战:ArkUI菜谱应用《冰箱有什么》的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

学习了

更多关于HarmonyOS鸿蒙Next ArkUI入门训练营—健康生活实战:ArkUI菜谱应用《冰箱有什么》的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


ArkUI新手,求别喷

了解怎么实现这个九宫格的拖拽吗。

《冰箱有什么》是一个基于ArkUI框架开发的菜谱应用。该应用旨在帮助用户根据冰箱中的食材快速找到合适的菜谱。项目采用鸿蒙分布式技术,支持多设备协同,用户可以在手机、平板或智能冰箱上使用。

在开发过程中,使用了ArkUI的声明式UI开发范式,通过自定义组件、布局和数据绑定实现界面展示和交互。数据管理方面,应用采用了轻量级的本地存储方案,支持用户添加、删除和查询食材信息。同时,通过鸿蒙系统的分布式能力,实现了设备间数据同步和任务流转。

项目重点展示了ArkUI的基础组件使用、页面跳转、状态管理和事件处理等核心功能。例如,通过List组件展示食材列表,Button组件实现交互操作,Navigator组件管理页面路由。此外,项目还涉及了鸿蒙系统的多端适配和资源管理技术,确保应用在不同设备上的一致体验。

《冰箱有什么》是一个典型的入门级鸿蒙应用开发案例,适合开发者快速掌握ArkUI的基本使用方法和鸿蒙系统的核心特性。

《冰箱有什么》是一款基于HarmonyOS鸿蒙Next ArkUI开发的菜谱应用,旨在帮助用户根据家中现有食材快速找到合适的菜谱。通过ArkUI的声明式开发范式,应用界面简洁直观,支持实时搜索与推荐功能。用户只需输入冰箱中的食材,应用即可智能匹配相关菜谱,并提供详细步骤与营养信息。该应用充分利用了鸿蒙系统的分布式能力,支持多设备协同,如手机与智能冰箱的数据同步,提升用户体验。

回到顶部