学习鸿蒙基础(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)

}
相关推荐
时空自由民.1 小时前
repo 学习教程
大数据·学习·elasticsearch
CodingCos3 小时前
【芯片设计-信号完整性 SI 学习 1.1.1 -- Unit Interval,比特周期】
学习·ui·si 比特周期
摘星星的屋顶3 小时前
论文阅读记录之《VelocityGPT 》
论文阅读·人工智能·深度学习·学习
悠悠~飘6 小时前
php学习(第二天)
开发语言·学习·php
zgc12453676 小时前
汇编基础1
汇编·学习
qq7798233407 小时前
PMP考试学习计划与知识大纲
学习·产品经理
索迪迈科技7 小时前
java后端工程师进修ing(研一版‖day42)
java·开发语言·学习·算法
长安——归故李8 小时前
【modbus学习】
java·c语言·c++·学习·算法·c#
索迪迈科技8 小时前
STL库——map/set(类函数学习)
开发语言·c++·学习
我命由我123458 小时前
Excel 表格 - Excel 减少干扰、专注于内容的查看方式
学习·ui·excel·photoshop·表格·ps·美工