Image组件
参数类型
Image(src: string|PixelMap|Resource)
-
String格式
通常用来加载网络图片,需要申请网络访问权限:ohos.permission.INTERNET
Image('https://xxx.png')
-
PixelMap格式「
较少
使用」可以加载像素图,通常用在图片编辑中
Image(PixelMapObject)
-
Resource格式「
推荐
使用」加载本地图片,两种引入方式,如下:
-
对应entry>src>main>resources>base>media中的图片,可忽略后缀
Image($r('app.media.mate60'))
-
对应entry>src>main>resources>rawfile中的图片,不可忽略后缀
Image($rawfile('mate60.png'))
-
Image属性
Image('https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109515/428_428_B85A84324EC75D29F3EDB5ADACA768FBmp.png')
.width(250)
.height(200)
.borderRadius(10)
.interpolation(ImageInterpolation.High)
-
通用属性
其中width、height、borderRadius均为组件通用属性(其他组件也有)。
当参数为number时,可省略单位vp。
vp:虚拟像素,可以根据设备像素密度进行换算,保证在不同设备下,视觉大小统一。
-
特有属性
interpolation图片插值,该属性会弥补图片放大后的「锯齿」,从而提高清晰度。
配置添加网络访问权限
如果需要使用网络图片,需要添加网络访问权限,在module.json5的module对象中添加如下配置:
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
],
Text组件
参数类型
Text(content?: string | Resource)
文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不生效。
默认值:’ ’
常用属性
-
textAlign
设置文本段落在水平方向的对齐方式。默认值:TextAlign.Start。说明:文本段落宽度占满Text组件宽度;可通过align属性控制文本段落在垂直方向上的位置。
-
textOverflow
设置文本超长时的显示方式。默认值:{overflow: TextOverflow.Clip}。说明: 文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,可在字母间添加零宽空格:\u200B。需配合maxLines使用,单独设置不生效。
-
copyOption
组件支持设置文本是否可复制粘贴。默认值:CopyOptions.None。 -
maxLines
设置文本的最大行数。默认值:Infinity。说明:默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。如果有多余的文本,可以通过 textOverflow来指定截断方式。
-
lineHeight
设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时单位为fp。
-
baselineOffset
设置文本基线的偏移量,默认值0。
说明:设置该值为百分比时,按默认值显示。
注意
不支持Text内同时存在文本内容和Span子组件。如果同时存在,只显示Span内的内容。
TextInput组件
参数类型
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
-
placeholder
设置无输入时的提示文本。
-
text
设置输入框当前的文本内容。设置输入框当前的文本内容。当组件设置stateStyles等刷新属性时,建议通过onChange事件将状态变量与文本实时绑定,避免组件刷新时TextArea中的文本内容异常。
-
controller
设置TextInput控制器。
常用属性
-
type
设置输入框类型。默认值:InputType.Normal
Normal 基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。 Password 密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。 Email 邮箱地址输入模式。支持数字,字母,下划线,以及@字符(只能存在一个@字符)。 Number 纯数字输入模式。 PhoneNumber 电话号码输入模式。支持输入数字、+ 、-、*、#,长度不限。 -
maxLength
number类型,设置文本的最大输入字符数。
-
inputFilter
{
value: ResourceStr,
error?: (value: string) => void
}
正则表达式,匹配表达式的输入允许显示,不匹配的输入将被过滤。目前仅支持单个字符匹配,不支持字符串匹配。
- value:设置正则表达式。
- error:正则匹配失败时,返回被过滤的内容。
-
copyOption
设置输入的文本是否可复制。
设置CopyOptions.None时,当前TextInput中的文字无法被复制或剪切,仅支持粘贴。
Button组件
参数类型
方法1: Button(options?: {type?: ButtonType, stateEffect?: boolean})
方法2: Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })「使用文本内容创建相应的按钮组件,此时Button无法包含子组件。」
常用属性
-
type
设置Button样式。
默认值:ButtonType.Capsule
名称 描述 Capsule 胶囊型按钮(圆角默认为高度的一半)。 Circle 圆形按钮。 Normal 普通按钮(默认不带圆角)。 -
stateEffect
Boolean类型,按钮按下时是否开启按压态显示效果,当设置为false时,按压效果关闭。
默认值:true
Slider组件
参数类型
Slider(options?: SliderOptions)
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
value | number | 否 | 当前进度值。默认值:0 |
min | number | 否 | 设置最小值。默认值:0 |
max | number | 否 | 设置最大值。默认值:100。说明:min >= max异常情况,min取默认值0,max取默认值100。value不在[min, max]范围之内,取min/max,靠近min取min,靠近max取max。 |
step | number | 否 | 设置Slider滑动步长。默认值:1。取值范围:[0.01, max]**说明:**设置小于0或百分比的值时,按默认值显示。 |
style | SliderStyle | 否 | 设置Slider的滑块与滑轨显示样式。默认值:SliderStyle.OutSet(滑块在滑轨上),InSet(滑块在滑轨内) |
direction | Axis | 否 | 设置滑动条滑动方向为水平或竖直方向。默认值:Axis.Horizontal(水平) |
reverse | boolean | 否 | 设置滑动条取值范围是否反向,横向Slider默认为从左往右滑动,竖向Slider默认为从上往下滑动。默认值:false |
常用属性
名称 | 参数类型 | 描述 |
---|---|---|
blockColor | ResourceColor | 设置滑块的颜色 。 |
trackColor | ResourceColor | 设置滑轨的背景颜色 。 |
selectedColor | ResourceColor | 设置滑轨的已滑动部分颜色 。 |
showSteps | boolean | 设置当前是否显示步长刻度值 。默认值:false。 |
showTips | boolean | 设置滑动时是否显示百分比气泡提示 。默认值:false。说明:当direction的属性值为Axis.Horizontal时,tip显示在滑块正上方。值为Axis.Vertical时,tip显示在滑块正左边。tip的绘制区域为Slider自身节点的overlay。Slider不设置边距,或者边距比较小时,tip会被截断。 |
trackThickness | Length | 设置滑轨的粗细。默认值:当参数style的值设置SliderStyle.OutSet 时为 4.0vp,SliderStyle.InSet时为20.0vp。说明:设置为小于0的值时,按默认值显示。 |
事件
Slider滑动时触发事件回调。
onChange(callback: (value: number, mode: SliderChangeMode) => void)
-
value:当前滑动进度值。若返回值有小数,可使用number.toFixed()方法将数据处理为预期的精度。
-
mode:拖动状态。
名称 值 描述 Begin 0 手势/鼠标接触或者按下滑块。 Moving 1 正在拖动滑块过程中。 End 2 手势/鼠标离开滑块。 Click 3 点击滑动条使滑块位置移动。 说明:Begin和End状态当手势点击时都会触发,Moving和Click状态当value值发生变换时触发。
当连贯动作为拖动动作时,不触发Click状态。
value值的变化范围为对应步长steps数组。
Blank
空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。