前言,上一篇说了几个容器组件的使用方式,今天说一下基础组件,比如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)
未完待续!!!