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

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