devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS ArkTS 基础组件_arkts 组件学习

作者：AllinToyou | 2024-04-14 22:04:45

赞

踩

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。

  1. interface TextInterface {
  2.     (content?: string | Resource): TextAttribute;
  3. }

添加 string 资源

  1.       Text('直接传入文本')
  2.         .fontSize(24)
  3.         .margin(10)
  4.       Text($r('app.string.basic_text_create'))
  5.         .fontSize(24)
  6.         .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，长按文本，会弹出文本选择菜单，可选中文本并进行复制、全选操作。

  1.       Text('左对齐')
  2.         .width(300)
  3.         .fontColor(Color.Red)
  4.         .fontStyle(FontStyle.Italic)//斜体
  5.         .fontWeight(FontWeight.Bold)//粗体
  6.         .textAlign(TextAlign.Start)
  7.         .border({ width: 1 })
  8.         .padding(10)
  9.         .margin(10)
  10.       Text('中间对齐')
  11.         .width(300)
  12.         .fontWeight(FontWeight.Medium)
  13.         .fontColor('#00ff00')
  14.         .textAlign(TextAlign.Center)
  15.         .border({ width: 1 })
  16.         .padding(10)
  17.         .margin(10)
  18.       Text('右对齐')
  19.         .width(300)
  20.         .fontColor(0x0000ff)
  21.         .textAlign(TextAlign.End)
  22.         .border({ width: 1 })
  23.         .padding(10)
  24.         .margin(10)
  25.  
  26.       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.')
  27.         .width(300)
  28.         .margin(10)
  29.         .maxLines(2)
  30.         .textCase(TextCase.UpperCase)
  31.         .decoration({
  32.           type: TextDecorationType.LineThrough,
  33.           color: Color.Red
  34.         })
  35.       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.')
  36.         .width(300)
  37.         .maxLines(2)
  38.         .textOverflow({ overflow: TextOverflow.Ellipsis })
  39.         .textCase(TextCase.LowerCase)

2.3 添加子组件(Span)

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

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

2.4 添加事件

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

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

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

三、按钮（Button）

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

3.1 创建按钮

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

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

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

  1.       Button('直接传入文本')
  2.         .fontSize(24)
  3.         .margin(10)
  4.       Button($r('app.string.basic_btn_create'))
  5.         .fontSize(24)
  6.         .margin(10)
  7.  
  8.       Button() {
  9.         Row() {
  10.           Image($r('app.media.app_icon')).width(40).height(40).margin(5)
  11.           Text('loading').fontSize(20).fontColor(Color.White).margin(10)
  12.         }.alignItems(VerticalAlign.Center)
  13.       }
  14.       .fontSize(24)
  15.       .margin(10)

3.2 设置按钮类型

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

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

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

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

  1.       Button('胶囊型，圆角属性无效',
  2.         { type: ButtonType.Capsule, stateEffect: false })
  3.         .borderRadius(10)//无效
  4.         .fontSize(20)
  5.         .margin(12)
  6.  
  7.       Button('圆形按钮',
  8.         { type: ButtonType.Circle, stateEffect: false })
  9.         .borderRadius(10)//无效
  10.         .fontSize(18)
  11.         .width(110)
  12.         .height(110)
  13.  
  14.       Button('普通按钮',
  15.         { type: ButtonType.Normal, stateEffect: false })
  16.         .fontSize(18)
  17.         .margin(10)
  18.       Button('普通按钮，圆角 10',
  19.         { type: ButtonType.Normal, stateEffect: false })
  20.         .borderRadius(10)//有效
  21.         .fontSize(18)
  22.         .margin(10)

3.3 悬浮按钮

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

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

四、文本输入（TextInput/TextArea）

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

  • TextInput为单行输入框。

  • TextArea为多行输入框。

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

4.1 InputType输入框类型

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

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

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

  • Number：纯数字输入模式。

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

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

