听说 Pura80 要来了？感觉华为的新品像下饺子一样，让人目不暇接，每隔几天就有发布会看，真不错呀。
节后第一天，为了缓解大家假期的疲惫，咱们今天做点简单的内容，就是商城的登录页面。
其实这一次分享的仓颉语言商城应用沿用了之前 ArkTs 版本的商城页面，幽蓝君认为这个应用复杂程度和难度都很适中，适合大多数友友系统的学习仓颉语言。也能感受一下仓颉语言和 Arkts 在各个方面的不同之处。
登录页面的代码就和 Arkts 非常类似，如果你不是对这两个语言非常熟悉甚至不容易看出这些细微的差别，但正是这些细微差别让人不知所措。
比如颜色的写法，仓颉语言的枚举类型变成了大写，另外不支持字符串类型，但是支持 UInt32 类型，下面以 Text 组件为例，列举下仓颉颜色的几种不同写法：
Text(‘欢迎登录’).fontSize(27).fontWeight(FontWeight.Bolder)//枚举.fontColor(Color.BLACK)//十六进制.backgroundColor(0x112233)//RGBA.borderColor(Color(100, 106, 115, alpha: 1.0))
复制代码
另外，仓颉中的属性设置和初始化参数等写法是没有大括号的，比如 padding、margin 等，再给大家演示一下：
TextInput(placeholder: '请输入账号').margin(top:50)
复制代码
还有仓颉语言中尺寸百分比的设置是使用字母 percent，点击事件的写法也和 Arkts 有所不同：
Text('登录').width(100.percent).height(50).onClick({evet => })
复制代码
因为今天登录页面的布局比较简单，如果你能用 Arkts 写出来，那使用仓颉也一定可以，下面为大家附上仓颉语言登录页面的完整代码：
package ohos_app_cangjie_entry.pageimport ohos.base.*import ohos.component.*import ohos.state_manage.*import ohos.state_macro_manage.*@Entry@Componentpublic class login { func build() { Column{ Text('幽蓝商城') .fontSize(27) .fontWeight(FontWeight.Bolder) .fontColor(Color.BLACK) Text('欢迎登录进行使用！') .fontSize(18) .fontColor(Color(100, 106, 115, alpha: 1.0)) .margin(top:8) TextInput(placeholder: '请输入账号') .margin(top:50) .placeholderColor(0x8f959e) .fontSize(15) .fontColor(Color.BLACK) .width(100.percent) .height(50) .borderRadius(10) .borderWidth(1) .borderColor(0xD0D3D5) .backgroundColor(Color.WHITE) TextInput(placeholder: '请输入密码') .setType(InputType.Password) .enterKeyType(EnterKeyType.Done) .placeholderColor(0x8f959e) .fontSize(15) .fontColor(Color.BLACK) .width(100.percent) .height(50) .borderRadius(10) .borderWidth(1) .borderColor(0xD0D3D5) .backgroundColor(Color.WHITE) .margin(top:25) Column(){ Text('登录') .width(100.percent) .height(50) .onClick({evet => }) .backgroundColor(Color(255, 84, 83, alpha: 1.0)) .fontColor(Color.WHITE) .fontSize(15) .textAlign(TextAlign.Center) .borderRadius(10) Row(){ Text("没有账号？") .fontColor(Color(143, 149, 158, alpha: 1.0)) .fontSize(14) Text("立即注册") .fontColor(Color(255, 84, 83, alpha:1.0)) .fontSize(14) .onClick({evet => }) } .margin(top:25) } .margin(top:75) .width(100.percent) .alignItems(HorizontalAlign.Center) } .width(100.percent) .height(100.percent) .justifyContent(FlexAlign.Start) .alignItems(HorizontalAlign.Start) .padding(top: 140, left: 30,right:30) }}
复制代码
以上就是登录页面开发的内容分享，感谢阅读。#HarmonyOS 语言 ##仓颉 ##购物 #
评论