HarmonyOS/鸿蒙.learn/蜗牛学苑/day02.md

ArkTS数据绑定和事件

ArkTS负责数据维护和交互

ArkUI负责页面布局

示例焦点技术onBlur和初识双向绑定

@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默认水平方向为主轴，垂直方向为侧轴