4.2 键盘回车键类型

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

  • Go：显示为开始样式。

  • Search：显示为搜索样式。

  • Send：显示为发送样式。

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

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

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

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

五、单选框（Radio）

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

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

  • value：当前单选框的值。

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

  1.         Radio({ value: 'Radio1', group: 'radioGroup' })
  2.           .checked(false)//是否选中
  3.           .width(50)
  4.  
  5.         Radio({ value: 'Radio2', group: 'radioGroup' })
  6.           .checked(true)//是否选中
  7.           .width(50)

5.1 添加事件

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

  1.         Radio({ value: 'Radio1', group: 'radioGroup' })
  2.           .checked(false)//是否选中
  3.           .width(50)
  4.           .onChange((isChecked: boolean) => {
  5.             if(isChecked) {
  6.               //需要执行的操作
  7.             }
  8.           })
  9.         Radio({ value: 'Radio2', group: 'radioGroup' })
  10.           .checked(true)//是否选中
  11.           .width(50)
  12.           .onChange((isChecked: boolean) => {
  13.             if(isChecked) {
  14.               //需要执行的操作
  15.             }
  16.           })

5.2 添加文字

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

  1.       Row(){
  2.         Radio({ value: 'Radio1', group: 'radioGroup' })
  3.           .checked(false)//是否选中
  4.           .width(50)
  5.           .onChange((isChecked: boolean) => {
  6.             if(isChecked) {
  7.               //需要执行的操作
  8.             }
  9.           })
  10.         Text('男').fontSize(30)
  11.         Radio({ value: 'Radio2', group: 'radioGroup' })
  12.           .checked(true)//是否选中
  13.           .width(50)
  14.           .onChange((isChecked: boolean) => {
  15.             if(isChecked) {
  16.               //需要执行的操作
  17.             }
  18.           })
  19.         Text('女').fontSize(30)
  20.       }.margin(20)

六、切换按钮（Toggle）

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

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

    • Checkbox：勾选框样式。

    • Switch：开关样式。

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

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

  1.       Row() {
  2.         Toggle({ type: ToggleType.Checkbox, isOn: false }).width(40)
  3.         Toggle({ type: ToggleType.Checkbox, isOn: true }).width(40)
  4.       }.margin(20)
  5.  
  6.       Row() {
  7.         Toggle({ type: ToggleType.Switch, isOn: false }).width(60)
  8.         Toggle({ type: ToggleType.Switch, isOn: true }).width(60)
  9.       }.margin(20)
  10.  
  11.       Row() {
  12.         Toggle({ type: ToggleType.Button, isOn: false }).width(100)
  13.         Toggle({ type: ToggleType.Button, isOn: true }).width(100)
  14.       }.margin(20)
  15.       //包含组件
  16.       Row() {
  17.         Toggle({ type: ToggleType.Button, isOn: false }) {
  18.           Text("你好")
  19.         }.width(100)
  20.         Toggle({ type: ToggleType.Button, isOn: true }){
  21.           Text("Harmony")
  22.         }.width(100)
  23.       }.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})


  1.       //默认线性样式ProgressType.Linear
  2.       Progress({
  3.         value: 75
  4.       }).width('90%').height(20).margin(20)
  5.       //从API version9开始，组件高度大于宽度的时候自适应垂直显示，相等时仍然保持水平显示。
  6.       Progress({ value: 75}).width(30).height(80)
  7.  
  8.       //ProgressType.Ring
  9.       Progress({
  10.         value: 75,
  11.         type: ProgressType.Ring
  12.       }).width('90%').height(50).margin(20)
  13.  
  14.       //ProgressType.ScaleRing
  15.       Progress({
  16.         value: 75,
  17.         type: ProgressType.ScaleRing
  18.       }).width('90%').height(100).margin(20)
  19.         // 设置环形有刻度进度条总刻度数为20，刻度宽度为5vp
  20.         .style({ scaleCount: 40, scaleWidth: 15, strokeWidth: 10 })
  21.  
  22.       //ProgressType.Eclipse
  23.       Progress({
  24.         value: 75,
  25.         type: ProgressType.Eclipse
  26.       }).width('90%').height(50).margin(20)
  27.  
  28.       //ProgressType.Capsule
  29.       Progress({
  30.         value: 75,
  31.         type: ProgressType.Capsule
  32.       }).width('90%').height(50).margin(20)

