HarmonyOS ArkTS 基础组件

目录

一、常用组件

二、文本显示（Text/Span)

2.1 创建文本

2.2 属性

2.3 添加子组件(Span)

2.4 添加事件

三、按钮（Button）

3.1 创建按钮

3.2 设置按钮类型

3.3 悬浮按钮

四、文本输入（TextInput/TextArea）

4.1 InputType输入框类型

4.2 键盘回车键类型

五、单选框（Radio）

5.1 添加事件

5.2 添加文字

六、切换按钮（Toggle）

七、进度条（Progress）

八、弹窗/自定义弹窗（AlertDialog/CustomDialog）

8.1 弹窗

8.1.1 警告弹窗(AlertDialog)

AlertDialogParamWithConfirm

AlertDialogParamWithButtons

8.1.2 列表选择弹窗(ActionSheet)

8.2自定义弹窗（CustomDialog）

8.2.1 简单实用

        使用@CustomDialog装饰器装饰自定义弹窗。

        创建构造器

        添加时间，弹窗弹出

8.2.2 弹窗添加交互

        在@CustomDialog装饰器内添加按钮操作，创建函数。

        页面内需要在构造器内进行接收，同时创建相应的函数操作。

8.3 日期滑动选择器弹窗

8.4 时间滑动选择器弹窗

8.5 文本滑动选择器弹窗

九、图片

9.1 本地资源

9.2 网络资源

9.3 Resource资源

9.4 base64

十、视频播放（Video）

10.1 普通本地视频。

10.2 加载网络视频

10.3 Video控制器使用(VideoController)

10.4 事件回调

相关推荐 

一、常用组件

  • 文本显示（Text/Span）

  • 按钮（Button）

  • 文本输入（TextInput/TextArea）

  • 单选框（Radio）

  • 切换按钮（Toggle）

  • 进度条（Progress）

  • 弹窗/自定义弹窗（AlertDialog/CustomDialog）

  • 视频播放（Video）

二、文本显示（Text/Span)

2.1 创建文本

Text可通过以下两种方式来创建：

  • string字符串

  • 引用Resource资源

    • 资源引用类型可以通过$r创建Resource类型对象，文件位置为/resources/base/element/string.json。

interface TextInterface {(content?: string | Resource): TextAttribute;
}

添加 string 资源

      Text('直接传入文本').fontSize(24).margin(10)Text($r('app.string.basic_text_create')).fontSize(24).margin(10)

2.2 属性

名称参数类型描述
fontColorResourceColor设置文本颜色
fontSizeLength|Resource设置文本尺寸
fontStyleFontStyle设置文本的字体样式
fontWeightnumber|FontWeight|string设置文本的字体粗细
fontFamilystring|Resource设置文本的字体列表
textAlignTextAlign设置文本在水平方向的对齐方式
textOverflow{overflow: TextOverflow}设置文本超长时的显示方式(需配合maxLines一起使用)
maxLinesnumber设置文本的最大行数
decoration{type: TextDecorationType;color?: ResourceColor;}设置文本装饰线样式及其颜色
textCaseTextCase设置文本大小写
lineHeightstring|number|Resource设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp
letterSpacingnumber|string设置文本字符间距
copyOptionCopyOptions组件支持设置文本是否可复制粘贴（默认值：CopyOptions.None）。设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice，长按文本，会弹出文本选择菜单，可选中文本并进行复制、全选操作。

      Text('左对齐').width(300).fontColor(Color.Red).fontStyle(FontStyle.Italic)//斜体.fontWeight(FontWeight.Bold)//粗体.textAlign(TextAlign.Start).border({ width: 1 }).padding(10).margin(10)Text('中间对齐').width(300).fontWeight(FontWeight.Medium).fontColor('#00ff00').textAlign(TextAlign.Center).border({ width: 1 }).padding(10).margin(10)Text('右对齐').width(300).fontColor(0x0000ff).textAlign(TextAlign.End).border({ width: 1 }).padding(10).margin(10)Text('超长文本无省略号全大写：Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.').width(300).margin(10).maxLines(2).textCase(TextCase.UpperCase).decoration({type: TextDecorationType.LineThrough,color: Color.Red})Text('超长文本加省略号全小写：Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.').width(300).maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis }).textCase(TextCase.LowerCase)

2.3 添加子组件(Span)

        Span组件需要写到Text组件内(支持多个)，单独写Span组件不会显示信息，Text与Span同时配置文本内容时，Span内容覆盖Text内容。

      Text('设不设都一样，反正也不显示') {Span('我是Span1，设置了字符间距').letterSpacing(10).fontSize(16).fontColor(Color.Orange).decoration({ type: TextDecorationType.LineThrough, color: Color.Red })Span('我是Span2').fontColor(Color.Blue).fontSize(16).fontStyle(FontStyle.Italic).decoration({ type: TextDecorationType.Underline, color: Color.Black })Span('，我是Span3').fontSize(16).fontColor(Color.Pink).decoration({ type: TextDecorationType.Overline, color: Color.Green })}.borderWidth(1).padding(10)

