ArkUI 轮播图，选项卡，视频，图片组件全解 1

一、Swiper轮播图轮播组件专门实现图片 / 页面自动轮播、左右滑动切换核心属性index默认显示第几个页面loop是否循环轮播autoPlay是否自动播放interval自动播放间隔时间毫秒案例Entry Component struct SwiperDemo2{ private bannerList:Resource[] [ $r(app.media.forth), $r(app.media.fifth), $r(app.media.sixth), ] build() { Column(){ Swiper(){ ForEach(this.bannerList,(item:Resource){ Image(item) .width(98%) .height(100%) .objectFit(ImageFit.Cover) .borderRadius(20) }) } .width(100%) .height(30%) .autoPlay(true) //自动播放 .interval(2000) //自动播放间隔 .loop(true) //是否循环播放 } } }展示二、Tabs选项卡实现顶部 / 底部标签栏 对应内容切换点击标签切换不同页面核心属性barPosition标签栏位置顶部 / 底部案例Entry Component struct TabsBase1{ private bannerList:Resource[] [ $r(app.media.forth), $r(app.media.fifth), $r(app.media.sixth), ] build() { Column() { Swiper() { ForEach(this.bannerList, (item: Resource) { Image(item) .width(98%) .height(100%) .objectFit(ImageFit.Cover) .borderRadius(20) }) } .width(100%) .height(30%) .autoPlay(true) //自动播放 .interval(1000) //自动播放间隔 .loop(true) //是否循环播放 Tabs() { TabContent() { Text(首页页面) .fontSize(24) } .tabBar(首页) TabContent() { Text(分类页面) .fontSize(24) } .tabBar(分类) TabContent() { Text(个人中心页面) .fontSize(24) } .tabBar(个人中心) TabContent() { Text(关于我们页面) .fontSize(24) } .tabBar(关于我们) } .barPosition(BarPosition.Start) } } }展示三、Video视频课程教学视频、商品介绍短视频、首页宣传视频、本地视频预览等页面。核心属性width播放器宽度支持固定数值 / 百分比height播放器高度必须设置否则视频无法渲染muted是否静音播放true 静音false 正常出声loop是否循环播放true 播放完成自动重播autoPlay页面加载后是否自动播放视频controls是否显示系统自带播放控制条进度、暂停、音量案例import UIExtensionContentSession from ohos.app.ability.UIExtensionContentSession; Entry Component struct Index { private videoSrc:Resource $rawfile(first.mp4) private pict:Resource $r(app.media.fifth) private controller:VideoController new VideoController() // private videoStr:stringhttp://www.w3school.com.cn/example/html5/mov_bbb.mp4; build() { Column(){ Text(鸿蒙应用开发视频资源) .fontSize(30) .fontWeight(FontWeight.Bold) Video({ src:this.videoSrc, //设置视频本地资源 previewUri:this.pict, //视频封面 controller:this.controller //控制器控制前进后退的按钮 }) .height(50%) .width(90%) .muted(true) //是否静音 .loop(true) // 循环播放 .autoPlay(false) //自动播放 .controls(true) //是否显示默认控制条 /* Video({ src:this.videoStr }) .height(50%) */ Button(开始学习) .width(150) .height(50) .fontSize(20) .backgroundColor(0xFF6B798E) .border({width:5, radius:10,color:0xFF3A506B}) } .width(100%) .height(100%) .justifyContent(FlexAlign.SpaceEvenly) } }展示四、Image图片渲染展示本地 / 网络图片资源支持设置圆角、填充适配、尺寸、对齐等样式用于页面图文内容展示。核心属性borderRadius设置图片圆角圆形头像宽高相等时设置一半数值即可objectFit图片填充适配模式常用 ImageFit.Cover 等 5 种填充规则案例Entry Component struct ImageDemo1{ build() { Column({space:20}){ Text(欢迎来到鸿蒙应用开发) .fontSize(30) .fontWeight(FontWeight.Bolder) .width(100%) .textAlign(TextAlign.Center) .padding(20) Image($r(app.media.forth)) .width(90%) .height(200) .borderRadius(15) .objectFit(ImageFit.Cover) //cover是等比例缩放铺满页面多余部分裁掉 Row(){ Column(){ Text(鸿蒙应用开发) .fontSize(22) .width(45%) .textAlign(TextAlign.Center) Text(ArkUI实战开发) .fontSize(20) .width(45%) .textAlign(TextAlign.Center) } Image($r(app.media.fifth)) .width(50%) } } .width(100%) .height(100%) } }展示