当前位置:   article > 正文

学习鸿蒙基础(2)

学习鸿蒙基础(2)

arkts是声名式UI

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

上图布局对应的代码:

  1. @Entry //入口
  2. @Component
  3. struct Index {
  4. @State message: string = 'Hello Harmonyos' //@State 数据改变了也刷新的标签
  5. build() {
  6. Row() {
  7. Column() {
  8. Text(this.message)
  9. .fontSize(30)
  10. .margin(10)
  11. .padding(20)
  12. .backgroundColor("#333333")
  13. .fontColor(Color.White)
  14. .border({
  15. width:3,
  16. color:Color.Blue
  17. }).borderRadius(10)
  18. .onClick(() => {
  19. console.log("点击了text")
  20. this.message = "text"
  21. })
  22. .fontWeight(FontWeight.Bold)
  23. Divider().margin(10)
  24. Button("click")
  25. .width(100)
  26. .height(50)
  27. .onClick(this.read.bind(this))
  28. }
  29. .width('100%')
  30. .height('50%')
  31. }
  32. .height('100%')
  33. .width('90%')
  34. }
  35. // 方法多的话写到这里
  36. read() {
  37. console.log("我是button的点击事件")
  38. this.message = "button"
  39. }
  40. }

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

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

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

@Builder 注释来实现
  1. @Entry //入口
  2. @Component
  3. struct PageB {
  4. @State message: string = 'Hello World' //@State 数据改变了也刷新的标签
  5. build() {
  6. Row() {
  7. Column() {
  8. this.TextLabel("账号")
  9. this.TextLabel("密码")
  10. Divider().margin(10)
  11. Button("click")
  12. .width(100)
  13. .height(50)
  14. .onClick(this.read.bind(this))
  15. }
  16. .width('100%')
  17. .height('50%')
  18. }
  19. .height('100%')
  20. .width('90%')
  21. }
  22. // 方法多的话写到这里
  23. read() {
  24. console.log("我是button的点击事件")
  25. this.message = "button"
  26. }
  27. @Builder//自定义组件内,自定义构件函数
  28. TextLabel(title:string ){
  29. Text(title+this.message)
  30. .fontSize(16)
  31. .margin(10)
  32. .padding(10)
  33. .width(200)
  34. .height(50)
  35. .backgroundColor("#333333")
  36. .fontColor(Color.White)
  37. .border({
  38. width:3,
  39. color:Color.Blue
  40. }).borderRadius(10)
  41. .onClick(() => {
  42. this.message ="admin"
  43. })
  44. .fontWeight(FontWeight.Bold)
  45. }
  46. }

2.全局自定义构建函数

  1. @Entry //入口
  2. @Component
  3. struct PageB {
  4. @State message: string = 'Hello World' //@State 数据改变了也刷新的标签
  5. build() {
  6. Row() {
  7. Column() {
  8. TextLabel("账号")
  9. TextLabel("密码")
  10. Divider().margin(10)
  11. Button("click")
  12. .width(100)
  13. .height(50)
  14. .onClick(this.read.bind(this))
  15. }
  16. .width('100%')
  17. .height('50%')
  18. }
  19. .height('100%')
  20. .width('90%')
  21. }
  22. // 方法多的话写到这里
  23. read() {
  24. console.log("我是button的点击事件")
  25. this.message = "button"
  26. }
  27. }
  28. @Builder//全局自定义构件函数
  29. function TextLabel(title:string ){
  30. Text(title+this.message)
  31. .fontSize(16)
  32. .margin(10)
  33. .padding(10)
  34. .width(200)
  35. .height(50)
  36. .backgroundColor("#333333")
  37. .fontColor(Color.White)
  38. .border({
  39. width:3,
  40. color:Color.Blue
  41. }).borderRadius(10)
  42. .onClick(() => {
  43. this.message ="admin"//在全局不建议去修改message
  44. })
  45. .fontWeight(FontWeight.Bold)
  46. }

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

  1. @Entry //入口
  2. @Component
  3. struct PageB_build_param {
  4. @State message: string = 'Hello World' //@State 数据改变了也刷新的标签
  5. @State username: string = ''
  6. @State password: string = ''
  7. build() {
  8. Row() {
  9. Column() {
  10. text({ title: "用户", valueStr:this.username, cb: (value:string) => {
  11. this.username=value
  12. } })
  13. text({ title:"密码",valueStr:this.password,cb:(value:string)=>{
  14. this.password=value
  15. } })
  16. Divider().margin(10)
  17. Row() {
  18. Button("登录")
  19. .fontSize(16)
  20. .width(100)
  21. .height(50)
  22. .margin({ right: 10, left: 10 })
  23. .onClick(this.login.bind(this))
  24. Button("重置")
  25. .fontSize(16)
  26. .width(100)
  27. .height(50)
  28. .margin({ left: 10, right: 10 })
  29. .onClick(this.reset.bind(this))
  30. }
  31. }
  32. .width('100%')
  33. .height('50%')
  34. }
  35. .height('100%')
  36. .width('100%')
  37. }
  38. //登录
  39. login() {
  40. console.log(this.username+"----"+this.password)
  41. }
  42. reset() {
  43. this.username = ""
  44. this.password = ""
  45. }
  46. }
  47. @Builder //全局自定义构件函数
  48. function text($$: { title: string,valueStr: string,cb: (value: string) => void }) {
  49. Row() {
  50. Text($$.title)
  51. .fontSize(16)
  52. .margin(10)
  53. .padding(10)
  54. .width(80)
  55. .textAlign(TextAlign.Center)
  56. .height(50)
  57. .backgroundColor("#333333")
  58. .fontColor(Color.White)
  59. .border({
  60. width: 3,
  61. color: Color.Blue
  62. })
  63. .borderRadius(10)
  64. .fontWeight(FontWeight.Bold)
  65. TextInput({ text: $$.valueStr }).width(200).height(50)
  66. .fontSize(16).onChange((value: string) => {
  67. $$.cb(value)
  68. })
  69. }.alignItems(VerticalAlign.Center)
  70. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/数据科学创新者/article/detail/63319
推荐阅读
相关标签
  

闽ICP备14008679号