HarmonyOS Next 纯血星河版【五】：事件交互 - 点击事件 & State状态管理 & 一元运算符、比较、逻辑运算符、以及优先级 & 美团外卖购物车案例

HarmonyOS Next 纯血星河版【五】

事件 - onClick

一、事件交互 - 点击事件

代码示例：

@Entry
@Component
struct  OnClick {
  build () {
    Column() {
      Button('点击弹框')
        // 绑定点击事件
        .onClick(() => {
          AlertDialog.show({
            message: '弹框提示'
          })
        })
    }
    .width('100%')
  }
}

二、总结

状态管理 - State

一、 什么是 状态管理

二、 普通变量 和 装填变量的区别

三、计数器案例

@Entry
@Component
struct StateTest  {
  @State count: number = 1
  build () {
    Column() {
      Row({ space: 20 }) {
        Button('-')
          .width(80)
          .height(80)
          .borderRadius(40)
          .fontSize(35)
          .onClick(() => {
            if ( this.count > 1) {
              this.count--
            } else {
              AlertDialog.show({
                message: '操作数已达到限制！'
              })
            }
          })
          Text(this.count.toString())
            .fontSize(40)
            .margin({left: 10, right: 10})
        Button('+')
          .width(80)
          .height(80)
          .borderRadius(40)
          .fontSize(35)
          .onClick(() => {
            if ( this.count < 10 ) {
              this.count++
            } else {
              AlertDialog.show({
                message: '操作数已达到限制！'
              })
            }
          })
      }
    }
    .width('100%')
    .height('100%')
    .padding(10)
    .justifyContent(FlexAlign.Center)
  }
}

四、模拟抖音点赞案例

• 需求：用户点击爱心，则将触发效果。将数据和视图进行双向绑定。
  

代码示例：

@Entry
@Component
struct StateTest2 {
  // 创建两个 状态变量 分别是  点在爱心颜色 和 点赞数
  @State number: number = 9999
  @State colorLove: String = "#000003"
  @State colorNumber: String = "#000003"
  build() {
    Column() {
      Column() {
        Image($r('app.media.state_huawei_test'))
          .width('100%')
          .height(200)
          .borderRadius({ topLeft: 10, topRight: 10, bottomLeft: 5, bottomRight: 5})
        Text('HUAWEI：没有退路就是胜利之路！')
          .fontWeight(700)
          .margin({ top: 10, bottom: 10})
        Row() {
          Image($r('app.media.huawei'))
            .width(40).height(40)
            .borderRadius(20)
          Text('HUAWEI')
            .fontSize(18)
            .layoutWeight(1)

          Row({ space: 10}){
            Image($r('app.media.state_love'))
              .width(20)
              .height(20)
              .fillColor(this.colorLove.toString())
              // 绑定点击事件
              .onClick(() => {
                if (this.number == 9999) {
                  // 修改颜色 和 数量
                  this.colorLove = '#FF0000'
                  this.colorNumber = '#FF0000'
                  this.number++
                } else {
                  // 将颜色 和 数值 进行还原
                  this.colorLove = '#000003'
                  this.colorNumber = '#000003'
                  this.number--
                }

              })
            Text(this.number.toString())
              .fontColor(this.colorNumber.toString())
          }
          .width(100)
          .height(50)
          .justifyContent(FlexAlign.End)
        }
        .width('100%')
        .height(50)
      }
      .width(300)
      .padding(10)
      .backgroundColor(Color.White)
      .borderRadius(10)
    }
    .width('100%')
    .height('100%')
    .backgroundColor("#F6F5F2")
  }
}

运算符

基本的算数运算符

一、赋值运算符

二、总结

• 简单的算数运算符如下所示：
  

一元运算符

一、基本使用

代码示例：

• 后置
  
• 前置
  

二、总结

比较运算符

一、基本的比较符号

代码示例：

二、总结

逻辑运算符

一、逻辑运算符基本使用

代码示例：

二、总结

运算优先级

综合案例 - 外卖购物车

代码示例：

