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()：保留小数部分转数字，转换失败返回NaNlet money:string = '1000'
let money2:number = 500
console.log('总工资',Number(money) + money2)//15002.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
- 点击时候，修改颜色，修改数字
- 提取颜色为状态变量
- 提取数字为状态变量
7.一元、比较、逻辑运算符
7.1.一元运算符
- 后置写法：先赋值后自增/自减
- 前置写法：先自增/自减再赋值
7.2.比较运算符
作用：用来判断比较两个数据大小，返回一个布尔值（true/false）
//判断密码是否正确
let password:string = '123456'
let password2 :string = '1234567'
console.log('判断结果',password == password2)//false
7.3.逻辑运算符
作用：扩充判断条件
7.3.运算符优先级
原文地址：https://blog.csdn.net/2301_81982769/article/details/143727596
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！