HarmonyOS NEXT仓颉开发语言实战案例:外卖App

简介: 仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。

各位周末好,今天为大家来仓颉语言外卖App的实战分享。

image.png

我们可以先分析一下页面的布局结构,它是由导航栏和List容器组成的。幽蓝君目前依然没有找到仓颉语言导航栏的系统组件,还是要自定义,这个导航栏有三部分内容,可以使用两端对齐,要注意的是,如果需要中间部分在页面中间需要两端的内容宽度相同。导航栏和页面的布局结构代码如下:

Column{
    Row{
        Text('幽蓝外卖')
        .fontColor(Color.BLACK)
        .fontSize(17)
        Row(6){
            Image(@r(app.media.wm_m1))
            .width(16)
            .height(16)
            Text('黄埔江岸')
            .fontColor(0x1EC28A)
            .fontSize(13)
        }
        Row{
            Image(@r(app.media.wm_m2))
            .width(21)
            .height(21)
        }
        .width(65)
        .justifyContent(FlexAlign.End)
    }
    .padding(left:12,right:12)
    .width(100.percent)
    .height(60)
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.SpaceBetween)

    List{
    }
    .width(100.percent)
    .layoutWeight(1)
    .padding(left:12,right:12)
}
.width(100.percent)
.height(100.percent)
.backgroundColor(Color(247, 247, 247, alpha: 1.0))

接下来是搜索框,仓颉提供了搜索框组件,只需要简单设置就能达到本案例的效果:

ListItem{
    Search(value: "", placeholder: "吃点什么")
    .width(100.percent)
    .height(38)
    .backgroundColor(0xDDDDDD)
    .placeholderColor(0x000000)
    .borderRadius(19)
}

接下来是看看品类和发现好菜两个模块,它们有相同样式的标题,所以我们使用ListItemGroup的header来实现:

@Builder func itemHead(text:String) {
    Row{
        Text(text)
        .fontColor(Color.BLACK)
        .fontSize(13)
    }
    .width(100.percent)
    .height(35)
    .alignItems(VerticalAlign.Center)
    .padding(top:3,left:10)
}
ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('看看品类')})){
}

再来看看看品类部分,它的内容有两个可以水平滚动的列表,这里要使用Scroll,我们以菜品列表为例实现一个简单的滚动列表:

Scroll{
    Row(14){
        ForEach(ArrayList<Int64>([1,1,1,1]), itemGeneratorFunc: {num:Int64,index:Int64 =>
                    Column{
            Image(@r(app.media.wm_mlt))
            .width(168)
            .height(168)
            Column(4){
                Text('幽蓝麻辣烫')
                .fontSize(14)
                .fontColor(Color.BLACK)
                Text('月售 1006')
                .fontSize(13)
                .fontColor(Color.GRAY)
            }
            .width(100.percent)
            .alignItems(HorizontalAlign.Start)
            .padding(left:10)
            .margin(bottom:10)
            Row{
                Text('¥ 18.88')
                .fontColor(Color.RED)
                .fontSize(14)
                Image(@r(app.media.wm_qq))
                .width(16)
                .height(16)
            }
            .padding(left:10,right:10)
            .width(100.percent)
            .justifyContent(FlexAlign.SpaceBetween)
            .margin(bottom:10)
        }
        .height(260)
        .width(162)
        .backgroundColor(Color.WHITE)
        .justifyContent(FlexAlign.SpaceBetween)
                    })
    }
    .height(260)
}
 .scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)

使用Scroll组件的时候要注意设置滚动方向,不然可能会发生列表不滚动的问题。

以上就是关于外卖App的内容分享。##HarmonyOS语言##仓颉##生活服务#

相关文章
|
4天前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
32 0
|
9天前
|
存储 数据库 开发工具
HarmonyOS APP应用开发项目- MCA助手(Day04持续更新中~)
本项目为基于HarmonyOS的端云一体化记账App,集成华为AGC云数据库与认证服务,实现用户注册登录及数据云端存储。通过DevEco Studio开发,解决CloudProgram模块显示问题,完成云数据库初始化与用户信息关联功能。
75 0
HarmonyOS APP应用开发项目- MCA助手(Day04持续更新中~)
|
9天前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
54 0
|
9天前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
76 0
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
9天前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
34 0
|
9天前
|
安全 开发工具 开发者
HarmonyOS APP应用开发项目- MCA助手
moneyControllerApp(MCA)是一款基于鸿蒙HarmonyOS Next开发的个人财务管理应用,采用端云一体化架构,支持多设备协同与数据实时同步。应用通过DevEco Studio集成Cloud Foundation Kit,实现高效云端联动,具备登录注册、主页导航、钱包管理、个人信息维护及支付功能,界面简洁,操作流畅,助力用户智能化管理财务。项目开源,支持二次开发。
27 0
|
9天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
78 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
9天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术,涵盖@Extend、@Styles和@Builder的使用方法,并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果,结合生肖抽卡、小米轮播、回顶按钮等案例,展示实际应用技巧。
51 0
|
移动开发 Ubuntu 网络协议
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(中)
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令
319 1
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(中)
|
XML Web App开发 开发框架
鸿蒙开发入门 | 开发第一个鸿蒙应用+页面跳转
准备好鸿蒙开发环境后,接下来就需要创建鸿蒙项目,掌握项目的创建过程以及配置。项目创建好后,需要把项目运行在模拟器上,鸿蒙的模拟和安卓模拟器有些不同,鸿蒙提供远程模拟器和本地模拟器,通过登录华为账号登录在线模拟器,使用DevEco Studio可将项目部署到远程模拟器中。
1571 1
鸿蒙开发入门 | 开发第一个鸿蒙应用+页面跳转