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

听说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.page
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
@Entry
@Component
public 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语言##仓颉##购物#