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

HarmonyOS鸿蒙Next中实现餐饮美食应用示例代码 介绍
本示例基于ArkUI中各类基础组件与各样布局，实现简单的餐饮美食应用UI界面。
实现餐饮美食应用源码链接

效果预览

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

实现思路

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

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

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


更多关于HarmonyOS鸿蒙Next中实现餐饮美食应用示例代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

链接跳转不到

更多关于HarmonyOS鸿蒙Next中实现餐饮美食应用示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


开发者您好，我们已对该demo进行测试，demo可以正常运行，未发生链接跳转不到的情况。若未解决，请您详细描述问题情况，感谢您的支持。

在HarmonyOS鸿蒙Next中实现餐饮美食应用的示例代码，可以使用ArkTS进行开发。以下是一个简单的示例，展示如何创建一个基本的餐饮美食应用界面。

首先，确保你已经配置好了HarmonyOS开发环境，并创建了一个新的ArkTS项目。

  1. 创建主界面：
import { Component, State } from '@ohos.arkui';
import { FoodItem } from './FoodItem';

@Component
export struct MainPage {
    @State foodList: FoodItem[] = [
        { id: 1, name: 'Pizza', description: 'Cheese and Tomato', price: '$10' },
        { id: 2, name: 'Burger', description: 'Beef Patty with Cheese', price: '$8' },
        { id: 3, name: 'Sushi', description: 'Fresh Salmon Sushi', price: '$12' }
    ];

    build() {
        Column() {
            List({ space: 10 }) {
                ForEach(this.foodList, (item: FoodItem) => {
                    ListItem() {
                        Text(item.name)
                            .fontSize(20)
                            .fontWeight(FontWeight.Bold);
                        Text(item.description)
                            .fontSize(16);
                        Text(item.price)
                            .fontSize(18)
                            .fontColor(Color.Red);
                    }
                })
            }
            .layoutWeight(1)
        }
        .padding(10)
    }
}
  1. 定义FoodItem类：
export class FoodItem {
    id: number;
    name: string;
    description: string;
    price: string;

    constructor(id: number, name: string, description: string, price: string) {
        this.id = id;
        this.name = name;
        this.description = description;
        this.price = price;
    }
}
  1. 应用入口：
import { EntryComponent } from '@ohos.arkui';
import { MainPage } from './MainPage';

@EntryComponent
export struct App {
    build() {
        MainPage();
    }
}

这个示例代码展示了如何创建一个简单的餐饮美食应用界面，使用List组件展示食物列表，并通过ForEach循环渲染每个食物项。每个食物项包括名称、描述和价格。

在HarmonyOS鸿蒙Next中，实现一个简单的餐饮美食应用可以使用ArkTS语言编写。以下是一个示例代码，展示如何创建一个基本的菜品列表页面：

import { List, ListItem, Text, Image, Column, Row } from '@ohos/arkui';

@Entry
@Component
struct FoodListPage {
  @State foodItems: Array<{ name: string, image: string, price: number }> = [
    { name: '红烧肉', image: 'assets/hongshaorou.jpg', price: 38 },
    { name: '宫保鸡丁', image: 'assets/gongbaojiding.jpg', price: 28 },
    { name: '麻婆豆腐', image: 'assets/mapodoufu.jpg', price: 18 }
  ];

  build() {
    List({ space: 10 }) {
      ForEach(this.foodItems, (item, index) => {
        ListItem() {
          Row({ space: 10 }) {
            Image(item.image)
              .width(100)
              .height(100)
            Column({ space: 5 }) {
              Text(item.name)
                .fontSize(18)
              Text(`价格: ¥${item.price}`)
                .fontSize(16)
            }
          }
        }
      })
    }
    .width('100%')
    .height('100%')
  }
}

这个示例代码创建了一个包含菜品名称、图片和价格的列表页面。List组件用于展示菜品列表，ForEach用于遍历菜品数据，Image和Text组件分别用于展示菜品图片和文字信息。

回到顶部