鸿蒙仓颉开发语言实战教程:实现商城应用详情页

举报
yd_271872561 发表于 2025/06/25 15:39:27 2025/06/25
【摘要】 昨天有朋友提到鸿蒙既然有了ArkTs开发语言,为什么还需要仓颉开发语言。其实这个不难理解,安卓有Java和Kotlin,iOS先后推出了Objective-C和Swift,鸿蒙有两种开发语言也就不奇怪了。而且仓颉是比ArkTs更加灵活的语言,虽然现在了解它的开发者还不多,但是未来仓颉一定会成为非常重要的开发语言。昨天分享了商城应用首页的实现过程,今天我们继续介绍页面的开发,做一下商品详情页面...
昨天有朋友提到鸿蒙既然有了ArkTs开发语言,为什么还需要仓颉开发语言。其实这个不难理解,安卓有Java和Kotlin,iOS先后推出了Objective-C和Swift,鸿蒙有两种开发语言也就不奇怪了。而且仓颉是比ArkTs更加灵活的语言,虽然现在了解它的开发者还不多,但是未来仓颉一定会成为非常重要的开发语言。
昨天分享了商城应用首页的实现过程,今天我们继续介绍页面的开发,做一下商品详情页面:

2620295519.png



详情页面看起来要比首页简单一些,不过也有很多首页没有出现过内容,下面为大家详细介绍。
导航栏
导航栏的内容有返回按钮和标题。我们怎样实现在只有两个元素的情况下,将一个布局在左侧,一个保持在中间,这里我使用的是层叠布局,把它俩分开,互不影响,导航栏的具体代码如下:
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)
价格和简介
这部分是几个文本组件的简单布局,简单分析一下横向和纵向布局就行了,然后就是文字的样式不太一样,这里需要注意的是,设置颜色属性是不支持使用字符串的,16进制的颜色值直接写就行,不用加引号了:
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)
以上就是仓颉开发语言实现商品详情页面的主要过程。
##HarmonyOS语言##仓颉##购物#
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。