【ArkUI】常用组件

Image组件

参数类型

Image(src: string|PixelMap|Resource)

1. String格式

   通常用来加载网络图片，需要申请网络访问权限：ohos.permission.INTERNET

   Image('https://xxx.png')
   

2. PixelMap格式「较少使用」

   可以加载像素图，通常用在图片编辑中

   Image(PixelMapObject)
   

3. 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)

1. 通用属性

   其中width、height、borderRadius均为组件通用属性（其他组件也有）。

   当参数为number时，可省略单位vp。

   vp：虚拟像素，可以根据设备像素密度进行换算，保证在不同设备下，视觉大小统一。

2. 特有属性

   interpolation图片插值，该属性会弥补图片放大后的「锯齿」，从而提高清晰度。

配置添加网络访问权限

如果需要使用网络图片，需要添加网络访问权限，在module.json5的module对象中添加如下配置：

"requestPermissions": [
	{
		"name": "ohos.permission.INTERNET"
	}
],

Text组件

参数类型

Text(content?: string | Resource)

文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。

默认值：’ ’

常用属性

1. textAlign
   设置文本段落在水平方向的对齐方式。默认值：TextAlign.Start。

   说明：文本段落宽度占满Text组件宽度；可通过align属性控制文本段落在垂直方向上的位置。

2. textOverflow
   设置文本超长时的显示方式。默认值：{overflow: TextOverflow.Clip}。

   说明: 文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。需配合maxLines使用，单独设置不生效。

3. copyOption
   组件支持设置文本是否可复制粘贴。默认值：CopyOptions.None。

4. maxLines
   设置文本的最大行数。默认值：Infinity。

   说明：默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 textOverflow来指定截断方式。

5. lineHeight

   设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。

6. baselineOffset

   设置文本基线的偏移量，默认值0。

   说明：设置该值为百分比时，按默认值显示。

注意

不支持Text内同时存在文本内容和Span子组件。如果同时存在，只显示Span内的内容。

TextInput组件

参数类型

TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

1. placeholder

   设置无输入时的提示文本。

2. text

   设置输入框当前的文本内容。设置输入框当前的文本内容。当组件设置stateStyles等刷新属性时，建议通过onChange事件将状态变量与文本实时绑定，避免组件刷新时TextArea中的文本内容异常。

3. controller

   设置TextInput控制器。

常用属性

1. type

   设置输入框类型。默认值：InputType.Normal

   Normal	基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
   Password	密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。
   Email	邮箱地址输入模式。支持数字，字母，下划线，以及@字符（只能存在一个@字符）。
   Number	纯数字输入模式。
   PhoneNumber	电话号码输入模式。支持输入数字、+ 、-、*、#，长度不限。

2. maxLength

   number类型，设置文本的最大输入字符数。

3. inputFilter

   {

   ​ value: ResourceStr,

   ​ error?: (value: string) => void

   }

   正则表达式，匹配表达式的输入允许显示，不匹配的输入将被过滤。目前仅支持单个字符匹配，不支持字符串匹配。

   - value：设置正则表达式。

   - error：正则匹配失败时，返回被过滤的内容。

4. copyOption

   设置输入的文本是否可复制。

   设置CopyOptions.None时，当前TextInput中的文字无法被复制或剪切，仅支持粘贴。

Button组件

参数类型

方法1： Button(options?: {type?: ButtonType, stateEffect?: boolean})

方法2： Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })「使用文本内容创建相应的按钮组件，此时Button无法包含子组件。」

常用属性

1. type

   设置Button样式。

   默认值：ButtonType.Capsule

   名称	描述
   Capsule	胶囊型按钮（圆角默认为高度的一半）。
   Circle	圆形按钮。
   Normal	普通按钮（默认不带圆角）。

2. 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)

1. value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。

2. mode：拖动状态。

   名称	值	描述
   Begin	0	手势/鼠标接触或者按下滑块。
   Moving	1	正在拖动滑块过程中。
   End	2	手势/鼠标离开滑块。
   Click	3	点击滑动条使滑块位置移动。

   说明：Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变换时触发。

   当连贯动作为拖动动作时，不触发Click状态。

   value值的变化范围为对应步长steps数组。

Blank

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。