HarmonyOS Next星河版笔记--界面开发（5）

1.字符串

1.1.字符串拼接

作用：把两个或多个字符串，拼成一个字符串。（通常是用来拼接字符串和变量）

'hello' + 'world'  =>  'helloworld'

加好作用：拼接

let name:string = '小明'
console.log('简介信息','名字是' + name)

let name:string = '吕布'
let age:number = 18
console.log('简介信息' ,'姓名' + name)
let num1:number = 100
let num2:number = 200
console.log('总数',num1 + num2)

日志页面效果

1.2.模板字符串`hello`

作用：拼接字符串和变量

优势：更适合于多个变量的字符串拼接

let name:string = '吕布'
let age:number = 18
console.log('简介信息',`姓名是${name},今年${age}岁了`)

日志页面效果

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

2.1.字符串转数字

//字符串转数字
//Number()：字符串直接转数字转换失败返回NaN（字符串中包含非数字）
// parseInt()：去掉小数部分转数字转换失败返回NaN
// parseFloat()：保留小数部分转数字，转换失败返回NaN

let money:string = '1000'
let money2:number = 500
console.log('总工资',Number(money) + money2)//1500

2.2.数字转字符串

作用：字符串用于展示

toString():数字直接转字符串

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

3.交互——点击事件

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

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

语法：onClick(参数) =>{}）

Button('点我，显示弹窗')
.onClink(() =>{
AlertDialog.show({
message:'你好——这里是弹窗'
})
})

4.状态管理

之前构建的页面多为静态界面

但如果希望构建一个动态的、有交互的界面，就需要引入状态的概念

点击交互触发了文本状态变更，状态变更引起了UI渲染

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

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

//状态管理
let msg1:string = '青菜'//普通变量

@Entry
@Component
struct Index {
  msg2:string = '黑马'
  //@State message: string = 'Hello World';//状态变量
  build() {
Column(){
  Text(msg1)
  Text(this.msg2)//this自己的
}
  }

}



//状态管理
let msg1:string = '青菜'//普通变量

@Entry
@Component
struct Index {
  msg2:string = '黑马'
  //@State message: string = 'Hello World';
  build() {
Column(){
  Text(msg1)
  Text(this.msg2)//this自己的
}
  }

}

//状态管理
//1、普通变量，只能在初始化是渲染，后续就算变化了，也不会引起更新
//2、状态变量，被装饰器修饰，值会改变，会自动引起界面的刷新


//组件外的[普通变量]不需要this
let myName:string = '青菜'//普通变量

@Entry
@Component
struct Index {

  //组件内的 [ 普通变量 ] this×××
myAge:number = 18
  //组件内的状态变量 this×××
  @State myMsg: string = 'Hello World';//装饰器
  build() {
Column() {
  Text(myName).onClick(()=>{
myName = '白菜'//点击无变化
    console.log('myName',myName)
  })
  Text(this.myAge.toString()).onClick(()=>{
    this.myAge = 20
    console.log('myAge',this.myAge)

  })
  Text(this.myMsg).onClick(()=>{
    this.myMsg = 'haoyao'
  })
}
  }

}

5.计数器案例

思路

准备 状态变量 → @State count:number = 1
注册点击事件→ onClick
点击时，修改状态变量
状态变量变化，界面自动更新

@Entry
@Component
struct Index {
  //状态变量
  @State count: number = 1;
  build() {
Row(){
  Button('-')
    .onClick(()=>{
      this.count -= 1
    })
  Text(this.count.toString())
    .padding(20)
    .margin(10)
  Button('+')
    .onClick(()=>{
      this.count += 1
    })
}

  }

6.点赞案例

思路：

注册点击事件→onClick
点击时候，修改颜色，修改数字
1. 提取颜色为状态变量
2. 提取数字为状态变量

7.一元、比较、逻辑运算符

7.1.一元运算符

后置写法：先赋值后自增/自减
前置写法：先自增/自减再赋值

7.2.比较运算符

作用：用来判断比较两个数据大小，返回一个布尔值（true/false）

//判断密码是否正确
let password:string = '123456'
let password2 :string = '1234567'
console.log('判断结果',password == password2)//false

7.3.逻辑运算符

作用：扩充判断条件

7.3.运算符优先级

秒客网