【练习】使用DevEco Studio编写计数器案例

发布于：2024-08-08 ⋅ 阅读:(245) ⋅ 点赞:(0)

效果展示

默认状态
点击加号
点击减号

知识点

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

字符串转数字
方法 说明 例子
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
数字转字符串
方法 说明 例子
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'

点击事件

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

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

语法：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)
  }
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布