【练习】使用DevEco Studio编写计数器案例_deveco studio数量组件-CSDN博客

本文链接：https://blog.csdn.net/qq_45569925/article/details/140890253

效果展示

知识点

类型转换（数字和字符串）

字符串转数字

方法说明例子

Number()

方法	说明	例子
Number()	字符串直接转数字，转换失败返回NaN（字符串包含非数字）	`let str1: string = '1.1' console.log(Number(str1))//1.1 let str2: string = '1.9' console.log(Number(str2))//1.9 let str3: string = '1.1a' console.log(Number(str3))//NaN`
parseInt()	去掉小数部分转数字，转换失败返回NaN	`let str1: string = '1.1' console.log(parseInt(str1))//1 let str2: string = '1.9' console.log(parseInt(str2))//1 let str3: string = '1.1a' console.log(parseInt(str3))//1 let str4: string = 'a' console.log(parseInt(str4))//NaN`
parseFloat()	保留小数部分转数字，转换失败返回NaN	`let str1: string = '1.1' console.log(parseFloat(str1))//1.1 let str2: string = '1.9' console.log(parseFloat(str2))//1.9 let str3: string = '1.1a' console.log(parseFloat(str3))//1.1 let str4: string = 'a' console.log(parseFloat(str4))//NaN`

字符串直接转数字，转换失败返回NaN（字符串包含非数字）

let str1: string = '1.1'
console.log(Number(str1))//1.1

let str2: string = '1.9'
console.log(Number(str2))//1.9

let str3: string = '1.1a'
console.log(Number(str3))//NaN

parseInt()

去掉小数部分转数字，转换失败返回NaN

let str1: string = '1.1'
console.log(parseInt(str1))//1

let str2: string = '1.9'
console.log(parseInt(str2))//1

let str3: string = '1.1a'
console.log(parseInt(str3))//1

let str4: string = 'a'
console.log(parseInt(str4))//NaN

parseFloat()

保留小数部分转数字，转换失败返回NaN

let str1: string = '1.1'
console.log(parseFloat(str1))//1.1

let str2: string = '1.9'
console.log(parseFloat(str2))//1.9

let str3: string = '1.1a'
console.log(parseFloat(str3))//1.1

let str4: string = 'a'
console.log(parseFloat(str4))//NaN

数字转字符串

方法说明例子

toString()

方法	说明	例子
toString()	数字直接转字符串	`let num1: number= 1.1 console.log(num1.toString())//'1.1' let num2: number= 1.9 console.log(num2.toString())//'1.9'`
toFixed()	四舍五入转字符串，可设置保留几位小数	`let num1: number= 1.1 console.log(num1.toFixed())//'1' let num2: number= 1.9 console.log(num2.toFixed())//'2' let num2: number= 1.9152 console.log(num2.toFixed(2))//'1.92'`

数字直接转字符串

let num1: number= 1.1
console.log(num1.toString())//'1.1'

let num2: number= 1.9
console.log(num2.toString())//'1.9'

toFixed()

四舍五入转字符串，可设置保留几位小数

let num1: number= 1.1
console.log(num1.toFixed())//'1'

let num2: number= 1.9
console.log(num2.toFixed())//'2'

let num2: number= 1.9152
console.log(num2.toFixed(2))//'1.92'

点击事件

说明：组件 被点击时 触发的事件

作用：监听（感知）用户点击行为，进行对应操作

语法：onClick（（参数）=> {}）

状态管理

普通管理：只能在初始化时渲染，后续将不会再刷新。

状态变量：需要装饰器【@State】装饰，改变会引起UI的渲染刷新（必须设置类型和初始值）

状态管理的基本流程图

注意：定义在组件内普通变量或状态变量，都需要通过this访问

代码展示

@Entry
@Component
struct Index {
  @State num: number = 1;

  build() {
    Row({ space: 10 }) {
      Button() {
        Text("-")
          .fontSize(40)
          .lineHeight(50)
          .fontColor("#fff")
      }
      .width(50)
      .height(50)
      .onClick(() => {
        this.num--
      })

      Text(this.num.toString())
        .fontSize(20)
      Button() {
        Text("+")
          .fontSize(40)
          .lineHeight(50)
          .fontColor("#fff")
      }
      .width(50)
      .height(50)
      .onClick(() => {
        this.num++
      })
    }.padding(10)
  }
}