2.4 添加事件

        Text组件可以添加通用事件，如onClick、onTouch等事件。

        由于Span组件无尺寸信息，事件仅支持onClick事件。

      Text('设不设都一样，反正也不显示') {Span('我是Span1，设置了字符间距').letterSpacing(10).fontSize(16).fontColor(Color.Orange).decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).onClick(()=>{console.info('我是Span1，设置了字符间距被点击了')})......}.onClick(()=>{console.info('我是Text，被点击了')}).borderWidth(1).padding(10)

三、按钮（Button）

        Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。

3.1 创建按钮

  • 创建不包含子组件的按钮。

  • 创建包含子组件的按钮。

    • 具有标签参数的Button组件不能有任何子级。

      Button('直接传入文本').fontSize(24).margin(10)Button($r('app.string.basic_btn_create')).fontSize(24).margin(10)Button() {Row() {Image($r('app.media.app_icon')).width(40).height(40).margin(5)Text('loading').fontSize(20).fontColor(Color.White).margin(10)}.alignItems(VerticalAlign.Center)}.fontSize(24).margin(10)

3.2 设置按钮类型

        Button有三种可选类型，通过type进行设置。

  • Capsul（默认类型）：胶囊类型，圆角默认为高度的一半，不支持通过borderRadius属性重新设置圆角。

  • Circle（圆形按钮）：按钮为圆形，不支持通过borderRadius属性重新设置圆角。

  • Normal（普通按钮：默认不带圆角）：按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

      Button('胶囊型，圆角属性无效',{ type: ButtonType.Capsule, stateEffect: false }).borderRadius(10)//无效.fontSize(20).margin(12)Button('圆形按钮',{ type: ButtonType.Circle, stateEffect: false }).borderRadius(10)//无效.fontSize(18).width(110).height(110)Button('普通按钮',{ type: ButtonType.Normal, stateEffect: false }).fontSize(18).margin(10)Button('普通按钮，圆角 10',{ type: ButtonType.Normal, stateEffect: false }).borderRadius(10)//有效.fontSize(18).margin(10)

3.3 悬浮按钮

        在可以滑动的界面，滑动时按钮始终保持悬浮状态。

      Button('+',{ type: ButtonType.Circle, stateEffect: false }).borderRadius(10)//无效.fontSize(50).width(80).height(80).position({x: '60%', y: '20%'})//悬浮位置.shadow({radius: 10})//添加阴影效果

四、文本输入（TextInput/TextArea）

        TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，例如登录注册页面、聊天框的输入等。

  • TextInput为单行输入框。

  • TextArea为多行输入框。

      TextInput().width('90%').margin(10)TextArea().width('90%').margin(10)

4.1 InputType输入框类型

  • Normal(默认)：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。

  • Password：密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。

  • Email：邮箱地址输入模式。支持数字，字母，下划线，以及@字符（只能存在一个@字符）。

  • Number：纯数字输入模式。

  • PhoneNumber：电话号码输入模式。支持输入数字、+ 、-、*、#，长度不限。

      TextInput({placeholder:"请输入手机号"}).width('90%').margin(10).type(InputType.PhoneNumber).placeholderColor(Color.Green)//修改提示语颜色.backgroundColor(Color.Pink)TextInput({placeholder:"请输入密码"}).width('90%').margin(10).type(InputType.Password).backgroundColor(Color.Pink)

4.2 键盘回车键类型

如上图，第一行已完成，下面还有输入框，需要将完成样式改为下一个样式。

  • Go：显示为开始样式。

  • Search：显示为搜索样式。

  • Send：显示为发送样式。

  • Next：显示为下一个样式。

  • **Done(默认)**：显示为换行(多行)样式/完成(单行)样式。

      TextInput({placeholder:"请输入手机号"}).width('90%').margin(10).type(InputType.PhoneNumber).placeholderColor(Color.Green)//修改提示语颜色.backgroundColor(Color.Pink).enterKeyType(EnterKeyType.Next).onSubmit((EnterKeyType)=>{console.info(EnterKeyType+'输入法回车键的类型值')})TextInput({placeholder:"请输入密码"}).width('90%').margin(10).type(InputType.Password).backgroundColor(Color.Pink).enterKeyType(EnterKeyType.Send)

一个简单的登录页就有了。

五、单选框（Radio）

        Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。

Radio(options: {value: string, group: string})

  • value：当前单选框的值。

  • group：当前单选框的所属群组名称，相同group的Radio只能有一个被选中。

        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(false)//是否选中.width(50)Radio({ value: 'Radio2', group: 'radioGroup' }).checked(true)//是否选中.width(50)

5.1 添加事件

        除支持通用事件外，Radio通常用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为。

        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(false)//是否选中.width(50).onChange((isChecked: boolean) => {if(isChecked) {//需要执行的操作}})Radio({ value: 'Radio2', group: 'radioGroup' }).checked(true)//是否选中.width(50).onChange((isChecked: boolean) => {if(isChecked) {//需要执行的操作}})

