一、Toggle按钮状态

1、toggle含义

Toggle 是二态选择组件，只有选中 / 未选中两种状态，用来做开关、复选框、切换按钮。

2、通用类型

• ToggleType.Switch滑动开关，常见于系统设置，拖动切换开启 / 关闭，你第一段代码用到。参数 isOn：true 默认打开，false 默认关闭。
• ToggleType.Checkbox复选框，多选场景使用，勾选 / 空白两种外观。
• ToggleType.Button按钮式切换，点击切换高亮 / 普通两种按钮样式。

3、通用属性

• selectedColor()：选中状态颜色
• width()/height()：自定义控件大小
• id()：组件唯一标识，用于查询组件
• onChange(callback)：状态切换触发回调，获取最新布尔值

4、代码

@Entry
@Component
struct ToggleDemo{
  build() {
    Column(){
      Toggle({
        type:ToggleType.Switch,
        isOn:true
      })
        .width(150)
        .height(50)
        .selectedColor(Color.Red)
        .id('n1')
      Toggle({
        type:ToggleType.Checkbox,
        isOn:false
      })
        .width(150)
        .height(50)
        .selectedColor(Color.Blue)
        .id('n2')
    }
    .width('100%')
    .height('100%')
  }
}

运行效果如图：

二、视频播放

1、核心入参

• src：视频资源路径
  • 本地 rawfile 视频：$rawfile('a.mp4')
  • 网络视频：填视频 url 字符串
• previewUri：播放前封面图，$r('app.media.e') 引入媒体图片资源
• controller：VideoController 控制器对象，操控播放、暂停、进度

2、常用属性

• autoPlay(false)：页面加载不自动播放
• loop(true)：循环播放
• muted(true)：静音
• controls(true)：显示系统播放控制栏（进度、暂停、音量）
• width/height：设置播放器尺寸
• borderRadius：圆角美化

3、代码

@Entry
@Component
struct Index {
  private videoSrc: Resource = $rawfile('a.mp4')
  private pict:Resource = $r('app.media.e')
  private controller:VideoController = new VideoController()
  //private videoStr: string='https://v.douyin.com/LnYndhfGQt0/';
  build() {
    Column({space:50}) {
      Text("鸿蒙应用开发视频资源")
        .fontSize(24)
        .fontWeight(FontWeight.Bolder)
        .width('100%')
        .textAlign(TextAlign.Center)

      Video({
        //src用来设置视频资源
        src: this.videoSrc,
        previewUri:this.pict,
        controller:this.controller
      })
        .height('45%')
        .width('90%')
        .muted(true)
        .loop(true)
        .autoPlay(false)
        .controls(true)
        .borderRadius(10)


      Button('开始学习')
        .height(50)
        .width(150)
        .backgroundColor(Color.Blue)
        .border({width:5,color:Color.Brown})
        .fontColor(Color.Red)
        .fontSize(26)
        .borderRadius(35)
      /*Video({
        //src用来设置视频资源
        src: this.videoStr
      })
        .height('50%')*/
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

视频在此插入

其中 此代码运行的结果在预览器并不完全展示

此时 打开顶部工具栏中的工具，点击工具中的设备管理器，运行设备

需要注意的是，实现视频在设备中播放的前提要在如图项目位置打开module.json5，在里面输入代码：

"requestPermissions": [
 {
 "name": "ohos.permission.INTERNET"
 }
],

告知鸿蒙系统需要联网（请求接口、加载网络图片、访问服务器等）。

点击右上角执行，设备则会自主弹出所运行画面效果如图(其中代码我加了封面)