HarmonyOS NEXT仓颉开发语言实战案例：外卖App
原创
HarmonyOS NEXT仓颉开发语言实战案例：外卖App
原创
幽蓝计划
发布于 2025-06-30 08:55:19
发布于 2025-06-30 08:55:19
各位周末好，今天为大家来仓颉语言外卖App的实战分享。
我们可以先分析一下页面的布局结构，它是由导航栏和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语言##仓颉##生活服务#
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
