一起学习HarmonyOS应用开发——基础篇（5）

前言，上一篇说了几个容器组件的使用方式，今天说一下基础组件，比如Text、Button、Image、TextInput等等。

1、Text组件：主要用来显示一段文本的组件：

注意的是：$前面的符号是英文点（位于键盘左上角，Esc下面）（这样才能引用成功显示）

设置字体颜色的三种方式：

第一种：Text('测试4').fontColor(0x00FF00)

第二种：Text('测试5').fontColor($r('app.color.font_color_blue'))

第三种：Text('测试6').fontColor(Color.Black)

设置字体样式：

Text('测试7').fontWeight(FontWeight.Bold) //字体加粗、加重

 //字体加粗（取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。）

 Text('测试8').fontWeight(900|FontWeight.Bold)

设置组件的背景颜色：

Text('测试9').backgroundColor('0x00FF00')

设置组件的高度和宽度：

 Text('测试10') .width(100).height(30)

Text('测试10').textAlign(TextAlign.End)//文字靠右

设置组件的间隔：

Text('测试11').margin({top:10})//距离顶部距离为10

设置组件的内边距：

Text('内边距').padding({ top: 5, left: 10, bottom: 15, right: 20 })

设置组件的权重：

Row(){
  //组件所占的权重
  Text('红的权重').backgroundColor($r('app.color.background_color_red'))
    .layoutWeight(1)
  Text('绿的权重').backgroundColor($r('app.color.background_color_green'))
    .layoutWeight(2)
  Text('蓝的权重').backgroundColor($r('app.color.background_color_blue'))
    .layoutWeight(2)
}.width('100%')

2、Button组件：按钮组件

3、Image组件：图片组件，常用于在应用中显示图片。

第一种就是将图片资源放到本地文件夹，然后引用。也可以附加文字、设置文字的位置。

第二种就是使用网络图片，使用前记得申请网络权限（在module.json5文件中添加权限）。其中alt()属性是可以让网络图片没有加载出来前显示本地图片当作占位图。

4、TextInput组件：文本输入框组件。可以用maxlength属性设置最大输入字符数、用placeholder属性设置提示语等等。

也可以在输入框里面用inputFilter属性设置过滤条件（比如只允许输入数字），还可以用type属性设置成密码输入模式。（如果需要眼睛图标就加一个showPasswordIcon属性并且值为true）

未完待续！！！