自定义样式

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

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

  1.       //ProgressType.ScaleRing
  2.       Progress({
  3.         value: 75,
  4.         type: ProgressType.ScaleRing
  5.       })
  6.         .width('90%')
  7.         .height(100)
  8.         .margin(20)
  9.         .value(this.progressValue)
  10.           // 设置环形有刻度进度条总刻度数为40，刻度宽度为15,条刻度粗细10
  11.         .style({ scaleCount: 40, scaleWidth: 15, strokeWidth: 10 })
  12.         .color(Color.Red)
  13.         .backgroundColor(Color.Orange)
  14.  
  15.       //ProgressType.Eclipse
  16.       Progress({
  17.         value: 75,
  18.         type: ProgressType.Eclipse
  19.       })
  20.         .width('90%')
  21.         .height(50)
  22.         .margin(20)
  23.         .value(this.progressValue)
  24.         .color(Color.Red)
  25.         .backgroundColor(Color.Orange)
  26.  
  27.       //ProgressType.Capsule
  28.       Progress({
  29.         value: 75,
  30.         type: ProgressType.Capsule
  31.       })
  32.         .width('90%')
  33.         .height(50)
  34.         .margin(20)
  35.         .color(Color.Red)
  36.         .backgroundColor(Color.Orange)
  37.         .value(this.progressValue)
  38.       Button("当前进度：" + this.progressValue + "，进度条+5")
  39.         .onClick(() => {
  40.           this.progressValue += 5
  41.           if (this.progressValue > 100) {
  42.             this.progressValue = 0
  43.           }
  44.         })

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

  • 警告弹窗

  • 列表选择弹窗

  • 自定义弹窗

  • 日期滑动选择器弹窗

  • 时间滑动选择器弹窗

  • 文本滑动选择器弹窗

8.1 弹窗

