一、轮播图轮播图Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件当设置了多个子组件后可以对这些子组件进行轮播显示。通常在一些应用首页显示推荐的内容时需要用到轮播显示的能力。EntryComponentstruct SwiperDemo {build() {Column() {Swiper() {Text(0).backgroundColor(Color.Gray).fontSize(30)Text(1).backgroundColor(Color.Green).fontSize(30)Text(2).backgroundColor(Color.Orange).fontSize(30)Text(3).backgroundColor(Color.Pink).fontSize(30)}.width(100%).height(30%).autoPlay(true) //开启自动轮播true 开启false 关闭默认关闭.interval(2000) //设置时间2000毫秒ms.loop(true) //开启循环轮播true 循环false 到最后一页停止}}}二、视频Video组件用于播放视频文件并控制其播放状态常用于短视频和应用内部视频的列表页面。当视频完整出现时会自动播放用户点击视频区域则会暂停播放同时显示播放进度条通过拖动播放进度条指定视频播放到具体位置。代码演示Entry Component struct Index { private videoSrc:Resource $rawfile(aa.mp4) private pict:Resource$r(app.media.background) private controller:VideoController new VideoController() build() { Column(){ Video({ //src用来设置视频资源(本地的) src:this.videoSrc, //设置视频的封面 previewUri:this.pict, //控制器控制前进后退的按钮等 controller:this.controller }) .height(50%) .muted(true)//是否静音 .loop(true)//循环播放 .autoPlay(false) //自动播放 .controls(true) // 设置是否显示默认控制条 } .width(100%) .height(100%) } }三、图片开发者经常需要在应用中显示一些图片例如按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现Image支持多种图片格式包括png、jpg、jpeg等格式不支持apng和svga格式Entry Component struct imagess{ build() { Column({space:30}){ Text(鸿蒙应用开发实战课程) .fontSize(20) .textAlign(TextAlign.Center) Stack(){ Image($r(app.media.sky)) .width(320) .height(180) .borderRadius(15) .objectFit(ImageFit.Cover) } Column(){ Text(ArkUI实际应用开发课程) .fontSize(22) .fontColor(Color.White) .backgroundColor(0x550e00) .padding(10) .borderRadius(8) } Button(开始学习) .type(ButtonType.Capsule) } .width(100%) .height(100%) .padding({top:50}) } }四、选项卡Tabs组件的页面组成包含两个部分分别是TabContent和TabBar。TabContent是内容页TabBar是导航页签栏页面结构如下图所示根据不同的导航类型布局会有区别可以分为底部导航、顶部导航、侧边导航其导航栏分别位于底部、顶部和侧边。代码演示Entry Component struct fhsd{ private bannerList: Resource[] [ $r(app.media.t), $r(app.media.s), $r(app.media.sky) ] build() { Tabs(){ TabContent(){ Column(){ Row(){ Text(欢迎来到河北软件职业技术学院).fontSize(25) } .width(100%) .height(33.3%) Row(){Swiper() { ForEach(this.bannerList, (item: Resource) { Image(item) .width(100%) .height(100%) .objectFit(ImageFit.Cover) }, (item: Resource, index: number) index.toString()) } .width(100%) .height(100%) .autoPlay(true) .interval(2000) .loop(true) } .width(100%) .height(33.3%) Row(){ Text(河北软件职业技术学院是河北省公办全日制高职2003 年建校、办学溯源至 1972 年坐落于保定隶属省教育厅为省内首家独立建制、以信息技术ICT 为核心的公办高职是国家 “双高计划” 建设单位、国家优质专科、国家示范性软件职业技术学院河北软件职业技术学院) } .width(100%) .height(33.3%) } .width(100%) .height(100%) } .tabBar(学校简介) TabContent(){ Column(){ Row(){ Text(欢迎来到计算机应用工程系).fontSize(25) } .width(100%) .height(33.3%) Row(){} .width(100%) .height(33.3%) Row(){ Text(计算机应用工程系成立于 2002 年是学院重点系部、河北省云计算与 IDC 人才培养核心基地在校生 2000 余人河北软件职业技术学院。立足京津冀聚焦云计算、信息安全、区块链等新一代信息技术办学实力与就业质量位居省内同类院校前列河北软件职业技术学院。) } .width(100%) .height(33.3%) } .width(100%) .height(100%) } .tabBar(系部简介) TabContent(){ Column(){ Row(){ Text(欢迎来到计算机应用技术2024-04班).fontSize(22) } .width(100%) .height(33.3%) Row(){} .width(100%) .height(33.3%) Row(){ Text(专业介绍计算机应用技术老牌优势专业AI 运维方向河北软件职业技术学院) } .width(100%) .height(33.3%) } .width(100%) .height(100%) } .tabBar(班级介绍) TabContent(){ Text(杭1905年生已有121岁高龄乃国家特级保护动物伤害保护动物将受到3年以上5年以下有期徒刑) .fontSize(24) .backgroundColor(Color.Pink) } .tabBar(个人中心) } .barPosition(BarPosition.Start) } }五、文本/输入框TextInput、TextArea是输入框组件用于响应用户输入比如评论区的输入、聊天框的输入、表格的输入等也可以结合其它组件构建功能页面例如登录注册页面代码演示 Entry Component struct zhuce{ build() { Column({space:30}){ Text(注册账户) .fontSize(32).fontWeight(FontWeight.Bolder).margin({top:20,bottom:10}) TextInput({placeholder:请输入手机号或邮箱}) .width(320) .height(52) .borderRadius(12) .fontSize(16) TextInput({placeholder:请输入密码}) .type(InputType.Password) .width(320) .height(52) .borderRadius(12) .fontSize(16) TextInput({placeholder:请再次输入密码}) .type(InputType.Password) .width(320) .height(52) .borderRadius(12) .fontSize(16) Button(立即注册) .width(320) .height(52) .backgroundColor(0x007dff) .fontSize(16) .borderRadius(12) } .backgroundColor(0xf8f8f8) .height(100%) .width(100%) .justifyContent(FlexAlign.Center) } }六、按钮Button是按钮组件通常用于响应用户的点击操作其类型包括胶囊按钮、圆形按钮、普通按钮、圆角矩形按钮。Button作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮代码演示Entry Component struct bu{ build() { Column({space:20}){ Button(确认提交) .height(50) .width(150) .fontSize(26) .borderRadius(35) Button(取消操作) . height (50) . backgroundColor (0x999999) .width(150) . fontSize (26) .borderRadius(35) Button(确认删除) . height (50) .width(150) .backgroundColor(0xf53f3f) . fontSize (26) .borderRadius (35) Button (登录) . height(50) .width(150) . backgroundColor (Color. Transparent) . fontColor(Color.Black) .border( {width: 7, color:0x007DFF} ) . fontSize(26) . borderRadius (35) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } }七、单选框Radio是单选框组件通常用于提供相应的用户交互选择项同一组的Radio中只有一个可以被选中。代码演示Entry Component struct radio{ build(){ Column({space:30}){ Text(个人信息采集页面) .fontSize(30) .fontWeight(FontWeight.Bold) .textAlign(TextAlign.Center) .width(100%) Row(){ Text(姓名) .fontSize(24) TextInput() .width(200) .height(50) }.padding({left:30}) Row(){ Text(性别) .fontSize(24) Radio({value:男,group:sex}) .checked(false) .height(30) .width(30) Text(男) .fontSize(20) .margin({right:30}) Radio({value:女,group:sex}) .checked(false) .height(30) .width(30) Text(女) .fontSize(20) }.padding({left:30}) Row(){ Text(年龄) .fontSize(24) TextInput() .width(200) .height(50) }.padding({left:30}) Row(){ Text(学历) .fontSize(24) Radio({value:专科,group:edu}) .checked(false) .height(30) .width(30) Text(专科) .fontSize(20) .margin({right:30}) Radio({value:本科,group:edu}) .checked(false) .height(30) .width(30) Text(本科) .fontSize(20) }.padding({left:35}) Button(提交信息) .width(50%) .height(50) .fontSize(24) .margin({left:85}) } .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Start) .backgroundColor(0xf4f4f4) .width(100%) .height(100%) } }八、切换按钮Toggle组件提供状态按钮样式、勾选框样式和开关样式一般用于两种状态之间的切换。代码演示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.Red).id(n1)}.width(100%).height(100%)}}