《跟我一起学“Harmony-ArkTS”》——常用组件及其属性和事件

本章言简意赅的为大家介绍了常用组件及其属性和事件的内容。

Cool_foolisher

1752人浏览 · 2024-12-05 23:33:31

Cool_foolisher · 2024-12-05 23:33:31 发布

一、文本组件

Text是文本组件，通常用于展示用户视图，如显示文章的文字。
Text可通过以下两种方式来创建：

string字符串

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('我是字符串')
    }
  }
}

引用Resource资源
资源引用类型可以通过$r创建Resource类型对象，文件位置为 /resources/base/element/string.json。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text($r('app.string.string'))
    }
  }
}

文本组件的属性

属性	描述
fontSize	字体大小
fontColor	字体颜色
fontStyle	字体样式
fontWeight	字体粗细
lineHeight	文本行高
decoration	文本修饰线及颜色
textAlign	水平方向Text对齐方式
align	垂直方向对齐方式
textIndent	文本首行缩进
textOverflow	设置文本超长时的显示方式
maxLines	设置文本的最大行数

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('字体⼤⼩')
        .fontSize(30)
    }
  }
}

字体颜色

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('字体颜⾊1')
        .fontColor(Color.Pink)
      Text('字体颜⾊2')
        .fontColor('#ff0000')
      Text('字体颜⾊3')
        .fontColor('rgb(0, 255, 255)')
      // 半透明
      Text('字体颜⾊4')
        .fontColor('rgba(0, 255, 255, 0.5)')
    }
  }
}

字体样式

参数：枚举 FontStyle
Normal ：正常字体（不倾斜）
Italic ：斜体

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('倾斜字体')
        .fontStyle(FontStyle.Italic)
    }
  }
}

字体粗细

参数：
[100, 900]，取值越大，字体越粗，默认值为 400
枚举 FontWeight
Lighter：字体较细
Normal：字体粗细正常，默认值
Regular：字体粗细正常
Medium：字体粗细适中
Bold：字体较粗
Bolder：字体非常粗

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('邹小瑜')
        .fontWeight(900)
        .fontSize(30)
      Text('字体粗细1')
        .fontWeight(FontWeight.Bolder)
        .fontSize(30)
      Text('字体粗细2')
        .fontWeight(FontWeight.Bold)
        .fontSize(30)
    }
  }
}

文本行高

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('HarmonyOS是新⼀代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统⼀的语⾔。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
        .lineHeight(40)
    }
  }
}

文本修饰

参数： {}
type：修饰线类型， TextDecorationType （枚举）
None：无
Underline：下划线
LineThrough：删除线
Overline：顶划线
color：修饰线颜色，可选，默认为黑色

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('⽂本修饰线-删除线')
        .decoration({
          type: TextDecorationType.LineThrough,
          color: '#888'
        })
        .fontColor('#999')
      Text('⽂本修饰线')
        .decoration({
          type: TextDecorationType.Underline
        })
    }
  }
}

文本水平对齐方式

参数：枚举 TextAlign
Start：左对齐，默认值
Center：居中
End：右对齐

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('左对⻬')
        .width(200)
        .height(50)
        .backgroundColor(Color.Orange)
        .textAlign(TextAlign.Start)
      Text('右对⻬')
        .width(200)
        .height(50)
        .backgroundColor('#d3f2e3')
        .textAlign(TextAlign.End)
    }
  }
}

文本垂直对齐方式

参数：枚举 Alignment
Top: 顶对齐
Center: 垂直居中，默认值
Bottom: 底对齐

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('顶对⻬')
        .width(200)
        .height(100)
        .textAlign(TextAlign.Center)
        .align(Alignment.Top)
      Text('居中对⻬')
        .width(200)
        .height(100)
        .backgroundColor(Color.Orange)
        .textAlign(TextAlign.Center)
        .align(Alignment.Center)
      Text('底对⻬')
        .width(200)
        .height(100)
        .textAlign(TextAlign.Center)
        .align(Alignment.Bottom)
    }
  }
}