8.1.1 警告弹窗(AlertDialog)

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

  • AlertDialogParamWithConfirm

  • AlertDialogParamWithButtons

  1.       Button('警告弹窗-1个按钮')
  2.         .onClick(() => {
  3.           //AlertDialogParamWithConfirm
  4.           AlertDialog.show(
  5.             {
  6.               title: '警告标题!!!',
  7.               message: '内容特别的劲爆，嘿嘿嘿',
  8.               autoCancel: true,//点击遮障层时，是否关闭弹窗
  9.               alignment: DialogAlignment.Center,
  10.               gridCount: 3,
  11.               confirm: {
  12.                 value: '我知道了',
  13.                 action: () => {
  14.                   promptAction.showToast({message:'羡慕你被点了一下'})
  15.                 }
  16.               },
  17.               cancel: () => {
  18.                 promptAction.showToast({message:'你取消了'})
  19.               }
  20.             }
  21.           )
  22.         })
  23.         .backgroundColor(Color.Pink)
  24.       Button('警告弹窗-2个按钮')
  25.         .onClick(() => {
  26.           AlertDialog.show(
  27.             {
  28.               title: '警告标题!!!',
  29.               message: '内容特别的劲爆，嘿嘿嘿',
  30.               autoCancel: true,//点击其他区域是否自动关闭
  31.               alignment: DialogAlignment.Center,
  32.               gridCount: 4,
  33.               primaryButton: {
  34.                 value: '取消',
  35.                 action: () => {
  36.                   promptAction.showToast({message:'讨厌，你咋取消了'})
  37.                 }
  38.               },
  39.               secondaryButton: {
  40.                 value: '我知道了',
  41.                 action: () => {
  42.                   promptAction.showToast({message:'羡慕你被点了一下'})
  43.                 }
  44.               },
  45.               cancel: () => {
  46.                 promptAction.showToast({message:'你取消了'})
  47.               }
  48.             }
  49.           )
  50.         })
  51.         .backgroundColor(Color.Pink)
  52.         .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：选项选中的回调。

  1.           ActionSheet.show(
  2.             {
  3.               title: '列表选择弹窗标题!!!',
  4.               message: '请选择你喜欢的地区：',
  5.               autoCancel: true, //点击其他区域是否自动关闭
  6.               alignment: DialogAlignment.Center,
  7.               confirm: {
  8.                 value: '我知道了',
  9.                 action: () => {
  10.                   promptAction.showToast({ message: '羡慕你被点了一下' })
  11.                 }
  12.               },
  13.               cancel: () => {
  14.                 promptAction.showToast({ message: '你取消了' })
  15.               },
  16.               sheets: [
  17.                 {
  18.                   title: '北京',
  19.                   action: () => {
  20.                     promptAction.showToast({ message: '北京' })
  21.                   }
  22.                 },
  23.                 {
  24.                   title: '上海',
  25.                   icon:$r('app.media.app_icon'),
  26.                   action: () => {
  27.                     promptAction.showToast({ message: '上海' })
  28.                   }
  29.                 },
  30.                 {
  31.                   title: '广州',
  32.                   action: () => {
  33.                     promptAction.showToast({ message: '广州' })
  34.                   }
  35.                 },
  36.                 {
  37.                 title: '深圳',
  38.                 action: () => {
  39.                   promptAction.showToast({ message: '深圳' })
  40.                 }
  41.               }
  42.               ]
  43.             }
  44.           )

8.2自定义弹窗（CustomDialog）

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

8.2.1 简单实用

        使用@CustomDialog装饰器装饰自定义弹窗。
  1. @Entry
  2. @Component
  3. struct BasicDialog {
  4.   ......
  5. }
  6.  
  7. //自定义弹窗
  8. @CustomDialog
  9. struct CustomDialogSc {
  10.   customDialogSc?: CustomDialogController
  11.  
  12.   build() {
  13.     Column() {
  14.       Text('我是个弹窗，嘿嘿嘿')
  15.         .fontSize(24)
  16.         .height(100)
  17.       Button('点击关闭弹窗')
  18.         .onClick(() => {
  19.           if (this.customDialogSc != undefined) {
  20.             this.customDialogSc.close()
  21.           }
  22.         })
  23.         .margin(20)
  24.     }
  25.   }
  26. }
        创建构造器
  1. @Entry
  2. @Component
  3. struct BasicDialog {
  4.   @State message: string = '返回上一页'
  5.   customDialogSc: CustomDialogController = new CustomDialogController({
  6.     builder: CustomDialogSc(),
  7.     alignment: DialogAlignment.Center})//弹窗位置
  8.   build() {
  9.    ......
  10.   }
  11. }
  12.
        添加时间，弹窗弹出
  this.customDialogSc.open()

