You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
### ArkTS数据绑定和事件
|
|
|
|
|
|
|
|
|
|
|
|
ArkTS负责数据维护和交互
|
|
|
|
|
|
|
|
|
|
|
|
ArkUI负责页面布局
|
|
|
|
|
|
|
|
|
|
|
|
#### 示例焦点技术onBlur和初识双向绑定
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
@Entry
|
|
|
|
|
|
@Component
|
|
|
|
|
|
struct Index {
|
|
|
|
|
|
@State message: string = 'Hello World';
|
|
|
|
|
|
checkMe = ()=>{
|
|
|
|
|
|
this.message = "harmonyos"
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// inputEvent = (event:ClickEvent)=>{
|
|
|
|
|
|
//
|
|
|
|
|
|
// }
|
|
|
|
|
|
build() {
|
|
|
|
|
|
RelativeContainer() {
|
|
|
|
|
|
Column(){
|
|
|
|
|
|
Text(this.message)
|
|
|
|
|
|
Button("点击").onClick(this.checkMe)
|
|
|
|
|
|
.width('100')
|
|
|
|
|
|
.stateEffect(true)
|
|
|
|
|
|
TextInput({placeholder:'请输入内容 ',text:$$this.message}).onBlur(()=>{
|
|
|
|
|
|
console.log("231")
|
|
|
|
|
|
})
|
|
|
|
|
|
TextInput()
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.height('100%')
|
|
|
|
|
|
.width('100%')
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 实战任务小程序
|
|
|
|
|
|
|
|
|
|
|
|
1. ##### 布局单位
|
|
|
|
|
|
|
|
|
|
|
|
不是px，
|
|
|
|
|
|
|
|
|
|
|
|
物理像素 px
|
|
|
|
|
|
|
|
|
|
|
|
逻辑像素
|
|
|
|
|
|
|
|
|
|
|
|
鸿蒙提供多种布局单位
|
|
|
|
|
|
|
|
|
|
|
|
px以分辨率为参考
|
|
|
|
|
|
|
|
|
|
|
|
vp屏幕密度相关像素
|
|
|
|
|
|
|
|
|
|
|
|
fp字体像素
|
|
|
|
|
|
|
|
|
|
|
|
lpx视窗逻辑像素
|
|
|
|
|
|
|
|
|
|
|
|
2. ##### Column和Row布局
|
|
|
|
|
|
|
|
|
|
|
|
Column默认垂直方向为主轴，水平方向为侧轴
|
|
|
|
|
|
|
|
|
|
|
|
Row默认水平方向为主轴，垂直方向为侧轴
|
