赞
踩
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)
-
- }

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。