鸿蒙学习（二）-ArkUI组件

Image-Text-TextInput-Botton-Slider

把鼠标放在组件名上面，会出现show in API Reference ，可以进入开发文档查找自己需要的属性，下面介绍的都是一些基础属性，供大家了解

Image

声明Image并设置图片源

Image(src:string|PixelMap|Resource)

1、String格式，用来加载网络图片，需要申请网络访问权限：ohos.permission.INTERENT

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

2、PixelMap可以加载像素图，常用于图片编辑

Image(pixelMapObject)

3、Rescoure，加载本地图片，常用

Image($r("app.media.mate60")) --这个是读取mian中recources中media中的图片的，格式固定，最后是图片的名字，省略后缀。

Image($rawfile("mate60.png")) --读取rewfile中图片的方法，直接写图片名字

属性

Image($r("app.mdeia.icon"))

.width(100)

.height(120)

.borderRadius(10) //边框圆角

Text

定义

Text(content?：string|Resource)

1、string格式，直接填写文本内容

Text("文本哈哈哈哈")

2、Resource格式，读取本地资源文件

Text($r("app.string.width_label"))

base是默认目录，里面放普通的内容，en_US和zh_CN是区分国家用的，里面放限定词目录（国家，语言，设备），string.json中放的限定内容，可以使代码在中文设备展示中文，英文设备展示英文，当限定词目录都不匹配，就去限定词目录，所以限定词目录一定要写

属性

Text("是安徽")

.lineHeight(23)

.fontSize(20)

.fontColor("#ff1876f8")

.fontweight(FontWeight.Medium)

TextInput

声明格式

TextInput({placeholder?:ResourceStr,text?:ResourceStr}) 都是可选的，

1、placeHoder:(文本提示)

TextInput({placeholder:"请输入账号或密码"})，当输入字的时候就会消失

2、text:输入框当前的文本内容

TextInput({text:"itcajga;"})，直接存在在文本框中，是可以改变的，相当于默认文本

属性

TextInput({text:"ajfdjaf"})

.width(140)

.height(30)

.backgroundColor("#FFF")

.type(InputType.Password) //输入密码，输入啥都是*****

Button

声明

Button(label?:ResourceStr)

1、文字型按钮
Button("来打我")

2、自定义按钮，在Button中嵌套其他组件

Button(){

Image($r("app.media.search")).width(20).margin(10)

}

属性

Button("干我")

.width(100)

.heigth(20)

.type(ButtonType.Normal) //按钮类型

.onClick(()=>{

if(this.imageWidth >= 10){

this.imageWidth -=10 //点击后宽度每次减小10

}

})

按钮类型

名称	描述
Capsule	胶囊型，（默认圆角边为高度的一半）
Cricle	圆形按钮
Normal	普通按钮（长方形）

Slider

Slider(options?:SliderOptions)

Slider({

min:0, //最小值

max:100, //最大值

value:30, //当前值

step:10, //滑动步长

style:SliderStyle.OutSet, //滑动条的圆点点在里面还是在外面

direction:Axis.Horizontal, //滑动条是竖着还是横着，Vertical是竖着的滑动条

reverse:false //是否反向滑动

})

属性

.width("90%")

.showTips(true) //是否展示value百分比

.blockColor

.onChange(value =>{

this.imageWidth = value //当化滑动条发生变化，图片的宽度也会联动发生变化。

})