鸿蒙开发-UI-组件3

鸿蒙开发-UI-组件

鸿蒙开发-UI-组件2

前言

一、文本输入

1.创建文本输入框

2.设置输入框类型

3.自定义样式

4.添加事件

5.常用场景

二、自定义弹窗

三、视频播放

1.创建视频组件

2.加载视频资源

1.加载本地视频

2.加载网络视频

3.添加属性

4.事件调用

5.Video控制器

1.默认控制器

2.自定义控制器

总结

---

前言

上文详细学习了鸿蒙开发UI常用组件（进度条、文本显示）的创建方式、自定义样式、事件监听以及常用场景，下文将学习鸿蒙开发UI其它常用组件。

一、文本输入

TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面

1.创建文本输入框

TextInput为单行输入框，创建接口：

TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

TextArea为多行输入框，创建接口：

TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

注：TextArea多行输入框文字超出一行时会自动折行。

2.设置输入框类型

TextInput有5种可选类型，分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式。通过type属性进行设置

以密码输入为例：

代码：

TextInput()
  .type(InputType.Password)

UI渲染：

3.自定义样式

4.添加事件

文本框主要用于获取用户输入的信息，把信息处理成数据进行上传，绑定onChange事件可以获取输入框内改变的内容。用户也可以使用通用事件来进行相应的交互操作

代码示例

TextInput()
  .onChange((value: string) => {
    console.info(value);
  })
  .onFocus(() => {
    console.info('获取焦点');
  })

5.常用场景

用于表单的提交，在用户登录/注册页面，用户的登录或注册的输入操作

二、自定义弹窗

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

代码示例：一个自定义弹窗需要 step1-step2-step3三步操作

//step1：使用@CustomDialog装饰器装饰自定义弹窗，此装饰器内进行自定义内容（也就是弹框内容）
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void
  build() {
    Column() {
      Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            this.cancel()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.controller.close()
            this.confirm()
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
  }
}
 
@Entry
@Component
struct DialogExample {
//step2:在页面内创建对话框控制器，绑定对话框装饰器，同时页面中定义函数并绑定到对话框中相对应的函数
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,
    }),
    alignment: DialogAlignment.Default,  
//注：可设置dialog的对齐方式，设定显示在底部或中间等，默认为底部显示
  })
  onCancel() {
    console.info('Callback when the first button is clicked')
  }
  onAccept() {
    console.info('Callback when the second button is clicked')
  }
 
  build() {
    Flex({ justifyContent: FlexAlign.Center }) {
//step3：点击与onClick事件绑定的组件使弹窗弹出，对话框组件与对话框组件控制器是一一对应关系，对话框组件的打开、关闭是由对话框控制器来操作
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%')
  }
}

三、视频播放

Video组件用于播放视频文件并控制其播放状态，常用于为短视频应用和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置

1.创建视频组件

video创建接口：

Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})

src指定视频播放源的路径

currentProgressRate用于设置视频播放倍速

previewUri指定视频未播放时的预览图片路径

controller设置视频控制器，用于自定义控制视频

2.加载视频资源

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

1.加载本地视频

1.1 普通本地视频

加载本地视频时，首先在本地rawfile目录指定对应的文件，如下图所示

@Component
export struct VideoPlayer{
   private controller:VideoController;
   private previewUris: Resource = $r ('app.media.preview');
//注：使用资源访问符$rawfile()引用视频资源
   private innerResource: Resource = $rawfile('videoTest.mp4');
   build(){
     Column() {
       Video({
         src: this.innerResource,
         previewUri: this.previewUris,
         controller: this.controller
       })
   }
 }
}

2.加载网络视频

加载网络视频时，需要申请权限ohos.permission.INTERNET，此时，Video的src属性为网络视频的链接

@Component
export struct VideoPlayer{
   private controller:VideoController;
   private previewUris: Resource = $r ('app.media.preview');
// 注：videoSrc值为资源网络访问地址
   private videoSrc: string= 'https://www.example.com/example.mp4' 
   build(){
     Column() {
       Video({
         src: this.videoSrc,
         previewUri: this.previewUris,
         controller: this.controller
       })
   }
 }
}

