一.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:电话号码输入模式。支持输入数字,以及+、-。