学习鸿蒙基础(2)

arkts是声名式UI

DevEcoStudio的右侧预览器可以预览。有个TT的图标可以看布局的大小。和html的布局浏览很像。

上图布局对应的代码:

复制代码
@Entry //入口
@Component
struct Index {
  @State message: string = 'Hello Harmonyos' //@State 数据改变了也刷新的标签

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(30)
          .margin(10)
          .padding(20)
          .backgroundColor("#333333")
          .fontColor(Color.White)
          .border({
            width:3,
            color:Color.Blue
          }).borderRadius(10)
          .onClick(() => {
          console.log("点击了text")
          this.message = "text"
        })
          .fontWeight(FontWeight.Bold)
        Divider().margin(10)
        Button("click")
          .width(100)
          .height(50)
          .onClick(this.read.bind(this))
      }
      .width('100%')
      .height('50%')
    }
    .height('100%')
    .width('90%')
  }
  // 方法多的话写到这里
  read() {
    console.log("我是button的点击事件")
    this.message = "button"
  }
}

新建页面的时候选择page。就会主动把该页面添加在路由中。

此处就是新建的页面的路由。和微信小程序是一样一样的。要加到这个page上。

1、自定义组件内,自定义构件函数。

复制代码
@Builder 注释来实现
复制代码
@Entry //入口
@Component
struct PageB {
  @State message: string = 'Hello World' //@State 数据改变了也刷新的标签

  build() {
    Row() {
      Column() {
        this.TextLabel("账号")
        this.TextLabel("密码")
        Divider().margin(10)
        Button("click")
          .width(100)
          .height(50)
          .onClick(this.read.bind(this))
      }
      .width('100%')
      .height('50%')
    }
    .height('100%')
    .width('90%')
  }
  // 方法多的话写到这里
  read() {
    console.log("我是button的点击事件")
    this.message = "button"
  }

  @Builder//自定义组件内,自定义构件函数
  TextLabel(title:string ){
    Text(title+this.message)
      .fontSize(16)
      .margin(10)
      .padding(10)
      .width(200)
      .height(50)
      .backgroundColor("#333333")
      .fontColor(Color.White)
      .border({
        width:3,
        color:Color.Blue
      }).borderRadius(10)
      .onClick(() => {
        this.message ="admin"
      })
      .fontWeight(FontWeight.Bold)
  }
}

2.全局自定义构建函数

复制代码
@Entry //入口
@Component
struct PageB {
  @State message: string = 'Hello World' //@State 数据改变了也刷新的标签
  build() {
    Row() {
      Column() {
        TextLabel("账号")
        TextLabel("密码")
        Divider().margin(10)
        Button("click")
          .width(100)
          .height(50)
          .onClick(this.read.bind(this))
      }
      .width('100%')
      .height('50%')
    }
    .height('100%')
    .width('90%')
  }
  // 方法多的话写到这里
  read() {
    console.log("我是button的点击事件")
    this.message = "button"
  }
}
@Builder//全局自定义构件函数
function TextLabel(title:string ){
  Text(title+this.message)
    .fontSize(16)
    .margin(10)
    .padding(10)
    .width(200)
    .height(50)
    .backgroundColor("#333333")
    .fontColor(Color.White)
    .border({
      width:3,
      color:Color.Blue
    }).borderRadius(10)
    .onClick(() => {
      this.message ="admin"//在全局不建议去修改message
    })
    .fontWeight(FontWeight.Bold)
}

3、全局自定义函数实现简单的登录功能。采用引用传值,函数回调的方法。

复制代码
@Entry //入口
@Component
struct PageB_build_param {
  @State message: string = 'Hello World' //@State 数据改变了也刷新的标签
  @State username: string = ''
  @State password: string = ''

  build() {
    Row() {
      Column() {
        text({ title: "用户", valueStr:this.username, cb: (value:string) => {
              this.username=value
        } })
        text({ title:"密码",valueStr:this.password,cb:(value:string)=>{
             this.password=value
        } })
        Divider().margin(10)

        Row() {
          Button("登录")
            .fontSize(16)
            .width(100)
            .height(50)
            .margin({ right: 10, left: 10 })
            .onClick(this.login.bind(this))
          Button("重置")
            .fontSize(16)
            .width(100)
            .height(50)
            .margin({ left: 10, right: 10 })
            .onClick(this.reset.bind(this))
        }

      }
      .width('100%')
      .height('50%')
    }
    .height('100%')
    .width('100%')
  }
  //登录
  login() {
    console.log(this.username+"----"+this.password)
  }

  reset() {
    this.username = ""
    this.password = ""
  }
}

@Builder //全局自定义构件函数
function text($$: { title: string,valueStr: string,cb: (value: string) => void }) {
  Row() {
    Text($$.title)
      .fontSize(16)
      .margin(10)
      .padding(10)
      .width(80)
      .textAlign(TextAlign.Center)
      .height(50)
      .backgroundColor("#333333")
      .fontColor(Color.White)
      .border({
        width: 3,
        color: Color.Blue
      })
      .borderRadius(10)
      .fontWeight(FontWeight.Bold)
    TextInput({ text: $$.valueStr }).width(200).height(50)
      .fontSize(16).onChange((value: string) => {
      $$.cb(value)
    })
  }.alignItems(VerticalAlign.Center)

}
相关推荐
2303_Alpha3 天前
SpringBoot
笔记·学习
萘柰奈3 天前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽3 天前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫3 天前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie3 天前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿3 天前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng3 天前
量子计算学习(第十四周周报)
学习·量子计算
Hello_Embed3 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中3 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Magnetic_h3 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa