文正的开始插一个题外话 代码布局有时候会比较凌乱 我们可以在系统工具栏格式化代码 也可以直接使用代码格式化快捷键进行当前文件的全部代码格式化了

option + command + l 快速格式化代码

control + option + i 快速代码缩进

组件类型

容器组件
Column 速排 Row 横排
基础组件
Text Image TextInput Button

文本组件Text

Text('标题页标题页标题页标题页标题页标题页标题页标题页标题页标题页标题页')
  .width(200)
  .height(50)
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
  .backgroundColor(Color.Orange)
  .textAlign(TextAlign.Center)
  .lineHeight(24)
  .maxLines(2)
  .textOverflow({
    // 显示不完 就...
    overflow: TextOverflow.Ellipsis
    // 跑马灯效果 这里不需要设置最大行数
    // overflow: TextOverflow.MARQUEE
  })

这里需要注意的是 一般情况文本显示不全会出现省略号 ... 在控件属性里面需要设置最大行数.maxLines()然后设置overflow: TextOverflow.Ellipsis 才会生效 当文本显示不全的时候 就会有效果 如果文字足够短 默认是不会出现省略号的

图片组件Image

// 本地图片加载
Image($r('app.media.startIcon'))
  // .width(100)
  .height(100)
// 网络图片加载
Image('https://www.baidu.com/img/flexible/logo/pc/result@2.png')
  .width('100%')
  .height(100)

文本组件可以显示本地图片和网络图片 这里根据实际情况进行选择 本地图片默认放在 src/resources/base/media 系统默认会读到media下面的图片 所以本地图片路径 在写代码的时候会有提示 不需要自己手动一个个的敲

当然官方更加推荐在使用图标的时候 使用svg格式的图标 这样放大和缩小都不会失真 需要修改图标的颜色的时候 只需要添加一个属性就可以了

// 本地图片加载
Image($r('app.media.startIcon'))
  .fillColor(Color.Red)
  .width(100)
  .height(100)

也可以官方的图标库进行下载使用

https://developer.huawei.com/consumer/cn/design/harmonyos-icon/

文本输入框TextInput

TextInput({
  placeholder: '请输入账号名'
})
  // .placeholderColor(Color.Brown)
  // .backgroundColor(Color.Orange)
  .margin(16)
TextInput({
  placeholder: '请输入密码'
})
  // .placeholderColor(Color.Brown)
  // .backgroundColor(Color.Orange)
  .margin(16)
  .type(InputType.Password)

需要注意的点是 文本默认是直接可以看到的 如果需要输入密码类 有保护作用的 需要为文本框添加类型

.type(InputType.Password) 当然还有其他类型的 通过系统枚举就可以看到了

输入框数据的双向绑定

用$$符号进行双向绑定

@State inputText: string = ''

Column() {
  TextInput({
    placeholder: '请输入内容',
    text: $$this.inputText
  })
    .onSubmit(() => {
      AlertDialog.show({ message: this.inputText })
    })
}
.width('100%')
.height(100)
.margin({ top: 30})
.backgroundColor(Color.Gray)

按钮Button

Button('登录').onClick((event: ClickEvent) => {
  console.log('正在登录')
})
.width(200)

按钮 默认会给一个点击事件 其他的就是跟基础控件属性一样了