8.2.2 弹窗添加交互

        在@CustomDialog装饰器内添加按钮操作，创建函数。
  1. //自定义弹窗
  2. @CustomDialog
  3. struct CustomDialogSc2 {
  4.   customDialogSc?: CustomDialogController
  5.   cancel: () => void//创建函数
  6.   confirm: () => void//创建函数
  7.   build() {
  8.     Column() {
  9.       Text('我是个弹窗，嘿嘿嘿')
  10.         .fontSize(24)
  11.         .height(100)
  12.       Row(){
  13.         Button('取消')
  14.           .onClick(() => {
  15.             this.customDialogSc.close()
  16.             this.cancel()
  17.           })
  18.           .margin(20)
  19.         Button('确认')
  20.           .onClick(() => {
  21.             this.customDialogSc.close()
  22.             this.confirm()
  23.           })
  24.           .margin(20)
  25.       }.width('90%').justifyContent(FlexAlign.Center)
  26.     }
  27.   }
  28. }
        页面内需要在构造器内进行接收，同时创建相应的函数操作。
  1.   customDialogSc2: CustomDialogController = new CustomDialogController({
  2.     builder: CustomDialogSc2({
  3.       cancel:this.onCancel,
  4.       confirm:this.onConfirm
  5.     }),
  6.     alignment: DialogAlignment.Center})
  7.   onCancel() {
  8.     promptAction.showToast({message:'点击了 onCancel '})
  9.   }
  10.   onConfirm() {
  11.     promptAction.showToast({message:'点击了 onConfirm '})
  12.   }
  13.

8.3 日期滑动选择器弹窗

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

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

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

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

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

  1.       Button("日期弹窗")
  2.         .margin({ top: 20 })
  3.         .onClick(() => {
  4.           DatePickerDialog.show({
  5.             start: new Date("2000-1-1"),
  6.             end: new Date("2100-12-31"),
  7.             selected: this.selectedDate,
  8.             onAccept: (value: DatePickerResult) => {
  9.               // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
  10.               this.selectedDate.setFullYear(value.year, value.month, value.day)
  11.               //开整
  12.             },
  13.             onCancel: () => {
  14.               //开整
  15.             },
  16.             onChange: (value: DatePickerResult) => {
  17.               //开整
  18.             }
  19.           })
  20.         })
  21.  
  22.       Button("日期弹窗(阴历)")
  23.         .margin({ top: 20 })
  24.         .onClick(() => {
  25.           DatePickerDialog.show({
  26.             start: new Date("2000-1-1"),
  27.             end: new Date("2100-12-31"),
  28.             selected: this.selectedDate,
  29.             lunar: true,
  30.             onAccept: (value: DatePickerResult) => {
  31.               this.selectedDate.setFullYear(value.year, value.month, value.day)
  32.               //开整
  33.             },
  34.             onCancel: () => {
  35.               //开整
  36.             },
  37.             onChange: (value: DatePickerResult) => {
  38.               //开整
  39.             }
  40.           })
  41.         })

8.4 时间滑动选择器弹窗

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

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

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

  1.       Button("时间选择器 12小时制")
  2.         .margin({ top: 20 })
  3.         .onClick(() => {
  4.           TimePickerDialog.show({
  5.             selected: this.selectTime,
  6.             onAccept: (value: TimePickerResult) => {
  7.               // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
  8.               this.selectTime.setHours(value.hour, value.minute)
  9.               //开整
  10.             },
  11.             onCancel: () => {
  12.               //开整
  13.             },
  14.             onChange: (value: TimePickerResult) => {
  15.               //开整
  16.             }
  17.           })
  18.         })
  19.       Button("时间选择器 24小时制")
  20.         .margin({ top: 20 })
  21.         .onClick(() => {
  22.           TimePickerDialog.show({
  23.             selected: this.selectTime,
  24.             useMilitaryTime: true,
  25.             onAccept: (value: TimePickerResult) => {
  26.               this.selectTime.setHours(value.hour, value.minute)
  27.               //开整
  28.             },
  29.             onCancel: () => {
  30.               //开整
  31.             },
  32.             onChange: (value: TimePickerResult) => {
  33.               //开整
  34.             }
  35.           })
  36.         })

8.5 文本滑动选择器弹窗

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

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

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

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

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

  1.       Button("文本选择器")
  2.         .margin(20)
  3.         .onClick(() => {
  4.           TextPickerDialog.show({
  5.             range: this.city,
  6.             selected: this.select,
  7.             defaultPickerItemHeight:50,
  8.             onAccept: (value: TextPickerResult) => {
  9.               // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
  10.               this.select = value.index
  11.               //开整
  12.             },
  13.             onCancel: () => {
  14.               //开整
  15.             },
  16.             onChange: (value: TextPickerResult) => {
  17.               //开整
  18.             }
  19.           })
  20.         })

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