文本首行缩进

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('HarmonyOS是新⼀代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统⼀的语⾔。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
        .fontSize(14)
        .textIndent(28)
    }
  }
}

文本超长显示方式

参数： {overflow: TextOverflow} ， TextOverflow 为枚举类型
None：文本超长时裁剪显示
Clip：文本超长时进行裁剪显示
Ellipsis：文本超长时显示不下的文本用省略号代替
MARQUEE：文本超长时以跑马灯的方式展示（滚动显示）

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('HarmonyOS是新⼀代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统⼀的语⾔。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
        .fontSize(14)
        .textIndent(28)
        .maxLines(2)
          // 超⻓⽂本使⽤省略号代替
        .textOverflow({overflow: TextOverflow.Ellipsis})
          // 裁剪超⻓⽂本
        .textOverflow({overflow: TextOverflow.Clip})
          // 超⻓⽂本滚动显示
        .textOverflow({overflow: TextOverflow.MARQUEE})
    }
  }
}

注意： 使用textOverflow配合maxLines实现文本溢出显示省略号效果。

Span子组件
Span只能作为Text和RichEditor组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('我是Text') {
        Span('我是Span')
      }
      .padding(10)
      .borderWidth(1)
    }
  }
}

注意： Span组件需要写到Text组件内，单独写Span组件不会显示信息，Text与Span同时配置文本内容时，Span内容覆盖Text内容。

Span设置文本装饰线及颜色

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text() {
        Span('我是Span1，').fontSize(16).fontColor(Color.Grey)
          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
        Span('我是Span2').fontColor(Color.Blue).fontSize(16)
          .fontStyle(FontStyle.Italic)
          .decoration({ type: TextDecorationType.Underline, color: Color.Black })
        Span('，我是Span3').fontSize(16).fontColor(Color.Grey)
          .decoration({ type: TextDecorationType.Overline, color: Color.Green })
      }
      .borderWidth(1)
      .padding(10)
    }
  }
}

Span通过textCase设置文字一直保持大写或者小写状态

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text() {
        Span('I am Upper-span').fontSize(12)
          .textCase(TextCase.UpperCase)
      }
      .borderWidth(1)
      .padding(10)
    }
  }
}

添加事件

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text() {
        Span('I am Upper-span').fontSize(12)
          .textCase(TextCase.UpperCase)
          .onClick(()=>{
            console.info('我是Span——onClick')
          })
      }
    }
  }
}

注意： 由于Span组件无尺寸信息，事件仅支持添加点击事件onClick。

其他属性和事件
文本组件（Text）的更多属性和事件可以通过Text官方文档或者API进行查阅，本篇只对常用的属性和事件进行介绍。

二、文本输入框组件

TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。

TextInput为单行输入框、TextArea为多行输入框

@Entry
@Component
struct Index {
  build() {
    Column() {
      TextInput()
      TextArea()
    }
  }
}

注意： 多行输入框文字超出一行时会自动折行。

输入框类型
TextInput有9种可选类型，分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式、USER_NAME用户名输入模式、NEW_PASSWORD新密码输入模式、NUMBER_PASSWORD纯数字密码输入模式、NUMBER_DECIMAL带小数点的数字输入模式。通过type属性进行设置。

@Entry
@Component
struct Index {
  build() {
    Column() {
      TextInput()
        .type(InputType.Normal)
      TextInput()
        .type(InputType.Password)
    }
  }
}

其他属性和事件
文本输入框组件的属性和事件与文本组件类似，这里就不在详细列举，可以参考上述文本组件的属性和事件或者查看TextInput官方文档、TextArea官方文档及其API即可。

三、图片组件

Image支持多种图片格式，包括png、jpg、bmp、svg、gif和heif。

Image组件属性

属性	描述
width	宽度（通用属性）
height	高度（通用属性）
aspectRatio	宽高比（通用属性）
alt	加载时显示的占位图，支持本地图片（png、jpg、bmp、svg和gif类型），不支持网络图片
objectFit	设置图片的填充效果，默认值：ImageFit.Cover

