一起学习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)

未完待续!!!

  • 15
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值