当前位置： 首页 > news >正文

ArkUI组件

news 2026/6/23 12:50:22

一、轮播图

轮播图（Swiper）组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。

@Entry
@Component
struct 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组件提供状态按钮样式、勾选框样式和开关样式，一般用于两种状态之间的切换。

代码演示：

@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.Red)
.id('n1')
}
.width('100%')
.height('100%')
}
}

http://www.jsqmd.com/news/1067428/

相关文章：

  • 别再两眼一抹黑了：打破四大平行宇宙，看透 git add 的“多重人格”
  • 2026年天津高考志愿填报须知（二）
  • 私有化部署音视频系统EasyDSS，构建校园专属一体化融媒体视频服务平台
  • 深圳口碑好的饭堂承包服务商
  • 自助终端触摸显示一体机选型指南：从场景需求到实战避坑
  • 数字孪生项目案例 | 科技风工厂可视化
  • JAVA练习270-接雨水
  • Privado：开源数据流检测架构深度解析与合规性优化实践
  • 数字孪生管网末端执行单元：智能照明如何成为平台指令的最后一里
  • 喜讯！泰克尼康参编《宇航级民用食品安全要求》团体标准正式发布实施！
  • 超越参数迷思：AI时代的“数字镜像”与人类思想建设
  • Buzz：终极隐私保护的本地音频转录工具，完全离线运行！[特殊字符]️
  • 如何用SiYuan开源知识管理软件重构你的思考方式：完整使用指南
  • 柔性负荷调控：可中断负荷与需求响应技术
  • 解锁Windows远程桌面多用户连接的终极解决方案：RDP Wrapper配置详解
  • 防晒工作服衬衫
  • TDengine 时序数据库实战笔记（20260622）
  • 已抓取未编入索引处理 GSC：AI写的文章被嫌弃？3招二次优化教你抢救
  • 第03章｜分而治之：Sub-Agents 的核心概念与应用价值
  • ⑨番外篇II，FastLLM——老卡也能跑满血DeepSeek
  • AI+产业落地：从试点尝鲜到价值闭环的六大场景
  • 南宁儿童涂氟亲测2026年6月分享
  • 2048游戏模拟
  • 安全组网热门品牌推荐
  • .splat文件是什么？如何优化.splat文件实现流畅加载？
  • 法奥钟表零件自动组装，微米级精密对位，保障走时准确性
  • 中小运营商 5G 核心网建设方案
  • 收藏！AI大模型前端进阶指南：从效率提升到产品落地
  • LineX荣登欧洲权威机器视觉期刊《inspect》
  • 从连接到能源：解密DePIN如何通过密码学验证“真实工作”