登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›鸿蒙仓颉语言开发实战教程：商城登录页 ...

鸿蒙仓颉语言开发实战教程：商城登录页

铝缉惹 3 天前
听说Pura80要来了？感觉华为的新品像下饺子一样，让人目不暇接，每隔几天就有发布会看，真不错呀。
节后第一天，为了缓解大家假期的疲惫，咱们今天做点简单的内容，就是商城的登录页面。
1.png

其实这一次分享的仓颉语言商城应用沿用了之前ArkTs版本的商城页面，幽蓝君认为这个应用复杂程度和难度都很适中，适合大多数友友系统的学习仓颉语言。也能感受一下仓颉语言和Arkts在各个方面的不同之处。
登录页面的代码就和Arkts非常类似，如果你不是对这两个语言非常熟悉甚至不容易看出这些细微的差别，但正是这些细微差别让人不知所措。
比如颜色的写法，仓颉语言的枚举类型变成了大写，另外不支持字符串类型，但是支持UInt32类型，下面以Text组件为例，列举下仓颉颜色的几种不同写法：
  1. Text(‘欢迎登录’)
  2. .fontSize(27)
  3. .fontWeight(FontWeight.Bolder)
  4. //枚举
  5. .fontColor(Color.BLACK)
  6. //十六进制
  7. .backgroundColor(0x112233)
  8. //RGBA
  9. .borderColor(Color(100, 106, 115, alpha: 1.0))
复制代码
另外，仓颉中的属性设置和初始化参数等写法是没有大括号的，比如padding、margin等，再给大家演示一下：
  1. TextInput(placeholder: '请输入账号')
  2. .margin(top:50)
复制代码
还有仓颉语言中尺寸百分比的设置是使用字母percent，点击事件的写法也和Arkts有所不同：
  1. Text('登录')
  2. .width(100.percent)
  3. .height(50)
  4. .onClick({evet => })
复制代码
因为今天登录页面的布局比较简单，如果你能用Arkts写出来，那使用仓颉也一定可以，下面为大家附上仓颉语言登录页面的完整代码：
  1. package ohos_app_cangjie_entry.page
  2. import ohos.base.*
  3. import ohos.component.*
  4. import ohos.state_manage.*
  5. import ohos.state_macro_manage.*
  6. @Entry
  7. @Component
  8. public class login  {
  9.     func build() {
  10.         Column{
  11.             Text('幽蓝商城')
  12.             .fontSize(27)
  13.             .fontWeight(FontWeight.Bolder)
  14.             .fontColor(Color.BLACK)
  15.              Text('欢迎登录进行使用！')
  16.             .fontSize(18)
  17.             .fontColor(Color(100, 106, 115, alpha: 1.0))
  18.             .margin(top:8)
  19.             
  20.             TextInput(placeholder: '请输入账号')
  21.             .margin(top:50)
  22.             .placeholderColor(0x8f959e)
  23.             .fontSize(15)
  24.             .fontColor(Color.BLACK)
  25.             .width(100.percent)
  26.             .height(50)
  27.             .borderRadius(10)
  28.             .borderWidth(1)
  29.             .borderColor(0xD0D3D5)
  30.             .backgroundColor(Color.WHITE)
  31.             TextInput(placeholder: '请输入密码')
  32.             .setType(InputType.Password)
  33.             .enterKeyType(EnterKeyType.Done)
  34.             .placeholderColor(0x8f959e)
  35.             .fontSize(15)
  36.             .fontColor(Color.BLACK)
  37.             .width(100.percent)
  38.             .height(50)
  39.             .borderRadius(10)
  40.             .borderWidth(1)
  41.             .borderColor(0xD0D3D5)
  42.             .backgroundColor(Color.WHITE)
  43.             .margin(top:25)
  44.             Column(){
  45.                 Text('登录')
  46.                 .width(100.percent)
  47.                 .height(50)
  48.                 .onClick({evet => })
  49.                 .backgroundColor(Color(255, 84, 83, alpha: 1.0))
  50.                 .fontColor(Color.WHITE)
  51.                 .fontSize(15)
  52.                 .textAlign(TextAlign.Center)
  53.                 .borderRadius(10)
  54.           Row(){
  55.             Text("没有账号？")
  56.               .fontColor(Color(143, 149, 158, alpha: 1.0))
  57.               .fontSize(14)
  58.             Text("立即注册")
  59.               .fontColor(Color(255, 84, 83, alpha:1.0))
  60.               .fontSize(14)
  61.               .onClick({evet => })
  62.           }
  63.           .margin(top:25)
  64.         }
  65.         .margin(top:75)
  66.         .width(100.percent)
  67.         .alignItems(HorizontalAlign.Center)
  68.         }
  69.         .width(100.percent)
  70.         .height(100.percent)
  71.         .justifyContent(FlexAlign.Start)
  72.         .alignItems(HorizontalAlign.Start)
  73.         .padding(top: 140, left: 30,right:30)
  74.     }
  75. }
复制代码
以上就是登录页面开发的内容分享，感谢阅读。#HarmonyOS语言##仓颉##购物#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
铝缉惹
3 天前

0

粉丝关注

8

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