鸿蒙Next仓颉语言开发实战教程：订单详情

幽蓝君听说HarmonyOS 5.1版本即将推送，6.0版本也快要来了,表示十分期待。

今天继续分享仓颉语言开发商城应用的实战教程，今天要分享的是订单详情页：

我们今天应该是第一次遇到分为上中下三部分的页面，而且中间内容可以滚动，这样的布局如何设置呢，其实和之前一样，我们知道其中两个的高度，第三个容器使用layoutWeight属性就行了，这里使layoutWeight的依然是List组件，贴一下上下两部分的内容和List容器的整体布局代码：

Column(){
    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)
     List(space:8){
	}
       .backgroundColor(Color(240, 240, 240, alpha: 1.0))
      .layoutWeight(1)
      Row{
          Row(){
      Text('实付金额：')
        .fontColor(Color.BLACK)
        .fontSize(15)
      Text('¥100' )
        .fontColor(Color.RED)
        .fontSize(15)
    }
    .margin(left:10)
          Text('立即支付')
      .fontColor(Color.WHITE)
      .backgroundColor(Color.RED)
      .width(80)
      .height(40)
      .textAlign(TextAlign.Center)
      .borderRadius(20)
      .margin(right:10)
      }
      .backgroundColor(Color.WHITE)
  .width(100.percent)
  .height(50)
  .justifyContent(FlexAlign.SpaceBetween)
}.width(100.percent).height(100.percent)

剩下的内容就是List容器中的内容，也就是主体内容部分，可以看到它们分为三组，每一组拆开来看也都相对简单，都是基础的布局方式。

比如中间商品详情部分，它可以分为上下两部分，上面内容部分又可以分为左右两部分，这就是分析布局的基本逻辑。

这里有一个知识点要说一下，如果在仓颉中你想设置某一个边的边线宽度，比如设置上边线的宽度，这样写：

.borderWidth(EdgeWidths( top: 1.vp))

下面也附上List内容部分的具体代码：

ListItem{
      Column{
          Row{
    Text('默认')
      .fontColor(Color.WHITE)
      .fontSize(15)
      .backgroundColor(Color.RED)
      .width(35)
      .height(20)
      .textAlign(TextAlign.Center)
    Text('北京北京市东城')
      .fontColor(Color.BLACK)
      .fontSize(15)
      .margin(left:5)
  }
          Text('石景山游乐园68号')
    .fontColor(Color.BLACK)
    .fontSize(18)
    .fontWeight(FontWeight.Bold)
    .margin(top:10)
  Text('王富贵 13084532514')
    .fontColor(Color.BLACK)
    .fontSize(16)
    .margin(top:10)
      }
      .width(100.percent)
      .alignItems(HorizontalAlign.Start)
  }
  .padding(left:10,right:10)
  .width(100.percent)
  .height(100)
  .backgroundColor(Color.WHITE)
  ListItem{
      Column{
          Row{
          Row{
              Image(@r(app.media.good1))
              .width(60)
              .height(60)
              .margin(left:1)
              Column{
                  Text('纯棉牛津纺舒适基础长袖衬衫')
          .fontColor(Color.BLACK)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .maxLines(1)
        Text('天蓝色 L')
          .fontColor(Color.GRAY)
          .fontSize(14)
          .maxLines(1)
          .margin(top:5)
                  Row(){
          Text('单价: ¥100' )
            .fontColor(Color.BLACK)
            .fontSize(15)
          Text('数量: 1' )
            .fontColor(Color.BLACK)
            .fontSize(15)
            .margin(left:20)
        }
        .margin(top:5)
              }
               .alignItems(HorizontalAlign.Start)
               .width(60.percent)
               .margin(left:10)
          }
          Text('¥100')
      .fontColor(Color.BLACK)
      .fontSize(16)
      .margin(right:10)
      }
      .padding(top:10,bottom:10)
  .width(100.percent)
  .justifyContent(FlexAlign.SpaceBetween)
  .alignItems(VerticalAlign.Top)
  .borderColor(Color(236, 236, 236, alpha: 1.0))
  .borderStyle(BorderStyle.Solid)
          Row{
      Text('共计金额:')
    .fontColor(Color.BLACK)
    .fontSize(15)
      Text('¥100')
    .fontColor(Color.RED)
    .fontSize(15)
}
          
          .borderWidth(EdgeWidths( top: 1.vp))
          .borderColor(Color(236, 236, 236, alpha: 1.0))
.alignItems(VerticalAlign.Center)
.padding(left:10,right:10)
.width(100.percent)
.height(40)
.justifyContent(FlexAlign.SpaceBetween)
      }
  }
  .backgroundColor(Color.WHITE)
   .width(100.percent)
  .padding(top:10,bottom:10)
  ListItem{
      Column{
          Row{
              Row(){
    Image('')
      .width(30)
      .height(30)
      .borderRadius(15)
                  .backgroundColor(Color(21,120,255))
    Text('支付宝支付')
      .fontSize(15)
      .fontColor(Color.BLACK)
      .margin(left:8)
  }
  Image( @r(app.media.choose1))
    .width(15)
    .height(15)
          }
          .padding(left:10,right:10)
          .width(100.percent)
          .justifyContent(FlexAlign.SpaceBetween)
          .height(45)
          Row{
              Row(){
    Image('')
      .width(30)
      .height(30)
      .borderRadius(15)
                  .backgroundColor(Color(84, 169, 70, alpha: 1.0))
    Text('微信支付')
      .fontSize(15)
      .fontColor(Color.BLACK)
      .margin(left:8)
  }
  Image( @r(app.media.choose0))
    .width(15)
    .height(15)
          }
          .padding(left:10,right:10)
          .width(100.percent)
          .justifyContent(FlexAlign.SpaceBetween)
          .height(45)
      }
  }
   .backgroundColor(Color.WHITE)

感谢您今天的阅读。##HarmonyOS语言##仓颉##购物#