鸿蒙基础组件介绍

修罗246
421 阅读4分钟

鸿蒙基础组件介绍

本文章对鸿蒙中最常用的组件以及属性方法进行简单的介绍，主要介绍以下四个组件：

  1. Image 组件
  2. Text / span 组件
  3. Button 组件
  4. TextInput / TextArea 组件

以上四个组件可以满足我们大多数场景的需求

Image 组件

Image 组件主要用于图片展示，包括但不限于网络图片、本地图片、base64格式图片，基础用法如下：

Image(图片地址).属性

其中图片地址可类型如下：

  1. 网络图片地址，例如 'i-blog.csdnimg.cn/blog_migrat…'
  2. 本地资源地址，需要使用 $r 进行包裹，格式为 $r('app.media.xxx')，其中 xxx 为图片名称且不需要添加后缀名
  3. 绝对路径，可以使用 /pages/图片路径 的方式加载图片

常用的 Image 组件属性（通用属性除外）如下：

  1. aspectRatio：其属性中接收一个参数，类型为数字，用于固定图片的宽高比，防止图片发生变形

  2. fillColor：其中接收一个表示颜色的参数，例如鸿蒙中内置的 Color 枚举、十六进制颜色、rgb颜色等

    注意：图片格式必须为 svg 格式

  3. objectFit： 其中接收一个 ImageFit 枚举的参数，有 Fill、Cover、Contain，效果如下：

image-20240811210830791.png

若需要图片根据宽或者高自适应，只需要设置宽或者高一个属性的值即可。

Text / span 组件

Text / span 组件主要用于文字的展示，其中基础用法如下：

Text('我是Text') {
  Span('我是Span')
    .属性
}.属性

其中 span 是 Text 的子组件，且如果 span 中有值的话会覆盖掉 Text 中的文本信息

常用的 Text / span 组件属性（通用属性除外）如下:

  1. fontSize：设置字体大小
  2. fontColor：设置字体颜色
  3. fontWeight：设置字体粗细
  4. decoration：设置文本修饰线及颜色
  5. textOverflow：设置文本超长时的显示方式
  6. maxLines：设置文本的最大行数

其中 textOverflow 和 maxLines 组合使用可以为超出的文本显示省略号

image-20240812210044170.png

注意：span 组件只能嵌套在 Text, RichEditor 以及 ContainerSpan 组件中

测试代码如下:

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 省略号
      Text('测试文字'.repeat(20))
        .fontColor(Color.Blue)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
​
      Text('-'.repeat(20))
​
      // Text 与 span 组合使用
      Text('我是Text') {
        // span 内容替换掉了 Text 的内容
        Span('我是Span')
          .fontSize(20)
          .fontWeight(900)
          .decoration({ type: TextDecorationType.Overline })
        Span('我是Span')
          .fontColor(Color.Yellow)
          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
        Span('我是Span')
          .font({ size: 16, weight: 300 })
          .decoration({ type: TextDecorationType.Underline, color: Color.Blue })
      }
    }
    .width(300)
    .height(200)
    .backgroundColor(Color.Pink)
  }
}

Button 组件

Button 组件有内部的一部分样式封装，虽然我们使用 Text 组件也可封装成 Button 组件的样式，但是 Button 组件不同于 Text 组件，它可以给用户提供点击反馈，提升用户体验。其基础用法如下：

Button('我是Button', { 参数配置 }){
  // 可包含基础组件和容器组件  
}
.通用属性

这里我们可很明显的看到 Button 组件可以接收参数进行相关配置，以下是对 Button 的参数介绍：

  1. type：设置按钮类型，其接收类型为 ButtonType 的枚举

    • Capsule：胶囊类型
    • Circle：圆形按钮
    • Normal：普通按钮

  2. stateEffect：设置按钮的点击反馈，接收类型为 boolean

注意：若 Button 组件内部有文本展示，则无需给 Button 组件写入文字

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button({ type: ButtonType.Capsule, stateEffect: false }) {
        Text('我是Text')
      }
      .backgroundColor(Color.Pink)
      .padding(10)
    }
  }
}

image-20240813095940299.png

TextInput / TextArea 组件

TextInput 、TextArea 是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等。其中 TextInput 为单行输入框、TextArea 为多行输入框，当文本超过一行时会换行继续显示。其基础用法如下：

TextInput({ 参数配置 })
.属性

TextArea 组件和 Text 组件的常用参数配置和独有属性一致

常用参数介绍：

  1. text：其参数类型是文本字符串，是输入框中输入的内容
  2. placeholder：其参数类型是文本字符串，用于文本框提示文字的设置

属性（通用属性除外）：

  • type：其参数类型为 InputType 的枚举，常用的类型如下：

    • Normal：默认类型
    • Password：密码类型，会隐藏输入的密码
@Entry
@Component
struct Index {
  build() {
    Column() {
      TextInput({ placeholder: '提示文字', text: '内容文字' })
        .type(InputType.Normal)
        .border({ width: 1 })
      TextInput({ placeholder: '请输入密码' })
        .type(InputType.Password)
        .border({ width: 1 })
    }
  }
}

recording.gif

以上就是对基本组件的介绍，也是第一次做博客，做得不好的地方请大家多多见谅！！！

avatar
文章
阅读
粉丝