九、图片

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

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

9.1 本地资源

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

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

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

9.2 网络资源

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

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

9.3 Resource资源

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

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

9.4 base64

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

  1.       Image('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAA....特别长直接省略了...VORK5CYII=')
  2.         .height(100)
  3.         .width(100)
  4.         .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目录指定对应的文件。已设置视频未播放时的预览图片路径。

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

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

10.2 加载网络视频

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

  1.       Video({
  2.         src: 'https://xxxxx/hao.map',//替换有效地址在 src引用即可。
  3.         previewUri: $r('app.media.app_icon'),
  4.         controller: this.controller
  5.       }).muted(false) //设置是否静音
  6.         .controls(false) //设置是否显示默认控制条
  7.         .autoPlay(true) //设置是否自动播放
  8.         .loop(false) //设置是否循环播放
  9.         .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：退出全屏播放。

  1. @Entry
  2. @Component
  3. struct BasicVideo {
  4.   private controller: VideoController = new VideoController();
  5.   @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  6.  
  7.   build() {
  8.     Column() {
  9.       ......
  10.       Row() {
  11.         Button("开始")
  12.           .onClick(() => {
  13.             this.controller.start() //开始播放
  14.           })
  15.         Button("暂停")
  16.           .onClick(() => {
  17.             this.controller.pause() // 暂停播放
  18.           }).margin({ left: 10 })
  19.         Button("结束")
  20.           .onClick(() => {
  21.             this.controller.stop() // 结束播放
  22.           }).margin({ left: 10 })
  23.         Button('跳3s位置').onClick(() => {
  24.           this.controller.setCurrentTime(3, SeekMode.Accurate) // 精准跳转到视频的3s位置
  25.         }).margin({ left: 10 })
  26.       }.margin(20)
  27.  
  28.       Row() {
  29.         Button("0.75倍速")
  30.           .onClick(() => {
  31.             this.curRate = PlaybackSpeed.Speed_Forward_0_75_X //0.75倍速播放
  32.           })
  33.         Button("1.25倍速")
  34.           .onClick(() => {
  35.             this.curRate = PlaybackSpeed.Speed_Forward_1_25_X //1.25倍速播放
  36.           }).margin({ left: 10 })
  37.         Button("2倍速")
  38.           .onClick(() => {
  39.             this.curRate = PlaybackSpeed.Speed_Forward_2_00_X //2倍速播放
  40.           }).margin({ left: 10 })
  41.       }
  42.  
  43.     }.width('100%')
  44.   }
  45. }

10.4 事件回调

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

  1.       Video({
  2.         src: $rawfile('166_1710407215.mp4'),
  3.         previewUri: $r('app.media.app_icon'),
  4.         currentProgressRate: this.curRate,
  5.         controller: this.controller
  6.       })
  7.         .onStart(() => {
  8.           console.info("Video",'onStart')
  9.         })
  10.         .onPause(() => {
  11.           console.info('onPause')
  12.         })
  13.         .onFinish(() => {
  14.           console.info('onFinish')
  15.         })
  16.         .onError(() => {
  17.           console.info('onError')
  18.         })
  19.         .onPrepared((e) => {
  20.           console.info('onPrepared is ' + e.duration)
  21.         })
  22.         .onSeeking((e) => {
  23.           console.info('onSeeking is ' + e.time)
  24.         })
  25.         .onSeeked((e) => {
  26.           console.info('onSeeked is ' + e.time)
  27.         })
  28.         .onUpdate((e) => {
  29.           console.info('onUpdate is ' + e.time)
  30.         })

相关推荐 

Dev Studio 安装与使用

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/424336
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号