HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件,我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。组件根据功能可以分为以下五大类:基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元,包括Text、Image、TextInput、Button、LoadingProgress等。
一.Image:图片展示组件
1.声明Image组件并设置图片来源:
Image(src: string|PixelMap|Resource)
1.1string格式:
常用来加载网络图片,需要申请网络访问权限:ohos.permission.INTERNET
Image('https://xxx.png')
1.2PixelMap格式:
加载像素图,常用在图片编辑中
Image (pixelMapObject)
1.3Resource格式:
加载本地图片,推荐使用
Image($r('app.media.mate60'))
Image($rawfile('mate6o.png'))
2.添加图片属性:
Image(sr('app.media.icon'))
.width(100) // 宽度
.height(120) // 高度
. borderRadius(10) // 边框圆角
.interpolation(ImageInterpolation.High) // 图片插值
二、Text:文本显示组件
1.声明Text组件并设置文本内容:
Text(content?: stringlResource)
1.1string格式:
直接填写文本内容
Text('图片宽度')
1.2Resource格式:
读取本地资源文件
Text(sr('app.string.width_label'))
2.添加文本属性:
Text('注册账号')
. lineHeight(32) // 行高
.fontSize(20)// 字体大小
.fontColor('#ff1876f8') // 字体颜色
. fontWeight(FontWeight.Medium) // 字体粗细
三、TextInput:文本输入框
1.声明TextInput组件
TextInput({placeholder?: ResourceStr, text?: ResourceStr})
1.1placeHoder:输入框无输入时的提示文本
TextInput({placeholder:'请输入账号或手机号'})
1.2text:输入框当前的文本内容
TextInput({text:'itcast'})
2.添加属性和事件
TextInput({text:'当前输入文本'})
.width(150)// 宽
.height(30) // 高
.backgroundColor('#FFF')// 背景色
.type(InputType.Password) // 输入框类型
四、Button:按钮组件
1.声明Button组件,label是按钮文字:
Button(label?: ResourceStr)
1.1文字型按钮
Button('点我')
1.2自定义按钮,在Button内嵌套其它组件
Button(){
Image(sr(' app.media.search'))
.width(20)
.margin(10)
}
2.添加属性和事件
Button('点我)
.width(100)
.height(30)
. type(ButtonType.Normal) // 按钮类型
.onclick(() => {
// 处理点击事件
})
按钮类型:
Capsule胶囊型按钮(圆角默认为高度的一半)。
Circle圆形按钮。
Normal普通按钮(默认不带圆角)
五、Slider:滑动条组件
1.声明Slider组件
Silder (options?: SliderOptions)
2.添加属性和事件
Slider({
min:0,// 最小值
max: 100,// 最大值
value:30,// 当前值
step: 10, // 滑动步长
style: SliderStyle.outSet, // InSet
direction: Axis.Horizontal, // Vertical
reverse: false // 是否反向滑动
})