ToB企服应用市场:ToB评测及商务社交产业平台

标题: HarmonyOS ArkTS 底子组件 [打印本页]

---

作者: 张国伟    时间: 2024-6-11 11:31
标题: 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。
    
  
  

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范例时单位为fpletterSpacingnumber|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)
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)
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)
7.       Button('圆形按钮',
8.         { type: ButtonType.Circle, stateEffect: false })
9.         .borderRadius(10)//无效
10.         .fontSize(18)
11.         .width(110)
12.         .height(110)
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中只有一个可以被选中。

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

复制代码

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

1.         Radio({ value: 'Radio1', group: 'radioGroup' })
2.           .checked(false)//是否选中
3.           .width(50)
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组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换。

1. 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)
6.       Row() {
7.         Toggle({ type: ToggleType.Switch, isOn: false }).width(60)
8.         Toggle({ type: ToggleType.Switch, isOn: true }).width(60)
9.       }.margin(20)
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（胶囊样式）
    
  
  

1. 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)
8.       //ProgressType.Ring
9.       Progress({
10.         value: 75,
11.         type: ProgressType.Ring
12.       }).width('90%').height(50).margin(20)
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 })
22.       //ProgressType.Eclipse
23.       Progress({
24.         value: 75,
25.         type: ProgressType.Eclipse
26.       }).width('90%').height(50).margin(20)
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)
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)
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. }
7. //自定义弹窗
8. @CustomDialog
9. struct CustomDialogSc {
10.   customDialogSc?: CustomDialogController
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. }

复制代码

        添加时间，弹窗弹出

1.   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.   }

复制代码

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.         })
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。

1. 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})

复制代码

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
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)
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.       }
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 构建布局​​​​​​​

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4