OpenHarmony v4.0 Release - UI开发（ArkTS声明式开发）- 常用组件
鸿蒙，Harmonyos,OpenHarmony,Button,radio,toggle,progress,text,textinput,textArea,Video
·
文本（Text)
- 声明Text组件并设置文本内容
Text(content?:string|Resource)
string格式，直接填写文本内容
Text('文本内容')
Resource格式，读取本地资源文件
Text($r('app.string.width_label'))
- 添加文本属性
Text('文本内容')
.lineHeight(32) //行高
.fontSize(20) //字体大小
.fontColor('#ff1876f8') //字体颜色
.fontWeight(fontWeight.Medium) //字体粗细
.textOverflow({ overflow: TextOverflow.Ellipsis }) //文本超出隐藏省略号
.maxLines(1)
.textAlign(TextAlign.Center) //文本对齐方式
.decoration({
type: TextDecorationType.Overline, //中划线
color: Color.Red //线的颜色
})
textOverflow需配合maxLines一起使用（默认情况下文本自动折行）
输入框（TextInput/TextArea）
TextInput() (单行输入框)
TextInput({placeholder?: ResourceStr,text?: ResourceStr})
TextArea () (多行输入框)
TextArea({placeholder?: ResourceStr,text?: ResourceStr})
placeHoder:输入框无输入时的提示文本，text:输入框当前文本内容(默认值)
添加属性和事件
TextInput({text:'当前输入文本'})
.width(150) //宽
.height(30) //高
.backgroundColor('#FFF') //背景色
.type(InputType.Password) //输入框类型
.onChange(value =>{
//value是用户输入的文本内容
})
.placeholderColor(Color.red) //提示文本颜色
.placeholderFont({
size:20,
}) //提示文本属性
onChange事件可以获取输入框内改变的内容
输入框类型
| 名称 | 描述 |
|---|---|
| Normal | 基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。 |
| Password | 密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。 |
| 邮箱地址输入模式。支持数字，字母，下划线，以及@字符。 | |
| Number | 纯数字输入模式。 |
| PhoneNumber | 电话号码输入模式。支持输入数字、+、-、*、#、长度不限。 |
按钮（Button）
声明Button组件，label是按钮组件：
Button(label?:ResourceStr)
文字型按钮
Button('点我')
自定义按钮，在Button内嵌套其它组件
Button(){
Image($r('app.media.search')).width(20).margin(10)
}
添加属性和事件
Button('点我')
.width(100)
.height(30)
.type(ButtonType.Normal) //按钮类型
.onClick(() => {
//处理点击事件
})
按钮类型
| 名称 | 描述 |
|---|---|
| Capsule | 胶囊型按钮（圆角默认为高度的一半） |
| Circle | 圆形按钮 |
| Normal | 普通按钮（默认不带圆角） |
加载进展（LoadingProgress）
LoadingProgress()
.color(Color.Blue)
.width(50)
.height(50)
控制加载进度的显示和隐藏
if(false/true){ //true时显示，false隐藏
LoadingProgress()
.color(Color.Blue)
.width(50)
.height(50)
}
单选框（Radio）
Radio({value:'Radio1',group:'radioGroup'})
.checked(false) //单选框的状态
.onChange((ifChecked:boolean)) => {
if(ifChecked){
//需要执行的操作
}
}
value是单选框的名称，group是单选框的所属群组名称，onChange事件来响应选中操作后的自定义行为
切换按钮(Toggle)
Toggle({
type:ToggleType.Checkbox, //按钮的样式
isOn:false //按钮的状态
})
.selectedColor(Color.Pink) //选中后的背景颜色
.switchPointColor(Color.Pink) //Switch类型的圆形滑块颜色
| 名称 | 描述 | |
|---|---|---|
| Checkbox | 圆形勾选框 | 不包含子组件 |
| Switch | 左右滑动框 | 不包含子组件 |
| Button | 自定义 | 可添加子组件 |
滑动条（Slider）
Slider(options?:SliderOptions)
Slider({
min:0, //最小值
max:100, //最大值
value:30, //当前值
step:10, //滑动步长
style: SliderStyle.OutSet, //InSet
direction: Axis.Horizontal, //Vertical
reverse: false //是否反向滑动
})
.width('90%')
.showTips(true) //是否展示Value百分比提示
.bloc
进度条（Progress）
Progress({
value:24, //初始进度
total:100, //进度总长度
type:ProgressType.Linear //样式
})
| 名称 | 说明 |
|---|---|
| ProgressType.Linear | 线性样式(默认） |
| ProgressType.Ring | 环形无刻度样式 |
| ProgressType.ScaleRing | 环形有刻度样式 |
| ProgressType.Eclipse | 圆形样式 |
| ProgressType.Capsule | 胶囊样式 |
视频播放（Video）
加载本地视频
-
普通本地视频
加载本地视频时，首先在本地src → main → resources → rawfile目录指定对应的文件
再使用资源访问符$rawfile()引用视频资源
@Component export struct VideoPlayer{ private controller:VideoController | undefined; private previewUris: Resource = $r ('app.media.preview'); private innerResource: Resource = $rawfile('videoTest.mp4'); private curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X build(){ Column() { Video({ src: this.innerResource, //视频播放源路径 previewUri: this.previewUris, //未播放时预览图片路径 controller: this.controller, //设置视频控制器 currentProgressRate: this.curRate， //视频播放倍速 }) } } }名称 描述 PlaybackSpeed.Speed_Forward_0_75_X 0.75倍速播放。 PlaybackSpeed.Speed_Forward_1_00_X 1倍速播放。 PlaybackSpeed.Speed_Forward_1_25_X 1.25倍速播放。 PlaybackSpeed.Speed_Forward_1_75_X 1.75倍速播放。 PlaybackSpeed.Speed_Forward_2_00_X 2倍速播放。 -
Data Ability提供的视频路径带有dataability://前缀，使用时确保对应视频资源存在即可。
@Component export struct VideoPlayer{ private controller:VideoController | undefined; private previewUris: Resource = $r ('app.media.preview'); private videoSrc: string = 'dataability://device_id/com.domainname.dataability.videodata/video/10' build(){ Column() { Video({ src: this.videoSrc, previewUri: this.previewUris, controller: this.controller }) } } }
加载沙箱路径视频
支持file:///data/storage路径前缀的字符串，用于读取应用沙箱路径内的资源，需要保证应用沙箱目录路径下的文件存在并且有可读权限。
@Component
export struct VideoPlayer {
private controller: VideoController | undefined;
private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4'
build() {
Column() {
Video({
src: this.videoSrc,
controller: this.controller
})
}
}
}
加载网络视频
加载网络视频时，需要申请权限ohos.permission.INTERNET
@Component
export struct VideoPlayer{
private controller:VideoController | undefined;
private previewUris: Resource = $r ('app.media.preview');
private videoSrc: string= 'https://www.example.com/example.mp4' // 使用时请替换为实际视频加载网址
build(){
Column() {
Video({
src: this.videoSrc,
previewUri: this.previewUris,
controller: this.controller
})
}
}
}
添加属性和事件
Video({
controller: this.controller
})
.muted(false) //设置是否静音
.controls(false) //设置是否显示默认控制条
.autoPlay(false) //设置是否自动播放
.loop(false) //设置是否循环播放
.objectFit(ImageFit.Contain) //设置视频适配模式
.onUpdate((event) => { //更新事件回调
console.info("Video update.");
})
| 名称 | 功能描述 |
|---|---|
| onStart(event:() => void) | 播放时触发该事件。 |
| onPause(event:() => void) | 暂停时触发该事件。 |
| onFinish(event:() => void) | 播放结束时触发该事件。 |
| onError(event:() => void) | 播放失败时触发该事件。 |
| onPrepared(callback:(event: { duration: number }) => void) | 视频准备完成时触发该事件。 duration：当前视频的时长，单位为秒(s)。 |
| onSeeking(callback:(event: { time: number }) => void) | 操作进度条过程时上报时间信息。 time：当前视频播放的进度，单位为s。 |
| onSeeked(callback:(event: { time: number }) => void) | 操作进度条完成后，上报播放时间信息。 time：当前视频播放的进度，单位为s。 |
| onUpdate(callback:(event: { time: number }) => void) | 播放进度变化时触发该事件。 time：当前视频播放的进度，单位为s。 |
| onFullscreenChange(callback:(event: { fullscreen: boolean }) => void) | 在全屏播放与非全屏播放状态之间切换时触发该事件。 fullscreen：返回值为true表示进入全屏播放状态，为false则表示非全屏播放。 |
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
50
0- 0
已为社区贡献1条内容
所有评论(0)