@Entry
@Component
struct StateTest3 {
  // 添加状态管理变量
  @State totalPrice: number = 20.2  // 总金额
  @State discountPrice: number = 20.2  // 折扣价
  @State originalPrice: number = 40.4  // 原价
  @State reducedPrice: number = 20.2  // 共减免
  @State countImte : number = 1  // 每个商品选中的个数
  build() {
    Column() {
      // 主体：购物车商品详情列表
      Column() {
        // 商品规格详情列表(List容器，超出范围自动滚动效果)
        List() {
          ListItem() {
            Row() {
              Image($r('app.media.waimai_test_image'))
                .width(110)
                .height(90)
                .borderRadius(15)
              // 商品文字信息区域
              Column() {
                Column() {
                  Text('冲销量 1000 缤纷八果水果捞')
                    .fontColor(Color.Black)
                    .fontSize(14)
                  Text('含 1 份折扣商品')
                    .fontColor('#c3c3c3')
                    .fontSize(12)
                    .margin({ top: 10 })
                }
                .width('100%')
                .alignItems(HorizontalAlign.Start)
                .margin({left: 10, top: 5})
                // 数量规格区域
                Row() {
                  Row() {
                    Text(`￥ ${this.discountPrice}`)
                      .fontColor(24)
                      .fontColor(Color.Red)
                    Text(` ￥${this.originalPrice}`)
                      .fontColor('#c3c3c3')
                      .fontSize(12)
                      .margin({ left: 5 })
                      .decoration({
                        type: TextDecorationType.LineThrough,
                        color: '#c3c3c3'
                      })
                  }
                  .width(110)

                  // 加减数量
                  Row() {
                    Text('-')
                      .width(20)
                      .height(20)
                      .border({
                        width: 1,
                        color: '#c3c3c3'
                      })
                      .textAlign(TextAlign.Center)
                      .onClick(() => {
                        if (this.countImte > 1) {
                          this.countImte--
                        } else {
                          console.log(' - ', '不能在减了')
                        }
                      })
                    Text(this.countImte.toString())
                      .width(30)
                      .height(20)
                      .border({
                        width: { top: 1, bottom: 1 },
                        color: '#c3c3c3'
                      })
                      .textAlign(TextAlign.Center)
                    Text('+')
                      .width(20)
                      .height(20)
                      .border({
                        width: 1,
                        color: '#c3c3c3'
                      })
                      .textAlign(TextAlign.Center)
                      .onClick(() => {
                        if (this.countImte < 1000) {
                          this.countImte++
                          // 将价格进行更新
                          // 合计
                          this.totalPrice = this.countImte * (this.originalPrice - this.discountPrice)
                          // 优惠
                          this.reducedPrice = this.countImte * (this.originalPrice - this.discountPrice)
                          console.log('总价为：', this.totalPrice.toFixed(2))
                          console.log('优惠：', this.reducedPrice.toFixed(2))
                        } else {
                          console.log(' + ', '暂无库存')
                        }
                      })
                  }
                  .width('100%')
                  .margin({ top: 10, left: 35})
                }
                .layoutWeight(1)
                .padding(10)
              }
              .width('100%')
              .height(90)
              .borderRadius(15)
              .alignItems(HorizontalAlign.Start)
            }
            .margin({ bottom: 10 })
            .backgroundColor('#ffffff')
            .borderRadius(15)
          }
          .width('100%')

        }
        .width('100%')
        .layoutWeight(1)
        .padding(10)

        // 底部结算项
        Row() {
          Column() {
            Text() {
              Span(`已选择 ${this.countImte} 件`)
                .fontColor('#cacaca')
                .fontSize(14)
              Span('，合计：')
                .fontSize(14)
              Span(`￥ ${this.totalPrice.toFixed(2)}`)
                .fontSize(16)
                .fontColor(Color.Red)
            }

            Text(`共减 ￥ ${this.reducedPrice.toFixed(2)}`)
              .fontColor(Color.Red)
              .fontSize(12)
              .margin(5)
          }
          .layoutWeight(1)
          .alignItems(HorizontalAlign.End)
          .padding({ right: 10 })

          Button('结算外卖')
            .fontColor(Color.Black)
            .backgroundColor('#ffd54a')
        }
        .width('100%')
        .height(80)
        .padding(15)
        .backgroundColor('#ffffff')
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#f3f3f3')
    }
  }
  }