TextInput: 文本输入框
1、声明TextInput组件
TextInput({placeholder?: ResourceStr, text2: ResourceStr})
① placeHoder: 输入框输入时的提示文本
TextInput({placeholder: '请输入账号或手机号'})
②text: 输入框当前的文本内容
TextInput({text: 'itcast'})
2、添加属性和事件
@Entry
@Component
struct ScrollExample {
build() {
Column(){
TextInput({placeholder:"请输入账号或手机号"})
.width(150) // 宽
.height(20) // 高
.backgroundColor("36C") // 输入框背景色
.type(InputType.Password) // 输入框类型
.onChange((value:string) => {
// value是输入用户的文本内容
})
}
}
}
名称 | 描述 |
---|---|
Normal | 基本输入模式:支持输入数字、字母、下划线、空格、特殊字符 |
Password | 密码输入模式: 支持输入数字、字母、下划线、空格、特殊字符 |
邮箱地址输入模式:支持数字、字母、下划线以及@符号 | |
Number | 纯数字输入模式 |
PhoneNumber | 电话号码输入模式:支持输入数字、+、-、*、#,长度不限 |
Image:图片显示组件
1、声明Image组件并设置图片源
Image(src: string | PixelMap | Resource)
① string格式: 通常用来价值网络图片,需要申请网络访问权限:ohos.permission.INTERNET
Image(“http://www.baidu.com/xxxx.png”)
权限在module.json5配置文件中声明
{
"module" : {
// ...
"requestPermissions":[
{
"name" : "ohos.permission.INTERNET",
}
}
]
}
}
②PixelMap格式:可以用来加载像素图,图片编辑使用居多
Image(pixelMapObject)
③Resource格式: 加载本地图片(推荐使用)
Image($r(“app.media.app_icon”)) # 不需要带后缀,路径为entry/src/main/resources/base/media/
Image($rawfile(“app_icon.png”)) # 需要加后缀,路径为entry/src/main/resources/rawfile/
2、添加图片属性
Image($rawfile("app_icon.png"))
// 前三条为组件通用属性,即,image组件有这个属性,其他组件,比如Text也有这个属性
.width('100%') # 设置宽度,用百分比需要用字符串格式,也可以使用.width(240)
.height(120)
.borderRadius(5) # 给图片设置圆角
// 该属性为image特有属性
.interpolation(ImageInterpolation.High) # 给图片设置差值,图片特有,消除低像素图片的锯齿