购物网站设计目标定制网站建设宝安西乡

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