图片组件 - Image(src: string | PixelMap | Resource)
- string格式:加载远程地址图片(需要配置ohos.permission.INTERNET)
- PixelMap格式:加载像素图
- Resource格式:加载本地图片(Image($r('app.media.icon')))
Image($r('app.media.icon'))
.width('90%')
.borderRadius(20)
文本组件 - Text(content: string | Resource)
- string格式:直接填写文本内容
- Resource:读取本地资源文件
Text('文本展示内容')
Text($r('app.string.module_desc'))
文本输入框 - TextInput({ placeholder?: string, text?: string })
- placeholder:(非必填)输入框无值时候的提示文本内容
- text:(非必填)输入框默认值
TextInput({
placeholder: '请输入账号',
text: 'admin'
})
.type('输入框类型枚举值')
.onChange(value => {
})
type枚举说明:
- Normal:(默认值)基本输入模式;支持输入数字、字母、下划线、空格、特殊字符。
- Password:密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。
- Email:邮箱地址输入模式。支持数字,字母,下划线,以及@字符。
- Number:纯数字输入模式。
- PhoneNumber:电话号码输入模式。支持输入数字、+ 、-、*、#,长度不限。
- label:(非必填)按钮展示文本
Button('提交')
.type('按钮类型枚举值')
.onClick(() => {
})
Button(){
Image($r('app.media.icon'))
.width(10)
.height(10)
}
type枚举说明:
- Normal:(默认值)普通按钮
- Capsule:胶囊形按钮
- Circle:圆形按钮
空白 - Blank()
进度条 - Progress({value: number, total?: number, type?: ProgressType})
- value:当前进度值,最小值为0,最大值为total值。
- total:进度总长,默认值100。
- type:进度条类型,默认线性进度条。
@Entry
@Component
struct Index {
build() {
Column() {
Progress({
value: 0,
total: 1,
type: 'ProgressType枚举值'
})
}
}
}
ProgressType枚举说明:
- Linear:线性样式。从API version9开始,高度大于宽度的时候自适应垂直显示。
- Ring:环形无刻度样式,环形圆环逐渐显示至完全填充效果。
- Eclipse:圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。
- ScaleRing:环形有刻度样式,显示类似时钟刻度形式的进度展示效果。从API version9开始,刻度外圈出现重叠的时候自动转换为环形无刻度进度条。
- Capsule:胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。