宽高

width ：组件宽度，取值数字或百分比
height ：组件高度，取值数字或百分比
aspectRatio ：组件宽高比，宽度/高度

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 本地图⽚ 正⽅形图添加 aspectRatio 属性，宽⾼⽐例为 1:1
      Image($r('app.media.dog'))
        .width(200)
        .aspectRatio(1)
      // ⽹络图⽚
      Image('https://developer.huawei.com/images/logo-developer-header.svg')
        .width(200)
          // ⻓⽅形图⽚设置宽⾼⽐1:1, 会导致图⽚显示不全
        .aspectRatio(1)
    }
  }
}

注意： 引入网络图片需申请权限ohos.permission.INTERNET，具体申请方式请参考 权限声名。

占位

@Entry
@Component
struct Index {
  build() {
    Column() {
      Image('https://developer.huawei.com/images/logo-developer-header.svg')
        .width(200)
          // 加载时显示的占位图
        .alt($r('app.media.startIcon'))
    }
  }
}

图片填充

参数类型：枚举 ImageFit
Contain：图片宽或高缩放到与组件尺寸相同则停止缩放，可能导致组件有空白（等比缩放）
Cover：默认效果，图片缩放到完全覆盖组件范围，可能导致图片显示不完整（等比缩放）
Fill：图片缩放到充满组件（不等比缩放）

@Entry
@Component
struct Index {
  build() {
    Column() {
      Image($r('app.media.dog'))
        .width(200)
        .height(100)
        .backgroundColor(Color.Pink)
          // 图⽚宽或⾼缩放到与组件尺⼨相同则停⽌缩放，可能导致组件有空⽩（等⽐缩放）
        .objectFit(ImageFit.Contain)
          // 默认：图⽚缩放到完全覆盖组件范围，可能导致图⽚显示不完整（等⽐缩放）
        .objectFit(ImageFit.Cover)
          // 图⽚缩放⾄充满组件（不等⽐缩放）
        .objectFit(ImageFit.Fill)
    }
  }
}

其他属性和事件
图片组件（Image）的其他属性和事件，可以参考Image官方文档或者API进行学习，这里就不在一一罗列。

四、按钮组件

Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。

创建按钮

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('Ok', { type: ButtonType.Normal, stateEffect: true })
        .borderRadius(8)
        .backgroundColor(0x317aff)
        .width(90)
        .height(40)
    }
  }
}

注意： label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果，borderRadius设置按钮圆角，backgroundColor设置按钮背景图案。

子组件按钮

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button({ type: ButtonType.Normal, stateEffect: true }) {
        Row() {
          Image($r('app.media.loading'))
            .width(20)
            .height(40)
            .margin({ left: 12 })
          Text('loading')
            .fontSize(12)
            .fontColor(0xffffff)
            .margin({ left: 5, right: 12 })
        }
        .alignItems(VerticalAlign.Center)
      }
      .borderRadius(8)
      .backgroundColor(0x317aff)
      .width(90)
      .height(40)
    }
  }
}

注意： Row是行布局，会在下一篇文章中介绍。

按钮类型
Button有三种可选类型，分别为胶囊类型（Capsule）、圆形按钮（Circle） 和普通按钮（Normal），通过type进行设置。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('胶囊按钮', { type: ButtonType.Capsule, stateEffect: false })
        .backgroundColor(0x317aff)
        .width(90)
        .height(40)
      Button('圆形按钮', { type: ButtonType.Circle, stateEffect: false })
        .backgroundColor(0x317aff)
        .width(90)
        .height(90)
      Button('普通按钮', { type: ButtonType.Normal, stateEffect: true })
        .borderRadius(8)
        .backgroundColor(0x317aff)
        .width(90)
        .height(40)
    }
  }
}

点击事件
Button组件通常用于触发某些操作，可以绑定onClick事件来响应点击操作后的自定义行为。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('Ok', { type: ButtonType.Normal, stateEffect: true })
        .onClick(()=>{
          console.info('按钮被点击')
        })
    }
  }
}