一.ArkUI组件-Text
1.Text:文本显示组件
语法:Text(content?:string|Resource)
- string格式,直接填写文本内容
Text('我是bug天选之子')
- Resource格式,读取本地资源文件
Text($r('app.string.width_label')) "app.string.width_label":读取的是resources文件夹下的: 1.zh_CN下面的element下面的string.json文件(中文环境时读取) 2.en_US下面的element下面的string.json文件(英文环境时读取) 3.上面两种文件都没找到就读取base下面的element下面的string.json文件(默认)
2.添加文本属性
Text('我是bug天选之子') .lineHeight(32) // 行高 .fontsize(20) // 字体大小 .fontColor('red') // 字体颜色 .fontWeight(FontWeight.Medium) // 字体粗细
二.ArkUI组件-TextInput:文本输入框
1.声明TextInput组件:
语法:TextTnput({placeholder?:ResourceStr,text?:ResourceStr})
- placeHolder:占位符,输入框未输入时的提示文本
textInput({placeholder:'请输入账号或者手机号'})
- text:输入框当前的文本内容
textInput({text:'bug天选之子'})
2.添加属性和事件
TextInput({text:'我是bug天选之子'}) .width(150) // 宽 .height(30) // 高 .backgroundColor("#fff") // 输入框背景颜色 .type(InputType.Password) // 输入框类型(密码) .onChange(value => { // value是用户输入的文本内容 })
type属性:
Normal:基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Password:密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Email:邮箱地址输入模式。支持输入数字、字母、下划线,以及@字符。
Number:纯数字输入模式。
PhoneNumber:电话号码输入模式。支持输入数字,以及+、-。