组件布局是页面的骨架组件就是页面的血肉常用基础组件如下1. 轮播图SwiperSwiper是鸿蒙提供的原生轮播组件专门用来做首页banner轮播、图片漫游等需要滑动切换的场景支持自动播放、循环滚动、自定义指示器。属性autoPlay是否自动轮播布尔值loop是否循环滚动布尔值interval自动轮播的切换间隔单位毫秒indicator是否显示指示点布尔值代码示例EntryComponentstruct SwiperDemo {build() {Swiper() {Image($r(app.media.banner1)) // 第一张轮播图.width(100%).height(200).objectFit(ImageFit.Cover)Image($r(app.media.banner2)) // 第二张轮播图.width(100%).height(200).objectFit(ImageFit.Cover)Image($r(app.media.banner3)) // 第三张轮播图.width(100%).height(200).objectFit(ImageFit.Cover)}.autoPlay(true).loop(true).interval(3000).indicator(true).width(100%).height(200).margin(15)}}Swiper图片轮播示例运行效果图需要准备对应banner图片资源视频VideoVideo是原生视频播放组件支持播放本地、网络视频自带控制栏也可以通过控制器自定义控制播放、暂停、进度跳转。属性src指定视频源本地视频用$rawfile(视频文件名.mp4)读取资源文件网络视频直接填urlcontroller创建一个VideoController对象来控制视频播放代码示例import video fromohos.multimedia.video;EntryComponentstruct VideoDemo {privatecontroller: video.VideoController new video.VideoController();build() {Column() {Video({src: $rawfile(1.mp4),controller: this.controller}).width(100%).height(250).controls(true) // 显示默认控制栏}}}Video视频播放界面运行效果图3. 图片ImageImage用来展示本地或网络图片鸿蒙中读取本地资源一般通过$r(app.media.图片名)的语法引用。属性‌objectFit设置图片的缩放模式ImageFit.Cover按比例铺满容器、ImageFit.Contain完整显示整个图片代码示例// 加载本地资源图片Image($r(app.media.avatar)).width(80).height(80).borderRadius(40) // 设置圆角实现圆形头像.objectFit(ImageFit.Cover)// 加载网络图片Image(https://example.com/demo.jpg).width(100%).height(200)个人信息页图片展示效果图4. 选项卡TabsTabContentTabs是底部/顶部选项卡容器搭配TabContent实现多页面切换是很多App首页框架的标配。属性barPosition设置标签栏位置BarPosition.End放在底部BarPosition.Start放在顶部每个TabContent对应一个选项卡页面通过tabBar设置选项卡标题和样式代码示例EntryComponentstruct TabsDemo {StatecurrentIndex: number 0;build() {Tabs({ barPosition: BarPosition.End }) {TabContent() {// 首页内容写在这里Text(首页内容)}.tabBar(首页)TabContent() {// 推荐内容写在这里Text(推荐内容)}.tabBar(推荐)TabContent() {// 我的内容写在这里Text(我的内容)}.tabBar(我的)}.width(100%).height(100%)}}多标签App框架运行效果图5. 文本/输入框TextTextInputText展示静态文本支持设置丰富的字体样式、背景、边框、间距TextInput单行文本输入框是表单收集信息的核心组件支持设置输入类型普通/密码、占位提示属性placeholder未输入时的占位提示文字type输入类型InputType.Password代表密码输入会隐藏内容onChange输入内容变化时触发回调可以拿到最新输入内容代码示例EntryComponentstruct FormDemo {Stateusername: string ;Statepassword: string ;build() {Column({ space: 15 }) {Text(账号).fontSize(16).width(100%)TextInput({ placeholder: 请输入账号, text: this.username }).width(100%).height(40).onChange((val) {this.username val; // 输入内容变化同步到状态变量})Text(密码).fontSize(16).width(100%)TextInput({ placeholder: 请输入密码, text: this.password }).width(100%).height(40).type(InputType.Password).onChange((val) {this.password val;})}.padding(15)}}登录注册表单输入框运行效果图6. 按钮Button按钮是最核心的交互组件用户点击后触发对应的操作支持设置按钮样式、圆角、背景色。代码示例// 普通按钮Button(登录).width(90%).height(45).fontSize(16).backgroundColor(#007dff).borderRadius(8).onClick(() {// 点击后执行的逻辑写在这里console.log(用户点击了登录按钮);})多种样式按钮示例运行效果图7. 单选框Radio单选框用于‌多选一‌的场景同一个分组内的单选框只能选中一个所有单选框必须设置同一个group分组名。每个Radio绑定一个value通过onChange回调判断是否选中当前选项。代码示例EntryComponentstruct RadioDemo {Stategender: string male;build() {Row({ space: 30 }) {Text(性别)Row({ space: 8 }) {Radio({ value: male, group: gender }).checked(this.gender male).onChange(() {this.gender male})Text(男)}Row({ space: 8 }) {Radio({ value: female, group: gender }).checked(this.gender female).onChange(() {this.gender female})Text(女)}}.alignItems(VerticalAlign.Center)}}表单单选框选项运行效果图8. 切换组件ToggleToggle是切换类组件分为两种类型ToggleType.Switch滑动开关用于开/关功能切换、ToggleType.Checkbox复选框用于多选场景支持状态联动切换状态时可以自动更新UI。isOn绑定状态变量表示开关是否打开onChange回调接收最新的开关状态更新到状态变量中代码示例EntryComponentstruct ToggleDemo {Stateopen: boolean false;build() {Column({ space: 15 }) {Text(this.open ? 夜间模式已开启 : 夜间模式已关闭).fontSize(18).fontColor(this.open ? Color.White : Color.Black)Toggle({ type: ToggleType.Switch, isOn: this.open }).onChange((value: boolean) {this.open value; // 状态变化同步到变量自动刷新UI})}.width(100%).height(100%).backgroundColor(this.open ? Color.Black : Color.White).padding(15)}}Toggle开关联动背景色示例运行效果图三、掌握知识除了布局和组件还需要掌握这几个核心开发知识才能实现完整可交互的功能1.State状态管理State是ArkTS最基础的状态装饰器被State装饰的变量是‌响应式状态变量‌——当变量值发生改变时所有用到这个变量的UI会自动刷新这是ArkUI实现交互的核心基础。只能在Component装饰的组件内定义支持所有基本类型string/number/boolean等和对象、数组状态改变后UI自动更新不需要手动操作DOM代码示例EntryComponentstruct StateDemo {// 定义响应式状态变量StateinputContent: string ;StateswitchStatus: boolean false;build() {Column({ space: 20 }) {// 状态变量直接用在UI中变量变化UI自动变Text(输入内容${this.inputContent}).fontSize(18)TextInput({ placeholder: 请输入内容, text: this.inputContent }).onChange((val) {// 修改状态变量UI自动刷新this.inputContent val;})Toggle({ type: ToggleType.Switch, isOn: this.switchStatus }).onChange((val) {this.switchStatus val;})}.padding(15)}}在登录、注册、计算器这些需要动态更新界面的场景都需要用State来管理数据这是ArkTS声明式开发最核心的思想——‌数据驱动视图‌。2. 弹窗AlertDialogAlertDialog是系统原生弹窗一般用来给用户展示提示信息或者让用户做确认操作在操作完成比如登录成功/失败、注册完成后非常常用。代码示例// 在按钮点击事件中弹出弹窗Button(登录).onClick(() {if (this.username admin this.password 123456) {// 登录成功弹窗AlertDialog.show({title: 登录成功,message: 欢迎回来admin,confirm: {value: 确定,action: () {console.log(用户点击确认);}}})} else {// 登录失败弹窗AlertDialog.show({title: 登录失败,message: 账号或密码错误请重新输入,confirm: {value: 确定,action: () {}}})}})登录结果弹窗运行效果图3. 路由router路由用来实现‌多页面跳转和参数传递‌一个应用一般会包含多个页面通过路由管理页面的跳转、回退和数据传递。首先要导入路由模块import router from ohos.router;跳转router.pushUrl({ url: pages/页面名, params: { 参数key: 参数值 } })接收参数在目标页面的onPageShow生命周期中通过router.getParams()获取参数所有需要跳转的页面必须在项目根目录的main_pages.json中注册否则无法跳转代码示例// 1. 注册页点击提交后跳转登录页并传递注册信息import router fromohos.router;EntryComponentstruct RegisterPage {Stateusername: string ;Statepassword: string ;build() {// 省略表单代码...Button(注册并登录).onClick(() {router.pushUrl({url: pages/LoginPage,params: {account: this.username,pwd: this.password}})})}}代码示例// 2. 登录页接收注册页传递的参数import router fromohos.router;EntryComponentstruct LoginPage {Stateaccount: string ;onPageShow() {// 页面显示时获取传递过来的参数const params router.getParams() asany;if (params.account) {this.account params.account;}}build() {// 省略登录表单代码...}}‌注意‌ 必须在这里把所有页面路径添加到src数组中路由才能正常跳转例如json文件示例{src:[pages/Index,pages/RegisterPage,pages/LoginPage]}页面跳转流程图四、事件事件是用户和应用交互的桥梁ArkTS中最常用的两类事件是输入变化事件和点击事件1.onChange(() { })变化事件当组件的值发生改变时触发一般用于‌输入框输入内容变化‌、‌开关状态切换‌、‌滑块值变化‌这类场景可以拿到最新的值同步给State变量让UI自动更新。代码示例// 场景1TextInput输入内容变化Stateusername: string ;TextInput({text: this.username}).onChange((newValue: string) {// 输入内容改变更新状态变量UI自动刷新显示最新内容this.username newValue;console.log(当前输入内容 this.username);})// 场景2Toggle状态变化StateswitchOpen: boolean false;Toggle({type: ToggleType.Switch, isOn: this.switchOpen}).onChange((newStatus: boolean) {// 开关状态改变更新状态变量UI中依赖这个状态的部分自动刷新this.switchOpen newStatus;})图片示例2.onClick(() { })点击事件当用户点击组件时触发是最常用的交互事件几乎所有可点击的元素按钮、文本、图片、卡片等都可以绑定点击事件点击后执行对应的业务逻辑比如提交表单、跳转页面、计算结果、弹出弹窗等。代码示例// 场景1按钮点击提交登录Button(登录).onClick(() {// 点击后做验证、弹窗、跳转等逻辑if (this.username.length 0 this.password.length 0) {this.doLogin();} else {AlertDialog.show({title: 提示, message: 请输入账号密码, confirm: {value: 确定, action: () {}}})}})// 场景2文本点击跳转注册页Text(没有账号去注册).fontColor(#007dff).onClick(() {router.pushUrl({url: pages/RegisterPage});})图片示例总结一、布局规则所有页面都遵循 ‌一个根布局支持任意嵌套子布局‌ 的规则不同场景选择对应布局做垂直排列的列表/表单 → 选Column做水平排列的导航/按钮组 → 选Row做自定义组件相对定位 → 选RelativeContainer做元素堆叠/悬浮效果 → 选Stack做流式自动换行的标签/网格 → 选Flex二、常用组件不同功能场景对应使用对应原生组件开发效率更高场景需求使用组件首页Banner自动轮播Swiper播放本地/网络视频Video展示本地/网络图片Image展示静态文字Text表单输入内容TextInput用户点击交互Button表单多选一场景Radio开关切换/多选勾选Toggle三、核心开发知识这三个知识点是实现完整交互功能的核心必须掌握‌State状态管理‌被State修饰的变量是响应式变量变量改变UI自动刷新是「数据驱动视图」的核心基础‌弹窗提示‌用AlertDialog.show()弹出系统原生弹窗适合做操作结果提示、二次确认‌页面路由‌通过router.pushUrl()实现多页面跳转还可以通过params传递参数跳转前必须在main_pages.json注册所有页面​