HarmonyOS ArkUI基础组件

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 // 是否反向滑动
}）