实现餐饮美食应用鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例基于ArkUI中各类基础组件与各样布局，实现简单的餐饮美食应用UI界面。

实现餐饮美食应用源码链接

效果预览

使用说明

本示例为元服务示例，需要修改元服务id才可进行签名并在设备上进行测试。

实现思路

1. 构件Tab滑动窗口，搭建主体框架，分为首页、点餐等四个页面，点击相应按钮即可滑动到相应界面；

    Tabs({ index: this.selectedIndex }) {
      TabContent() {
        HomeComponent()
      }.tabBar(this.tabBuilder(0, new TabModel('首页', $r("app.media.ic_home"), $r("app.media.ic_home_selected")))).clip(false)

      TabContent() {
        FoodCategory()
      }.tabBar(this.tabBuilder(1, new TabModel('点餐', $r("app.media.ic_food"), $r("app.media.ic_food_selected"))))
      ···
    }

2. 分别构建各个页面的UI界面，利用各种基础组件、自定义组件、不同布局；

    Stack({ alignContent: Alignment.BottomStart }) {
      Column() {
        Image($r(this.foodDetail.pic))
          .height('40%').width('100%').objectFit(ImageFit.Fill)
        Column() {
          Text(this.foodDetail.title)
            .fontSize(16)
        }

3. 涉及到各个页面跳转以及返回，自定义构建路由操作。

  public static push(info: NavRouterInfo) {
    const stack = RouterModule.getStack(info.stackName)
    if (stack) {
      stack.pushPathByName(info.url, info.param, info.animateSwitch === AnimatedMap.ON)
    } else {
      console.error('push nav failed, stackName:' + info.stackName + ', url:' + info.url)
    }
  }