按钮状态切换与视频播放

一、Toggle按钮状态1、toggle含义Toggle 是二态选择组件只有选中 / 未选中两种状态用来做开关、复选框、切换按钮。2、通用类 型ToggleType.Button按钮式切换点击切换高亮 / 普通两种按钮样式。3、通用属性width()/height()自定义控件大小id()组件唯一标识用于查询组件onChange(callback)状态切换触发回调获取最新布尔值4、代码EntryComponentstruct 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) 引入媒体图片资源controllerVideoController 控制器对象操控播放、暂停、进度2、常用属性autoPlay(false)页面加载不自动播放loop(true)循环播放muted(true)静音controls(true)显示系统播放控制栏进度、暂停、音量width/height设置播放器尺寸borderRadius圆角美化3、代码EntryComponentstruct Index {private videoSrc: Resource $rawfile(a.mp4)private pict:Resource $r(app.media.e)private controller:VideoController new VideoController()//private videoStr: stringhttps://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}],告知鸿蒙系统需要联网请求接口、加载网络图片、访问服务器等。点击右上角执行设备则会自主弹出所运行画面效果如图(其中代码我加了封面)一、Ark 的必要三要素Entry页面入口装饰器标记当前自定义组件为页面入口支持独立运行。Component组件装饰器用于定义自定义 UI 组件被标记的结构体可构建界面视图。build()组件构建方法所有布局内容必须写在该方法内部二、arkUI多种布局1. Column 垂直布局线性布局是开发中最常用的布局通过线性容器 Row和 Column构建。Column容器内子元素按照垂直方向排列。①常见属性• space统一设置子组件间距替代手动margin • justifyContent主轴垂直对齐含居顶/居中/居底/均分• alignItems交叉轴水平对齐含左/中/右对齐• width/height设置容器尺寸铺满屏幕是布局基础• backgroundColor设置背景色区分页面模块• padding设置容器内边距控制子组件与边缘距离• margin设置容器外边距控制与其他组件的距离②举例代码运行效果如图2.Row 水平布局线性布局LinearLayout是开发中最常用的布局通过线性容器 Row和 Column构建。Row容器内子元素按照水平方向排列子组件 从左至右依次排列 主轴为水平方向交叉轴为垂直方向。①常见属性• space设置子组件横向间距替代手动margin• justifyContent主轴水平对齐含居左/居中/居右/均分• alignItems交叉轴垂直对齐含居顶/居中/居底/拉伸• width/height设置容器尺寸铺满屏幕是布局基础• backgroundColor设置背景色区分页面模块②举例代码运行效果如图3.Stack层叠布局层叠布局StackLayout用于在屏幕上预留一块区域来显示组件中的元素提供元素可以重叠的布局。①常见属性• width/height设置容器尺寸铺满屏幕是布局基础• backgroundColor设置背景色区分页面模块• padding设置容器内边距控制子组件与边缘距离• margin设置容器外边距控制与其他组件的距离②举例代码运行效果如图4.Flex弹性布局弹性布局 Flex提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。①常见属性• justifyContent主轴对齐含居左/居中/居右/均分• alignItems交叉轴对齐含顶/中/底/拉伸填充• width/height设置容器尺寸铺满屏幕是布局基础• backgroundColor设置背景色区分页面模块• padding设置容器内边距控制子组件与边缘距离• margin设置容器外边距控制与其他组件的距离②举例代码运行效果如图5.相对布局RelativeContainer是一种采用相对布局的容器支持容器内部的子元素设置相对位置关系适用于处理界面复杂的场景对多个子元素进行对齐和排列。①常见属性• width/height设置容器尺寸铺满屏幕是布局基础• backgroundColor设置背景色区分页面模块• padding设置容器内边距控制子组件与边缘距离• margin设置容器外边距控制与其他组件的距离②举例代码运行效果如图6.轮播布局Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件当设置了多个子组件后可以对这些子组件进行轮播显示。①常见属性• index设置当前显示的轮播项索引• loop设置是否开启循环轮播• autoPlay设置是否自动播放轮播• interval设置自动轮播的切换间隔• width/height设置轮播容器尺寸适配不同页面• backgroundColor设置轮播背景色区分模块②举例代码运行效果如图其中如图引用部分需在图二处添加图片文件7.tabs标签页布局①常见属性• index设置当前激活的标签页索引• width/height设置Tabs容器尺寸适配页面布局• backgroundColor设置背景色区分不同模块②举例代码运行效果如图其中顶部标签点击后切换显示页面一、响应式状态装饰器 State1.基础意思State 是 ArkTS 核心响应式装饰器被它修饰的变量为响应式数据一旦数据发生变更页面上绑定该变量的 UI 会自动刷新无需手动更新界面。2.与私有变量private对比State 变量用于页面展示、用户输入交互。例登录页账号、密码输入框绑定State变量打字实时同步页面内容private 私有变量仅组件内部调用修改后不会自动刷新 UI。例视频页面存放视频地址、封面、播放控制器的变量。二、弹窗①弹窗是悬浮在页面顶层的交互面板会遮盖底层页面分为系统弹窗、自定义弹窗两种。系统弹窗框架自带无需手动搭建布局直接调用即可弹出样式固定、开发简单。包含提示弹窗、底部操作菜单、日期选择弹窗多用于简单提醒、单项选择比如注册失败弹出文字提示、点击头像弹出操作选项。自定义弹窗使用CustomDialog定义独立弹窗组件内部可自由搭配布局、输入框、按钮样式完全自定义支持页面与弹窗互相传递数据。适合复杂场景比如弹出完整登录表单、商品详情卡片。基础特性弹窗层级高于普通页面弹出时自带遮罩自定义弹窗通过 open () 唤起、close () 关闭。②举例(通过点击事件触发弹窗)其中如图为弹窗代码运行效果三、页面路由1.前置条件①使用路由功能前必须在页面顶部导入路由模块 import router from ohos.router否则跳转逻辑会报错。②所有要跳转的页面必须在项目配置文件 main_pages.json 中填写页面文件路径 否则跳转时会找不到页面位置如图2.跳转router.pushUrl () 打开新页面入栈功能跳转到目标页面系统会保存当前页面记录形成页面栈后续可以返回。代码场景注册页点击文字跳登录页LoginDemo(登录界面)LoginDemo1(注册界面)PageTwo(首页代码)三代码点击蓝字可跳转运行效果其中视频在工具中的设备管理器中可查看播放若需要携带参数跳转则需加入代码可携带参数到另一个页面四、两个交互事件1. onClick 点击事件①作用用户点击组件的瞬间触发预设逻辑是页面跳转、弹窗唤起、表单提交最常用交互。②适用组件按钮、文字、图片等任意可点击组件。③举例运行效果在路由中点击事件也十分常见2. onChange 值变更事件①作用组件内部内容、选中状态发生变化时自动触发实时监听用户输入 、选择行为。②适用组件输入框 、开关、滑块、下拉选择器。③举例(输入显示内容)运行效果