ArkTS组件

image组件基本使用

image($r('app.media.logo'))#设置图片源
width（78）
height（78）#设置图片大小

text组件基本使用

#设置文本内容 支持string和resource
Text('登录页面')
#设置文本大小 支持number string resource
fontSize(24)
#设置文本粗细 支持number和 fontweight Lighter Normal Regular Medium Bold Bolder
fontWeight(FontWeight.Medium)
#设置文本颜色 支持color.black number string resource
fontCOlor('#182431')

Textlnout

#设置提示文本
TextInput({placeholder:'账号'})
#设置最大输入字符数
    maxLength(11)
#设置文本框输入类型
    type(InputTyre.Number)
#设置onChange事件
    onChange((value：string)) =>{
        this.account = value:
    })

Button组件

#设置按钮样式
Button('登录'，{ type：ButtonType.Capsule})
#设置按钮点击事件
onClick(() => {
//登录逻辑
})

布局容器

Column表示垂直方向布局容器（Column的主轴）

Row表示沿水平方向布局的容器（Row的主轴）

属性名：justifycontent：设置子组件在主轴方向上的对齐方式。

其参数类型有Start，Center，End，SpaceBetween，SpaceAround，SpaceEvenly

接口：Column（value？：{space?:string|number}）

alignltems:设置子组件在交叉方向上的对齐格式。

其类型有Start，Center，End，Top，Center，Bottom

接口：Row（value?:{space?:string|number}）