5.2 添加文字

        没有可以设置文字的地方只能自己做文字排版了。

      Row(){Radio({ value: 'Radio1', group: 'radioGroup' }).checked(false)//是否选中.width(50).onChange((isChecked: boolean) => {if(isChecked) {//需要执行的操作}})Text('男').fontSize(30)Radio({ value: 'Radio2', group: 'radioGroup' }).checked(true)//是否选中.width(50).onChange((isChecked: boolean) => {if(isChecked) {//需要执行的操作}})Text('女').fontSize(30)}.margin(20)

六、切换按钮（Toggle）

        Toggle组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换。

Toggle(options: { type: ToggleType, isOn?: boolean })
  • type：开关的样式。

    • Checkbox：勾选框样式。

    • Switch：开关样式。

    • Button：按钮样式，可包含组件。只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。

  • isOn：开关是否打开，true：打开，false：关闭。默认值：false

      Row() {Toggle({ type: ToggleType.Checkbox, isOn: false }).width(40)Toggle({ type: ToggleType.Checkbox, isOn: true }).width(40)}.margin(20)Row() {Toggle({ type: ToggleType.Switch, isOn: false }).width(60)Toggle({ type: ToggleType.Switch, isOn: true }).width(60)}.margin(20)Row() {Toggle({ type: ToggleType.Button, isOn: false }).width(100)Toggle({ type: ToggleType.Button, isOn: true }).width(100)}.margin(20)//包含组件Row() {Toggle({ type: ToggleType.Button, isOn: false }) {Text("你好")}.width(100)Toggle({ type: ToggleType.Button, isOn: true }){Text("Harmony")}.width(100)}.margin(20)

自定义样式/添加事件

  • selectedColor：设置Toggle打开选中后的背景颜色。

  • switchPointColor：设置Switch类型的圆形滑块颜色，仅对type为ToggleType.Switch生效。

  • onChange：开关状态切换时触发该事件。

七、进度条（Progress）

进度条组件，用于显示内容加载或操作处理等进度。

  • value：用于设置初始进度值。

  • total：用于设置进度总长度。

  • type：决定Progress样式。

    • ProgressType.Linear（线性样式）:从API version9开始，组件高度大于宽度的时候自适应垂直显示，相等时仍然保持水平显示。

    • ProgressType.Ring（环形无刻度样式）

    • ProgressType.ScaleRing（环形有刻度样式）:需要设置环形有刻度进度条的样式。

      • strokeWidth: 设置进度条宽度（不支持百分比设置）。

      • scaleCount: 设置环形进度条总刻度数。

      • scaleWidth: 设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。

    • ProgressType.Eclipse（圆形样式）

    • ProgressType.Capsule（胶囊样式）

Progress(options: {value: number, total?: number, type?: ProgressType})


      //默认线性样式ProgressType.LinearProgress({value: 75}).width('90%').height(20).margin(20)//从API version9开始，组件高度大于宽度的时候自适应垂直显示，相等时仍然保持水平显示。Progress({ value: 75}).width(30).height(80)//ProgressType.RingProgress({value: 75,type: ProgressType.Ring}).width('90%').height(50).margin(20)//ProgressType.ScaleRingProgress({value: 75,type: ProgressType.ScaleRing}).width('90%').height(100).margin(20)// 设置环形有刻度进度条总刻度数为20，刻度宽度为5vp.style({ scaleCount: 40, scaleWidth: 15, strokeWidth: 10 })//ProgressType.EclipseProgress({value: 75,type: ProgressType.Eclipse}).width('90%').height(50).margin(20)//ProgressType.CapsuleProgress({value: 75,type: ProgressType.Capsule}).width('90%').height(50).margin(20)

自定义样式

  • color：设置进度条前景色。默认值：'#ff007dff'

  • backgroundColor：设置进度条底色。默认值：'#19182431'

      //ProgressType.ScaleRingProgress({value: 75,type: ProgressType.ScaleRing}).width('90%').height(100).margin(20).value(this.progressValue)// 设置环形有刻度进度条总刻度数为40，刻度宽度为15,条刻度粗细10.style({ scaleCount: 40, scaleWidth: 15, strokeWidth: 10 }).color(Color.Red).backgroundColor(Color.Orange)//ProgressType.EclipseProgress({value: 75,type: ProgressType.Eclipse}).width('90%').height(50).margin(20).value(this.progressValue).color(Color.Red).backgroundColor(Color.Orange)//ProgressType.CapsuleProgress({value: 75,type: ProgressType.Capsule}).width('90%').height(50).margin(20).color(Color.Red).backgroundColor(Color.Orange).value(this.progressValue)Button("当前进度：" + this.progressValue + "，进度条+5").onClick(() => {this.progressValue += 5if (this.progressValue > 100) {this.progressValue = 0}})

八、弹窗/自定义弹窗（AlertDialog/CustomDialog）

  • 警告弹窗

  • 列表选择弹窗

  • 自定义弹窗

  • 日期滑动选择器弹窗

  • 时间滑动选择器弹窗

  • 文本滑动选择器弹窗

8.1 弹窗

8.1.1 警告弹窗(AlertDialog)

        显示警告弹窗组件，可设置文本内容与响应回调。

  • AlertDialogParamWithConfirm

  • AlertDialogParamWithButtons

      Button('警告弹窗-1个按钮').onClick(() => {//AlertDialogParamWithConfirmAlertDialog.show({title: '警告标题!!!',message: '内容特别的劲爆，嘿嘿嘿',autoCancel: true,//点击遮障层时，是否关闭弹窗alignment: DialogAlignment.Center,gridCount: 3,confirm: {value: '我知道了',action: () => {promptAction.showToast({message:'羡慕你被点了一下'})}},cancel: () => {promptAction.showToast({message:'你取消了'})}})}).backgroundColor(Color.Pink)Button('警告弹窗-2个按钮').onClick(() => {AlertDialog.show({title: '警告标题!!!',message: '内容特别的劲爆，嘿嘿嘿',autoCancel: true,//点击其他区域是否自动关闭alignment: DialogAlignment.Center,gridCount: 4,primaryButton: {value: '取消',action: () => {promptAction.showToast({message:'讨厌，你咋取消了'})}},secondaryButton: {value: '我知道了',action: () => {promptAction.showToast({message:'羡慕你被点了一下'})}},cancel: () => {promptAction.showToast({message:'你取消了'})}})}).backgroundColor(Color.Pink).margin({top:20})
AlertDialogParamWithConfirm

  • title：弹窗标题。

  • message：弹窗内容。

  • autoCancel：点击遮障层时，是否关闭弹窗。默认值：true

  • confirm：确认按钮的文本内容、文本色、按钮背景色和点击回调。

    • value: ResourceStr

    • fontColor?: ResourceColor

    • backgroundColor?: ResourceColor

    • action: () => void

  • cancel：点击遮障层关闭dialog时的回调。

  • alignment ：弹窗在竖直方向上的对齐方式。对齐方式(DialogAlignment)说明如下:

    • Default(默认值)：默认对齐。

    • Top：垂直顶部对齐。

    • Center：垂直居中对齐。

    • Bottom：垂直底部对齐。

    • TopStart：左上对齐。

    • TopEnd：右上对齐。

    • CenterStart：左中对齐。

    • CenterEnd：右中对齐。

    • BottomStart：左下对齐。

    • BottomEnd8：右下对齐。

  • offset：弹窗相对alignment所在位置的偏移量。

  • gridCount：弹窗容器宽度所占用栅格数。

AlertDialogParamWithButtons

其他属性相通，以下两个属性 是个特色。

  • primaryButton：按钮的文本内容、文本色、按钮背景色和点击回调。

    • value: ResourceStr

    • fontColor?: ResourceColor

    • backgroundColor?: ResourceColor

    • action: () => void

  • secondaryButton：按钮的文本内容、文本色、按钮背景色和点击回调。

    • value: ResourceStr

    • fontColor?: ResourceColor

    • backgroundColor?: ResourceColor

    • action: () => void

8.1.2 列表选择弹窗(ActionSheet)

其他属性相通，有个特色属性：

  • sheets：设置选项内容，每个选择项支持设置图片、文本和选中的回调。Array<SheetInfo>。SheetInfo说明：

    • title：选项的文本内容。

    • icon：选项的图标，默认无图标显示。

    • action：选项选中的回调。

          ActionSheet.show({title: '列表选择弹窗标题!!!',message: '请选择你喜欢的地区：',autoCancel: true, //点击其他区域是否自动关闭alignment: DialogAlignment.Center,confirm: {value: '我知道了',action: () => {promptAction.showToast({ message: '羡慕你被点了一下' })}},cancel: () => {promptAction.showToast({ message: '你取消了' })},sheets: [{title: '北京',action: () => {promptAction.showToast({ message: '北京' })}},{title: '上海',icon:$r('app.media.app_icon'),action: () => {promptAction.showToast({ message: '上海' })}},{title: '广州',action: () => {promptAction.showToast({ message: '广州' })}},{title: '深圳',action: () => {promptAction.showToast({ message: '深圳' })}}]})

8.2自定义弹窗（CustomDialog）

        自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。

8.2.1 简单实用

        使用@CustomDialog装饰器装饰自定义弹窗。
@Entry
@Component
struct BasicDialog {......
}//自定义弹窗
@CustomDialog
struct CustomDialogSc {customDialogSc?: CustomDialogControllerbuild() {Column() {Text('我是个弹窗，嘿嘿嘿').fontSize(24).height(100)Button('点击关闭弹窗').onClick(() => {if (this.customDialogSc != undefined) {this.customDialogSc.close()}}).margin(20)}}
}
        创建构造器
@Entry
@Component
struct BasicDialog {@State message: string = '返回上一页'customDialogSc: CustomDialogController = new CustomDialogController({builder: CustomDialogSc(),alignment: DialogAlignment.Center})//弹窗位置build() {......}
}
        添加时间，弹窗弹出
  this.customDialogSc.open()

8.2.2 弹窗添加交互

        在@CustomDialog装饰器内添加按钮操作，创建函数。
//自定义弹窗
@CustomDialog
struct CustomDialogSc2 {customDialogSc?: CustomDialogControllercancel: () => void//创建函数confirm: () => void//创建函数build() {Column() {Text('我是个弹窗，嘿嘿嘿').fontSize(24).height(100)Row(){Button('取消').onClick(() => {this.customDialogSc.close()this.cancel()}).margin(20)Button('确认').onClick(() => {this.customDialogSc.close()this.confirm()}).margin(20)}.width('90%').justifyContent(FlexAlign.Center)}}
}
        页面内需要在构造器内进行接收，同时创建相应的函数操作。
  customDialogSc2: CustomDialogController = new CustomDialogController({builder: CustomDialogSc2({cancel:this.onCancel,confirm:this.onConfirm}),alignment: DialogAlignment.Center})onCancel() {promptAction.showToast({message:'点击了 onCancel '})}onConfirm() {promptAction.showToast({message:'点击了 onConfirm '})}

8.3 日期滑动选择器弹窗

根据指定的日期范围创建日期滑动选择器，展示在弹窗上。

  • start：设置选择器的起始日期。默认：Date('1970-1-1')

  • end：设置选择器的结束日期。默认：Date('2100-12-31')

  • selected：设置当前选中的日期。默认：当前系统日期

  • lunar：日期是否显示为农历。默认：false

      Button("日期弹窗").margin({ top: 20 }).onClick(() => {DatePickerDialog.show({start: new Date("2000-1-1"),end: new Date("2100-12-31"),selected: this.selectedDate,onAccept: (value: DatePickerResult) => {// 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期this.selectedDate.setFullYear(value.year, value.month, value.day)//开整},onCancel: () => {//开整},onChange: (value: DatePickerResult) => {//开整}})})Button("日期弹窗(阴历)").margin({ top: 20 }).onClick(() => {DatePickerDialog.show({start: new Date("2000-1-1"),end: new Date("2100-12-31"),selected: this.selectedDate,lunar: true,onAccept: (value: DatePickerResult) => {this.selectedDate.setFullYear(value.year, value.month, value.day)//开整},onCancel: () => {//开整},onChange: (value: DatePickerResult) => {//开整}})})

8.4 时间滑动选择器弹窗

以24小时的时间区间创建时间滑动选择器，展示在弹窗上。

  • selected：设置当前选中的时间。默认值：当前系统时间

  • useMilitaryTime：展示时间是否为24小时制。默认值：false，12小时制

      Button("时间选择器 12小时制").margin({ top: 20 }).onClick(() => {TimePickerDialog.show({selected: this.selectTime,onAccept: (value: TimePickerResult) => {// 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间this.selectTime.setHours(value.hour, value.minute)//开整},onCancel: () => {//开整},onChange: (value: TimePickerResult) => {//开整}})})Button("时间选择器 24小时制").margin({ top: 20 }).onClick(() => {TimePickerDialog.show({selected: this.selectTime,useMilitaryTime: true,onAccept: (value: TimePickerResult) => {this.selectTime.setHours(value.hour, value.minute)//开整},onCancel: () => {//开整},onChange: (value: TimePickerResult) => {//开整}})})

8.5 文本滑动选择器弹窗

指定的选择范围创建文本选择器，展示在弹窗上。

  • range：设置文本选择器的选择范围。

  • selected：设置选中项的索引值。

  • value：设置选中项的文本内容。当设置了selected参数时，该参数不生效。如果设置的value值不在range范围内，则默认取range第一个元素。

  • defaultPickerItemHeight：设置选择器中选项的高度。

      Button("文本选择器").margin(20).onClick(() => {TextPickerDialog.show({range: this.city,selected: this.select,defaultPickerItemHeight:50,onAccept: (value: TextPickerResult) => {// 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项this.select = value.index//开整},onCancel: () => {//开整},onChange: (value: TextPickerResult) => {//开整}})})

        总体来说 ArkTS Dialog 封装的很全，涵盖了大部分的情况，样式也很好看，不需要我们再自定义了。

九、图片

        实际开发中经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif。

Image(src: string | Resource | media.PixelMap)

9.1 本地资源

  • 创建images文件夹，将本地图片放入ets文件夹下的任意位置。

  • Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）。

      Image("images/iv_js.png").height(100).width('90%').margin({top :20})

9.2 网络资源

        引入网络图片需申请权限ohos.permission.INTERNET，具体申请方式请参考权限申请声明。此时，Image组件的src参数为网络图片的链接。

      Image('https://img-blog.csdnimg.cn/img_convert/0e3fbae79c61d17bb2737b803f92a6c6.png').height(100).width('90%').margin({ top:20 })

9.3 Resource资源

        使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r资源接口读取到并转换到Resource格式。

      Image($r('app.media.app_icon')).height(100).width(100).margin({ top:20 })

9.4 base64

        路径格式为data:image/[png|jpeg|bmp|webp];base64,[base64 data]，其中[base64 data]为Base64字符串数据。

      Image('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAA....特别长直接省略了...VORK5CYII=').height(100).width(100).margin({ top:20 })

        Base64格式字符串可用于存储图片的像素数据，在网页上使用较为广泛。

十、视频播放（Video）

视频播放组件。Video组件支持加载本地视频和网络视频。

  • src：播放视频内容的路径。

    • 支持在resources下面的video或rawfile文件夹里放置媒体资源。

    • 支持dataability://的路径前缀，用于访问通过Data Ability提供的视频路径。

    • 支持file:///data/storage路径前缀的字符串，用于读取应用沙箱路径内的资源。需要保证目录包路径下的文件有可读权限。

    • 视频支持的格式是：mp4、mkv、webm、TS。

  • currentProgressRate：视频播放倍速。number取值仅支持：0.75，1.0，1.25，1.75，2.0。

    • Speed_Forward_0_75_X：0.75倍速播放。

    • Speed_Forward_1_00_X(默认)：1倍速播放。

    • Speed_Forward_1_25_X：1.25倍速播放。

    • Speed_Forward_1_75_X：1.75倍速播放。

    • Speed_Forward_2_00_X：2倍速播放。

  • previewUri：视频未播放时的预览图片路径，默认不显示图片。

  • controller：设置视频控制器，可以控制视频的播放状态。

  • muted：是否静音。默认值：false

  • autoPlay：是否自动播放。默认值：false

  • controls：控制视频播放的控制栏是否显示。默认值：true

  • loop：是否单个视频循环播放。默认值：false

  • objectFit：设置视频显示模式。ImageFit模式说明：

    • Cover(默认值)：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

    • Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。

    • Auto：自适应显示

    • Fill：不保持宽高比进行放大缩小，使得图片充满显示边界。

    • ScaleDown：保持宽高比显示，图片缩小或者保持不变。

    • None：保持原有尺寸显示。

注：This component is not supported on PC preview.(该组件不支持预览)

10.1 普通本地视频。

        加载本地视频时，首先在本地rawfile目录指定对应的文件。已设置视频未播放时的预览图片路径。

        添加一些事件，让视频自动播放。

 Video({src: $r('app.media.app_icon'),previewUri: $r('app.media.app_icon'),controller: this.controller}).muted(false) //设置是否静音.controls(false) //设置是否显示默认控制条.autoPlay(true) //设置是否自动播放.loop(false) //设置是否循环播放.objectFit(ImageFit.Contain) //设置视频适配模式

10.2 加载网络视频

        加载网络视频时，需要申请权限ohos.permission.INTERNET，具体申请方式请参考权限申请声明。此时，Video的src属性为网络视频的链接。

      Video({src: 'https://xxxxx/hao.map',//替换有效地址在 src引用即可。previewUri: $r('app.media.app_icon'),controller: this.controller}).muted(false) //设置是否静音.controls(false) //设置是否显示默认控制条.autoPlay(true) //设置是否自动播放.loop(false) //设置是否循环播放.objectFit(ImageFit.Contain) //设置视频适配模式

10.3 Video控制器使用(VideoController)

  • start：开始播放。

  • pause：暂停播放，显示当前帧，再次播放时从当前位置继续播放。

  • stop：停止播放，显示当前帧，再次播放时从头开始播放。

  • setCurrentTime：setCurrentTime(value: number)，指定视频播放的进度位置。

  • setCurrentTime：setCurrentTime(value: number, seekMode: SeekMode)，指定视频播放的进度位置。SeekMode类型：

    • PreviousKeyframe：跳转到前一个最近的关键帧。

    • NextKeyframe：跳转到后一个最近的关键帧。

    • ClosestKeyframe：跳转到最近的关键帧。

    • Accurate：精准跳转，不论是否为关键帧。

  • requestFullscreen：请求全屏播放。

  • exitFullscreen：退出全屏播放。

@Entry
@Component
struct BasicVideo {private controller: VideoController = new VideoController();@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_Xbuild() {Column() {......Row() {Button("开始").onClick(() => {this.controller.start() //开始播放})Button("暂停").onClick(() => {this.controller.pause() // 暂停播放}).margin({ left: 10 })Button("结束").onClick(() => {this.controller.stop() // 结束播放}).margin({ left: 10 })Button('跳3s位置').onClick(() => {this.controller.setCurrentTime(3, SeekMode.Accurate) // 精准跳转到视频的3s位置}).margin({ left: 10 })}.margin(20)Row() {Button("0.75倍速").onClick(() => {this.curRate = PlaybackSpeed.Speed_Forward_0_75_X //0.75倍速播放})Button("1.25倍速").onClick(() => {this.curRate = PlaybackSpeed.Speed_Forward_1_25_X //1.25倍速播放}).margin({ left: 10 })Button("2倍速").onClick(() => {this.curRate = PlaybackSpeed.Speed_Forward_2_00_X //2倍速播放}).margin({ left: 10 })}}.width('100%')}
}

10.4 事件回调

        Video组件回调事件主要为播放开始、暂停结束、播放失败、视频准备和操作进度条等事件，除此之外，Video组件也支持通用事件的调用，如点击、触摸等事件的调用。

      Video({src: $rawfile('166_1710407215.mp4'),previewUri: $r('app.media.app_icon'),currentProgressRate: this.curRate,controller: this.controller}).onStart(() => {console.info("Video",'onStart')}).onPause(() => {console.info('onPause')}).onFinish(() => {console.info('onFinish')}).onError(() => {console.info('onError')}).onPrepared((e) => {console.info('onPrepared is ' + e.duration)}).onSeeking((e) => {console.info('onSeeking is ' + e.time)}).onSeeked((e) => {console.info('onSeeked is ' + e.time)}).onUpdate((e) => {console.info('onUpdate is ' + e.time)})

相关推荐 

Dev Studio 安装与使用

ArkTS 开发基础/语言​​​​​​​

ArkTS 构建布局​​​​​​​

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/281818.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

个人网站制作 Part 14 添加网站分析工具 | Web开发项目

个人网站制作 Part 14 添加网站分析工具 | Web开发项目

文章目录 &#x1f469;‍&#x1f4bb; 基础Web开发练手项目系列&#xff1a;个人网站制作&#x1f680; 添加网站分析工具&#x1f528;使用Google Analytics&#x1f527;步骤 1: 注册Google Analytics账户&#x1f527;步骤 2: 获取跟踪代码 &#x1f528;使用Vue.js&#…
阅读更多...
分库分表场景下多维查询解决方案（用户+商户）

分库分表场景下多维查询解决方案（用户+商户）

在采用分库分表设计时&#xff0c;通过一个PartitionKey根据散列策略将数据分散到不同的库表中&#xff0c;从而有效降低海量数据下C端访问数据库的压力。这种方式可以缓解单一数据库的压力&#xff0c;提升了吞吐量&#xff0c;但同时也带来了新的问题。对于B端商户而言&#…
阅读更多...
权限提升-Web权限提升篇划分获取资产服务后台系统数据库管理相互转移

权限提升-Web权限提升篇划分获取资产服务后台系统数据库管理相互转移

知识点 1、权限提升转移-分类&高低&场景 2、Web权限提升及转移-后台&数据库 3、后台权限及转移-转移对象&后台分类 章节点&#xff1a; 1、Web权限提升及转移 2、系统权限提升及转移 3、宿主权限提升及转移 4、域控权限提升及转移 基础点 0、为什么我们要学…
阅读更多...
B004-springcloud alibaba 服务容错 Sentinel

B004-springcloud alibaba 服务容错 Sentinel

目录 高并发带来的问题服务雪崩效应常见容错方案常见的容错思路隔离超时限流熔断降级 常见的容错组件 Sentinel入门什么是Sentinel微服务项目集成Sentinel核心库安装Sentinel控制台实现一个接口的限流 Sentinel的概念和功能基本概念重要功能 Sentinel规则流控规则三种流控模式三…
阅读更多...
verilog设计-CDC：单bit脉冲快时钟域到慢时钟域

verilog设计-CDC：单bit脉冲快时钟域到慢时钟域

一、前言 当单bit信号由快时钟域传递给慢时钟域时&#xff0c;快时钟域的异步信号最小可为快时钟信号的一个时钟周期脉冲&#xff0c;快时钟域的单时钟周期脉冲长度小于慢时钟域的时钟周期&#xff0c;很有可能该脉冲信号在慢时钟域的两个时钟上升沿之间&#xff0c;导致该脉冲…
阅读更多...
Flask中的Blueprints：模块化和组织大型Web应用【第142篇—Web应用】

Flask中的Blueprints：模块化和组织大型Web应用【第142篇—Web应用】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Flask中的Blueprints&#xff1a;模块化和组织大型Web应用 在构建大型Web应用时&#xff0…
阅读更多...
数据机构-2（顺序表）

数据机构-2（顺序表）

线性表 概念 顺序表 示例&#xff1a;创建一个存储学生信息的顺序表 表头&#xff08;Tlen总长度&#xff0c; Clen当前长度&#xff09; 函数 #include <seqlist.c> #include <stdio.h> #include <stdlib.h> #include "seqlist.h" #include &…
阅读更多...
【论文精读】OTA: Optimal Transport Assignment for Object Detection(物体探测的最优传输分配)

【论文精读】OTA: Optimal Transport Assignment for Object Detection(物体探测的最优传输分配)

OTA最优传输 &#x1f680;&#x1f680;&#x1f680;摘要一、1️⃣ Introduction---介绍二、2️⃣Related Work---相关工作2.1 &#x1f393; Fixed Label Assignment--静态标签分配2.2 ✨Dynamic Label Assignment--动态标签分配 三、3️⃣Method---论文方法3.1 &#x1f39…
阅读更多...
Linux - 应用层HTTPS、传输层TCP/IP模型中典型协议解析

Linux - 应用层HTTPS、传输层TCP/IP模型中典型协议解析

目录 应用层&#xff1a;自定制协议实例 HTTP协议首行头部空行正文http服务器的搭建 HTTPS协议 传输层UDP协议TCP协议 应用层&#xff1a; 应用层负责应用程序之间的沟通—程序员自己定义数据的组织格式 应用层协议&#xff1a;如何将多个数据对象组织成为一个二进制数据串进行…
阅读更多...
【探讨】基于卷积神经网络深度学习模型的光场显微三维粒子空间分布重建

【探讨】基于卷积神经网络深度学习模型的光场显微三维粒子空间分布重建

光场显微粒子图像测速技术通过单光场相机即可实现微尺度三维速度场的测量&#xff0c;但单光场相机角度信息有限&#xff0c;导致粒子重建的轴向分辨率低、重建速度慢。基于此&#xff0c;提出一种基于卷积神经网络深度学习模型的光场显微粒子三维空间分布重建方法&#xff0c;…
阅读更多...
说说你对webpack的理解？解决了什么问题？

说说你对webpack的理解？解决了什么问题？

文章目录 一、背景二、问题三、是什么参考文献 一、背景 Webpack 最初的目标是实现前端项目的模块化&#xff0c;旨在更高效地管理和维护项目中的每一个资源 模块化 最早的时候&#xff0c;我们会通过文件划分的形式实现模块化&#xff0c;也就是将每个功能及其相关状态数据各…
阅读更多...
浅谈如何自我实现一个消息队列服务器(2)——实现 broker server 服务器

浅谈如何自我实现一个消息队列服务器(2)——实现 broker server 服务器

文章目录 一、实现 broker server 服务器1.1 创建一个SpringBoot项目1.2 创建Java类 二、硬盘持久化存储 broker server 里的数据2.1 数据库存储2.1.1 浅谈SQLiteMyBatis 2.1.2 如何使用SQLite 2.2 使用DataBaseManager类封装数据库操作2.3 文件存储消息2.3.1 存储消息时&#…
阅读更多...
Visual Studio 2022进行文件差异比较

Visual Studio 2022进行文件差异比较

前言 Visual Studio 2022在版本17.7.4中发布在解决方案资源管理器中比较文件的功能&#xff0c;通过使用此功能&#xff0c;可以轻松地查看两个文件之间的差异&#xff0c;包括添加、删除和修改的代码行。可以逐行查看差异&#xff0c;并根据需要手动调整和编辑文件内容以进行…
阅读更多...
100个openharmony开源demo：1.日历

100个openharmony开源demo：1.日历

准备用开发者手机写100个开源的demo不知道能不能实现&#xff0c;日拱一卒&#xff0c;期待蜕变。 第一个demo&#xff1a;日历&#xff0c;借鉴了网上的日历算法&#xff0c;自己用arkts写了界面和点击事件&#xff0c;各位可根据此demo写自己的日历选择器等组件。 1.目录结…
阅读更多...
【Godot 3.5组件】简单血条组件HealthBar

【Godot 3.5组件】简单血条组件HealthBar

说明 本文原文写自2022年&#xff0c;内容基于Godot3.5。是本人早期进行Godot组件化和自定义节点探索时的产物&#xff0c;当时的代码和思想可能不太成熟&#xff0c;但贴出来&#xff0c;供需要学习组件化基础思路的同学食用。 概述 血条作为一个非常基础和常见的组件&…
阅读更多...
【C++】---string的模拟

【C++】---string的模拟

【C】---string的模拟 一、string类实现1.string类的构造函数2.swap&#xff08;&#xff09;函数3.拷贝构造函数4.赋值运算符重载5.析构6.迭代器7.operator[ ]8.size9.c_str&#xff08;&#xff09;10.reserve&#xff08;&#xff09;11.resize&#xff08;&#xff09;12.p…
阅读更多...
【C语言】linux内核pci_enable_device函数和_PCI_NOP宏

【C语言】linux内核pci_enable_device函数和_PCI_NOP宏

pci_enable_device 一、注释 static int pci_enable_device_flags(struct pci_dev *dev, unsigned long flags) {struct pci_dev *bridge;int err;int i, bars 0;/** 此时电源状态可能是未知的&#xff0c;可能是由于新启动或者设备移除调用。* 因此获取当前的电源状态&…
阅读更多...
【Apache ShenYu源码】如何实现负载均衡模块设计

【Apache ShenYu源码】如何实现负载均衡模块设计

ShenYu是一个异步的&#xff0c;高性能的&#xff0c;跨语言的&#xff0c;响应式的 API 网关。有关ShenYu的介绍可以戳这。 一、前瞻 今天我们尝试不同的代码阅读方式&#xff0c;按模块来去阅读源码&#xff0c;看看效果如何。 本次阅读锁定在shenyu-loadbalancer&#xf…
阅读更多...
WM8978 —— 带扬声器驱动程序的立体声编解码器（4）

WM8978 —— 带扬声器驱动程序的立体声编解码器（4）

接前一篇文章&#xff1a;WM8978 —— 带扬声器驱动程序的立体声编解码器&#xff08;3&#xff09; 九、寄存器概览与详解 1. 整体概览 WM8978芯片共有58个寄存器&#xff0c;整体总表如下&#xff1a; 2. 详细说明 在此&#xff0c;只介绍WM8978较为常用的那些寄存器。 &…
阅读更多...
HBCalculator 程序：通过 VMD 可计算分子动力学模拟中氢键密度和强度的一维和二维分布

HBCalculator 程序：通过 VMD 可计算分子动力学模拟中氢键密度和强度的一维和二维分布

分享一个通过 VMD 可计算分子动力学模拟中氢键密度和强度的一维和二维分布程序 HBCalculator。 感谢论文的原作者&#xff01; 主要内容 “氢键是分子系统中关键的非共价相互作用&#xff0c;对生物、化学和能量相关过程产生重大影响&#xff1b;因此&#xff0c;描述氢键信息…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023