ArkUI开发学习随机——B站视频简介页面，美团购买界面

案例一：B站视频简介页面

代码：

build() {
   Column(){
     Column(){
      Stack(){
       Image($r("app.media.genimpact")).width(200).height(125).borderRadius({topLeft:5,topRight:5})
        Row(){
          Image($r("app.media.bz_play")).height(24).fillColor(Color.White).padding(3)
          Text("288万").fontColor(Color.White).fontSize(15).padding(3)
          Image($r("app.media.bz_msg")).height(24).fillColor(Color.White).padding(5)
          Text("6666").fontColor(Color.White).fontSize(15).padding(1)
          Text("2:31").margin({left:20}).fontColor(Color.White).fontSize(15)
       }.position({x:5,y:100})

        Text("原神？启动！原来你也玩原神~").position({x:5,y:125}).fontSize(14).padding(6)
        Row(){
         Text("21万点赞").fontSize(12).backgroundColor("#fef0ef").fontColor("#e66c43").margin({left:10})
          Image($r("app.media.bz_more")).height(20).fillColor("#c1c1c1").margin({right:10})
        }.position({x:5,y:175}).justifyContent(FlexAlign.SpaceBetween).width("100%")
      }
     }.width(200).height(200).margin({top:10}).backgroundColor(Color.White).borderRadius(5)
   }.width("100%").height("100%").backgroundColor(Color.Pink)


  }

案例二：美团购买界面

代码：
 

@Entry
@Component
struct Index {
@State buy:number=0
@State buycount:number=0
@State flag:number=1
@State price:number=9.8
@State color:string="#7e7e7e";
@State tempstring:string="无优惠"


  build() {
    Column() {
      Stack(){
        Row() {
          Image($r("app.media.genshi")).width(120).borderRadius(5)
          Column(){
           Text("原神可莉，纳西妲海报,美团特价买三8折").fontSize(12)
            Text(`含${this.buycount}折扣商品`).width("100%").fontSize(10).margin({top:5}).margin({bottom:15})
            Row(){
              Text(`￥${this.price}`).width(40).fontColor("#ff4000")
              Text(){Span("￥")
              Span("12.3")
              }.width(50).decoration({type:TextDecorationType.LineThrough}).fontSize(10).margin({top:5})
              Text("-").margin({left:30}).width(20).textAlign(TextAlign.Center).border({width:1,}).borderRadius({topLeft:5,bottomLeft:5
              }).borderColor("#e1e1e1").onClick(()=>{
                if(this.buy>0)
                {
                  this.buy--;
                }
                if(this.buy>=3)
                {
                  this.flag=0.8;
                  this.buycount=this.buy;
                }
                else
                {
                  this.flag=1;
                  this.buycount=0;
                }
              })
              Text(`${this.buy}`).width(30).textAlign(TextAlign.Center).borderWidth({top:1,bottom:1}).borderColor("#e1e1e1")
              Text("+").width(20).textAlign(TextAlign.Center).border({width:1}).borderRadius({topRight:5,bottomRight:5}).borderColor("#e1e1e1")
          }.width("100%").onClick(()=>{
            this.buy++;
            if(this.buy>=3)
            {
              this.flag=0.8;
              this.buycount=this.buy;
            }
            else
            {
              this.flag=1;
              this.buycount=0;
            }
            })
          }.position({x:130,y:0}).width(200)
        }.width("100%")

        Row(){
        Column(){
          Text()
          {
            Span(`已选${this.buy}件，`)
            Span("合计")
            Span(`￥${(this.buy*this.flag*this.price).toFixed(2)}`).fontColor("#ff4000").fontSize(20)
          }.margin({bottom:10}).width(200)
          Text(`共减￥${(this.buy*(1-this.flag)*this.price).toFixed(2)}`).margin({left:50}).fontColor("#ff4000").fontSize(18).decoration({type:TextDecorationType.LineThrough,color:Color.Red})

        }.width(230)

          Button("结算商品").backgroundColor(Color.Orange).width(100)
        }.width("100%").position({y:650}).height(90)
      }.width("100%")

    }.width("100%").padding(20)
  }

}

原文地址：https://blog.csdn.net/zgwnb666/article/details/140062293

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！