ArkUI的几种组件

一、Image:图片显示组件

1.声明Image组件并设置图片源

Image(src: string|PixelMap|Resource)

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

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

• PixelMap格式，可以加载像素图，常用在图片编辑中

Image(pixelMapObject)

• Resource格式，加载本地图片，推荐使用

Image($r('app.media.mate60'))
Image($rawfile('mate60.png'))

2.添加图片属性

Image($r('app.media.icon'))
  .width(100)//宽度
  .height(120)//高度
  .borderRadius(10)//边框圆角
  .interpolation(ImageInterpolation.High)//图片插值  作用：自动调整动态清晰度

3.应用案例

二、Text:文本显示组件

1.声明Text组件并设置文本内容

Text(content?: string|Resource)

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

Text('图片宽度')

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

Text($r('app.string.width_label'))//此地址仅供参考，具体地址自行分析

2.添加文本属性

Text('注册账号')
  .lineHeight(32)//行高
  .fontSize(20)//字体大小
  .fontColor('#36D')//字体颜色
  .fontWeight(FontWeight.Medium)//字体粗细



//限定词目录（国家、语言、设备等）---使代码国际化
{
“string”:[
  {
   "name":"width_label",
   "value":"Image Width"
  }
 ]
}


{
“string”:[
  {
   "name":"width_label",
   "value":"图片宽度"
  }
 ]
}

3.应用案例

特别注意：在base>element>string.json文件中也必须添加以上任意一端代码

三、TextInput:文本输入框

1.声明TextInput组件

TextInput({placeholder?: ResourceStr, text?:ResourceStr})

• placeholder:输入框输入时的提示文本

TextInput({placeholder:'请输入账号或手机号'})

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

TextInput({text:'itcast'})

2.添加属性和事件

TextInput({text:'当前输入文本'})
  .width(150) //宽
  .height(30) //高
  .backgroundColor('#FFF') //背景色
  .type(InputType.Password) //输入框类型
  .onChange((value)=>{
   // value是用户输入的文本内容
})

/**详解
Normal  基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Password  密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Email  邮箱地址输入模式。支持数字、字母、下划线、以及@字符。
Number  纯数字输入模式。
PhoneNumber9+  电话号码输入模式。支持输入数字，+，-，*，/,等基本操作
*/
//9+为右上角角标

3.应用案例

四、Button：按钮组件

1.声明Button组件，label是按钮文字

Button(label?: ResourceStr)

• 文字型按钮

Button('点击')

• 自定义按钮，在Button内嵌套其他组件

Button(){
Image($r('app.media.search'))
  .width(20)
  .margin(10)
}

2.添加属性和事件

Button('点击')
   .width(100)
   .height(30)
   .type(ButtonType.Normal)  //按钮类型
   .onClick(()=>{
    //处理点击事件
})

/**
Capsule  胶囊型按钮（圆角默认为高度的一半）
Circle  圆形按钮
Normal  普通按钮（默认不带圆角）
*/

3.应用案例

五、Slider:滑动条组件

1.声明Slider滑动条组件

Slider(options?: SliderOptions)

2.滑动条配置和属性

Slider({
  min: 0,  //最大值
  max: 100, 
  value: 40,
  step: 10,
  style:SliderStyle.OutStyle, //InSet
  direction:Axis.Horizontal,  //Vertical
  reverse: false  //是否反向滑动
})
  .width('90%')
  .showTips(true)  //是否展示value百分比提示
  .blockColor('#36D')
  .onChange((value)=>{
   //value就是滑块值
})

3.应用案例

六、总结

      通过对ArkUI组件的基本认识，我们能够更加清晰的认识到ArkTS与过去前端的区别，可以说ArkTS将前端带到了一个前所未有的新高度。也大大增加了人机交互性并且实现动态实时更新的可视化界面。真正实现了可视一体化编程！！！

      本文章仅仅是本人学习心得与巩固，不喜勿喷