鸿蒙仓颉开发语言实战教程:实现商城应用详情页
【摘要】 昨天有朋友提到鸿蒙既然有了ArkTs开发语言,为什么还需要仓颉开发语言。其实这个不难理解,安卓有Java和Kotlin,iOS先后推出了Objective-C和Swift,鸿蒙有两种开发语言也就不奇怪了。而且仓颉是比ArkTs更加灵活的语言,虽然现在了解它的开发者还不多,但是未来仓颉一定会成为非常重要的开发语言。昨天分享了商城应用首页的实现过程,今天我们继续介绍页面的开发,做一下商品详情页面...
Stack {
Text('商品详情')
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor(Color.BLACK)
Row{
Image(@r(app.media.back))
.width(27)
.height(27)
.onClick({evet => Router.back()})
}.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
}
.width(100.percent)
.height(60)
.backgroundColor(Color.WHITE)
Column {
Text('100')
.fontSize(20)
.margin(top:10)
.fontColor(Color.RED)
Row {
Text('**制造商').fontSize(12).fontColor(0XC3A374)
Text('生产周期3天').fontSize(12).fontColor(0X4a4a4a)
}
.width(100.percent).justifyContent(FlexAlign.SpaceBetween).margin(top:8)
Text('纯棉牛津纺舒适基础长袖衬衫9色可选')
.fontColor(Color.BLACK)
.fontSize(18)
.fontWeight(FontWeight.Bold)
.margin(top:25)
Text('牛津纺衬衫时时尚界的不老男神,以英伦精英气质风靡数百年,单穿内搭皆宜')
.fontColor(Color.GRAY)
.fontSize(14)
.margin(top:8,bottom:15)
}.padding( right: 10,left: 10).width(100.percent).alignItems(HorizontalAlign.Start) .backgroundColor(Color.WHITE)
Row(){
Row(){
Text('商城')
.fontSize(22)
.fontWeight(FontWeight.Bold)
.fontColor(Color.WHITE)
}
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
.width(76)
.height(76)
.backgroundColor(Color.RED)
.borderRadius(8)
.margin(left:10)
Column(){
Text('哈哈旗舰店')
.fontWeight(FontWeight.Bold)
.fontColor(Color.BLACK)
.fontSize(16)
Row(){
Text('商品质量 5.0')
.fontColor(0X4a4a4a)
.fontSize(15)
Text('服务态度 5.0')
.fontColor(0X4a4a4a)
.fontSize(15)
.margin(left:40)
}
.margin(top:15)
}
.margin(left:10)
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Center)
}
.width(100.percent)
.justifyContent(FlexAlign.Start)
.alignItems(VerticalAlign.Center)
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)