各位周末好，今天为大家来仓颉语言外卖 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 语言 ##仓颉 ##生活服务 #
评论