一、Image - 图片显示组件
- 声明 Image 组件并设置图片源
src:图片源。是一个联合类型(Union Types),支持三种格式Image(src: string | PixelMap | Resource)
- string 格式,通常用来加载网络图片
Image('https://xxx.png')
注:使用
Stage
模型的应用,需要在module.json5
文件中声明网络访问权限"requestPermissions": [ { "name": 'ohos.permission.INTERNET' } ]
- PixelMap 格式,可以加载像素图,常用在图片编辑中
Image(pixelMapObject)
- Resource 格式,加载本地图片
Image($r('app.media.icon')) -> 读取 media 目录里的图片 或 Image($rawfile('icon.png')) -> 读取 rawfile 目录里的图片
- string 格式,通常用来加载网络图片
- 添加图片属性
- 设置组件通用属性:
Image($r('app.media.icon')) .width(100) // 设置宽度 .height(100) // 设置高度 .borderRadius(40) // 边框圆角
- 设置组件特有属性:
Image($r('app.media.icon')) .interpolation(ImageInterpolation.High) // 图片插值 图片插值的作用: 有些低分辨率的图片一旦放大以后就会出现锯齿,看起来不清晰。设置图片插值,就会弥补图片的锯齿,视觉效果是看起来清晰度变高了。
- 设置组件通用属性:
二、Text - 文本显示组件
- 声明 Text 组件并设置文本内容
content:展示的文本内容。是一个联合类型(Union Types),支持两种格式Text(content?: string | Resource)
- string 格式,直接填写文本内容
Text('文字内容')
- Resource 格式,读取本地资源文件
Text($r('app.string.module_desc')) -> 读取 element 目录里的 string.json
- string 格式,直接填写文本内容
- 添加文本属性
Text('一段文字') .lineHeight(32) // 行高 .fontSize(20) // 字体大小 .fontColor('#FF00FF') // 字体颜色 .fontWeight(FontWeight.Bold) // 字体粗细
三、TextInput - 文本输入框组件
- 声明 TextInput 组件:
TextInput({ placeholder?:ResourceStr, text?:ResourceStr })
- placeholder:输入框无输入时的提示文本
TextInput({ placeholder: '无输入时的提示文本' })
- text:输入框当前的文本内容
TextInput({ text: '当前的文本内容' })
- placeholder:输入框无输入时的提示文本
- 添加属性和事件
-
设置组件通用属性:
TextInput({ text: '当前的文本内容' }) .width(200) // 宽 .height(50) // 高 .backgroundColor('FFF') // 背景色
-
设置组件特有属性:
TextInput({ text: '当前的文本内容' }) .type(InputType.PhoneNumber) // 输入框类型 .onChange(value => { // value 是用户输入的文本内容 })
输入框类型 type:
名称 类型 Normal 基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。 Number 纯数字输入模式。 PhoneNumber 电话号码输入模式。支持输入数字、+、-、*、#,长度不限。 Email 邮箱地址输入模式。支持数字、字母、下划线、以及@字符。 Password 密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。 事件方法 onChange:
当用户在文本输入框输入内容发生变化以后触发的事件,value 就是最新的文本内容。
-
四、Button - 按钮组件
- 声明 Button 组件:
label:是按钮上面要显示的文字,可选参数,可以传也可以不传Button(label? : ResourceStr)
- 如果参数,就是一个
文字型按钮
Button('按钮')
- 如果不传参数,就没有文字描述,就需要给按钮内部嵌套其他组件,就是一个
自定义按钮
Button() { Image($r('app.media.icon')).width(20).margin(10) }
- 如果参数,就是一个
- 添加属性和事件
-
设置组件通用属性:
Button('按钮') .width(100) // 宽 .height(30) // 高
-
设置组件特有属性:
Button('按钮') .type(ButtonType.Normal) // 按钮类型 .onClick(() => { // 处理点击事件 })
按钮类型 type:
名称 描述 Capsule 胶囊型按钮(圆角默认为高度的一半)。 Circle 圆形按钮。 Normal 普通按钮(默认不带圆角)。 事件方法 onClick:
当按钮点击时会触发 onClick 事件
-
五、Slider - 滑动条组件
- 声明 Slider 组件:
options:滑动条配置属性Slider(options?: SliderOptions)
- 添加属性和事件
Slider({ min: 0, // 最小值 max: 100, // 最大值 value:30, // 当前值 step:10, // 滑动步长 style:SliderStyle.OutSet, // 样式 direction:Axis.Horizontal, // 方向 reverse:false // 是否反向滑动 })
- step:
滑动步长。每滑动一次 value 会增加或减少的值,默认值是 1。 - style:
滑动条的样式。
默认值是 Outset,也就是滑块在滑动条的外面。
InSet,滑块在滑动条的里面。 - direction:
滑动条的方向。
默认值是 Horizontal,水平方向。
Vertical,垂直方向。(默认情况下,最下面是最大值,最上面是最小值)
- step:
-
设置组件通用属性:
Slider() .width('90%') // 宽度
-
设置组件特有属性:
Slider() .trackThickness(10) // 滑轨粗细 .showTips(true) // 是否展示 value 百分比提示 .blockColor('#000') // 滑块颜色 .onChange(value => { // value 就是当前滑块值 })
事件方法 onChange:
滑块在滑动的过程中,它所对应的值在变更,每一次值变更就会触发 onChange 事件,value 就是当前滑块对应的值。