3.添加属性

Video组件属性主要用于设置视频的播放形式。例如设置视频播放是否静音、播放时是否显示控制条等。具体属性设置如下代码所示

@Component
export struct VideoPlayer {
  private controller: VideoController;
 
  build() {
    Column() {
      Video({
        controller: this.controller
      })
        .muted(false) //1.设置是否静音
        .controls(false) //2.设置是否显示默认控制条
        .autoPlay(false) //3.设置是否自动播放
        .loop(false) //4.设置是否循环播放
        .objectFit(ImageFit.Contain) //5.设置视频适配模式
    }
  }
}

4.事件调用

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

@Entry
@Component
struct VideoPlayer{
  private controller:VideoController;
  private previewUris: Resource = $r ('app.media.preview');
  private innerResource: Resource = $rawfile('videoTest.mp4');
  build(){
    Column() {
      Video({
        src: this.innerResource,
        previewUri: this.previewUris,
        controller: this.controller
      })
        .onUpdate((event) => {   //1.更新事件回调
          console.info("Video update.");
        })
        .onPrepared((event) => {  //2.准备事件回调
          console.info("Video prepared.");
        })
        .onError(() => {          //3.失败事件回调
          console.info("Video error.");
        })
    }
  }
}

5.Video控制器

1.默认控制器

默认的控制器支持视频的开始、暂停、进度调整、全屏显示四项基本功能

@Entry
@Component
struct VideoGuide {
  @State videoSrc: Resource = $rawfile('videoTest.mp4')
  @State previewUri: string = 'common/videoIcon.png'
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
    build() {
    Row() {
      Column() {
        Video({
          src: this.videoSrc,
          previewUri: this.previewUri,
          currentProgressRate: this.curRate
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.自定义控制器

使用自定义的控制器，先将默认控制器关闭掉，之后可以使用button以及slider等组件进行自定义的控制与显示，适合自定义较强的场景下使用

@Entry
@Component
struct VideoGuide {
  @State videoSrc: Resource = $rawfile('videoTest.mp4')
  @State previewUri: string = 'common/videoIcon.png'
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  @State isAutoPlay: boolean = false
  @State showControls: boolean = true
  @State sliderStartTime: string = '';
  @State currentTime: number = 0;
  @State durationTime: number = 0;
  @State durationStringTime: string ='';
//step1：定义视频播放控制器
  controller: VideoController = new VideoController()
 
  build() {
    Row() {
      Column() {
//step2：定义视频播放组件，绑定视频播放控制器
        Video({
          src: this.videoSrc,
          previewUri: this.previewUri,
          currentProgressRate: this.curRate,
          controller: this.controller
        }).controls(false).autoPlay(true)
        .onPrepared((event)=>{
          this.durationTime = event.duration
        })
        .onUpdate((event)=>{
          this.currentTime =event.time
        })
        Row() {
          Text(JSON.stringify(this.currentTime) + 's')
//step3：定义滑动条组件，通过滑动条组件的事件执行控制器相关操作，控制视频播放组件行为
          Slider({
            value: this.currentTime,
            min: 0,
            max: this.durationTime
          })
          .onChange((value: number, mode: SliderChangeMode) => {
              this.controller.setCurrentTime(value);
            }).width("90%")
          Text(JSON.stringify(this.durationTime) + 's')
        }
        .opacity(0.8)
        .width("100%")
      }
      .width('100%')
    }
    .height('40%')
  }
}

注：Video组件已经封装好了视频播放的基础能力，开发者无需进行视频实例的创建，视频信息的设置获取，只需要设置数据源以及基础信息即可播放视频，相对扩展能力较弱。

---

总结

本文主要学习了鸿蒙开发UI组件（文本输入、自定义弹窗、视频播放）的使用，详细学习了文本输入组件的样式定义以及事件添加，简单学习了默认弹窗以及模式视频播放器组件的使用，详细学习了自定义弹窗的使用步骤以及自定义视频播放的开发步骤。下文将学习鸿蒙开发UI气泡提示与菜单。