一、布局5 种布局通用规则单个页面只能有 1 个根布局根布局内可嵌套其他布局1. 垂直布局 Column作用内部组件从上到下垂直排列space统一设置组件上下间距登录、表单页面首选根布局Entry Component struct ColumnDemo { build() { // 根布局垂直布局子组件间距25 Column({ space: 25 }) { Text(用户登录) .fontSize(32) .fontWeight(FontWeight.Bold) TextInput({}) .width(90%) .height(50) Button(登录按钮) .width(90%) .height(50) } // 根布局铺满全屏 .width(100%) .height(100%) .padding(15) } }文字解析Column({space:25})创建垂直容器容器内所有相邻组件自动留出 25vp 空隙大括号内的Text、TextInput、Button会按照书写顺序从上往下依次摆放.width(100%).height(100%)是根布局必填属性否则布局只会自适应内容高度无法铺满手机屏幕.padding(15)让布局内部四周留白避免内容紧贴屏幕边缘。注意点一个页面只能存在 1 个根布局不能并列写多个 Columnspace仅控制组件之间的间距组件和容器边框的距离需要padding/margin实现想要内容整体居中添加.justifyContent(FlexAlign.Center)。2. 水平布局 Row作用内部组件从左到右横向排列用来实现一行内文字 输入框、图标 文字必须嵌套在 Column 根布局内部。Column({ space: 25 }) { // 水平布局内部组件左右间距15 Row({ space: 15 }) { Text(账号) .fontSize(26) .width(30%) TextInput({ text: this.username }) .width(70%) .height(50) } } .width(100%) .height(100%) .padding(15)文字解析Row({space:15})开启水平排列左右两个元素中间间隔 15 像素Text占整行 30% 宽度TextInput占 70%实现账号输入单行排版。注意点Row 默认不会自动换行子组件总宽度超出屏幕会直接被截断需要换行请使用弹性布局 Flex默认文字会垂直拉伸添加.alignItems(ItemAlign.Center)实现文字与输入框垂直居中。3. 相对布局 RelativeContainer作用通过设置组件相对位置左、右、上、下、居中实现自由定位适合悬浮按钮、标签定位场景。RelativeContainer() { Text(顶部文字) .fontSize(24) .alignRules({ top: { anchor: __container__, align: VerticalAlign.Top }, centerX: { anchor: __container__, align: HorizontalAlign.Center } }) Button(悬浮按钮) .width(120) .height(50) .alignRules({ right: { anchor: __container__, align: HorizontalAlign.Right, offset: -20 }, bottom: { anchor: __container__, align: VerticalAlign.Bottom, offset: -30 } }) } .width(100%) .height(100%)文字解析RelativeContainer是相对布局容器__container__代表父容器本身alignRules配置定位规则top/right/bottom/left控制四边位置offset设置偏移距离。注意点所有子组件必须配置alignRules否则会全部堆叠在左上角适合少量悬浮元素定位复杂表单页面优先使用 ColumnRow。4. 层叠布局 Stack作用内部组件重叠堆叠后编写的组件覆盖在上方适合双层圆形按钮、图片叠加文字、遮罩弹窗。Stack() { // 底层红色外圈先写层级靠下 Column() .width(260) .height(260) .backgroundColor(0xff0000) .borderRadius(999) // 上层黄色内圆文字后写覆盖在上层 Column() { Text(开始) .fontSize(60) .fontColor(Color.White) } .width(180) .height(180) .backgroundColor(0xffff00) .borderRadius(999) .justifyContent(FlexAlign.Center) } .width(260) .height(260)文字解析Stack 容器内所有组件默认居中重叠摆放底层宽高 260上层宽高 180留出红色圆环间隙borderRadius(999)实现正圆justifyContent(FlexAlign.Center)让 “开始” 文字在黄色圆内水平、垂直双居中。注意点堆叠顺序代码书写越靠后的组件层级越高会盖住前面的组件做圆形必须保证width和height数值完全相等圆角才能生效嵌套层级不要超过 3 层避免页面渲染卡顿。5. 弹性布局 Flex作用Row/Column 进阶布局支持横向 / 纵向排列、内容超出自动换行、子元素按比例分配宽度常用于标签流、自适应按钮组。Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) { Text(标签1) .padding(8) .margin(8) .backgroundColor(0xF5F5F5) Text(超长文本测试标签) .padding(8) .margin(8) .backgroundColor(0xF5F5F5) Text(标签3) .padding(8) .margin(8) .backgroundColor(0xF5F5F5) } .width(100%) .padding(10)文字解析direction: FlexDirection.Row设置水平排列改为Column则垂直弹性布局wrap: FlexWrap.Wrap核心特性一行放不下自动换到下一行普通 Row 不具备该功能子组件添加.flexGrow(1)可以让多个组件自动平分容器剩余宽度。注意点仅适合一维流式布局规则九宫格优先使用 Grid 网格布局自动换行后行与行之间无法通过space设置间距只能靠子组件marginBottom控制。二、组件大纲全部 8 类组件代码 解析 注意点1. 图片 ImageImage($r(app.media.back)) .width(120) .height(120) .borderRadius(60)解析$r(app.media.图片名)读取项目 media 文件夹内本地图片宽高 120、圆角 60 实现圆形头像。注意点图片文件名写错、media 无对应图片运行直接资源报错必须同时设置 width 和 height否则图片拉伸变形。2. 文本 / 输入框 Text / TextInputState username:string // 静态文本 Text(账号) .fontSize(26) // 输入框双向绑定变量 TextInput({ text: this.username }) .width(70%) .height(50) .backgroundColor(0xF5F5F5) .onChange((value:string){ this.username value }) // 密码输入框 TextInput({ text: this.password }) .type(InputType.Password)解析Text 展示静态文字fontSize/fontColor/fontWeight控制文字样式TextInput 接收用户输入onChange监听输入内容实时同步给 State 变量实现双向绑定type(InputType.Password)开启密码隐藏模式。注意点使用InputType.Password必须顶部导入import InputType from ohos.textfield;输入框默认无背景建议添加backgroundColor、borderRadius美化。3. 按钮 ButtonButton(立 即 登 录) .width(100%) .height(50) .fontSize(24) .backgroundColor(0x0088ff) .fontColor(Color.White) .borderRadius(99) .onClick((){ console.info(点击登录按钮) })解析括号内为按钮文字onClick绑定点击事件点击后执行内部代码。注意点不设置backgroundColor会使用系统默认灰色自定义蓝色圆角按钮视觉更统一。4. 单选框 Radio RadioGroupRadioGroup({ group: sexGroup }) { Radio({ value: 男, group: sexGroup }) .width(30) Text(男) Radio({ value: 女, group: sexGroup }) .width(30) Text(女) }解析RadioGroup包裹同组单选框同一group名称的单选框互斥只能选中一个。注意点所有单选框group名称必须和外层 RadioGroup 一致否则无法互斥。5. Toggle 开关组件State isOpen:boolean false Toggle({ type: ToggleType.Switch, isOn: this.isOpen }) .width(60) .onChange((value:boolean){ this.isOpen value })解析开关组件isOn绑定布尔状态onChange监听开关切换状态。注意点必须搭配State布尔变量否则切换后页面不会刷新。6. 轮播图 SwiperSwiper() { Image($r(app.media.img1)).width(100%).height(180) Image($r(app.media.img2)).width(100%).height(180) Image($r(app.media.img3)).width(100%).height(180) } .width(100%) .height(180) .autoPlay(true) // 自动轮播 .loop(true) // 循环播放解析Swiper 内部放入多张 Image 实现轮播autoPlay自动滚动loop循环播放。注意点内部每张图片必须统一宽高否则轮播尺寸错乱。7. 视频 VideoVideo($r(app.media.video1)) .width(100%) .height(220) .autoPlay(false)解析加载本地视频资源autoPlay(false)禁止页面打开自动播放。注意点视频文件必须放入 media 文件夹格式需为系统支持的 mp4。8. 选项卡 Tabs TabContentTabs() { TabContent() { Text(首页内容) } .tabBar(Text(首页)) TabContent() { Text(我的页面) } .tabBar(Text(我的)) } .width(100%) .height(100%)解析多页面切换标签TabContent对应每一页内容tabBar设置底部标签文字。注意点至少需要 2 个 TabContent否则选项卡无切换效果。三、掌握知识State、弹窗、路由1. State 装饰器State username:string State isOpen:boolean false解析修饰变量为响应式数据变量值修改后页面所有绑定该变量的组件自动刷新用于输入框、开关、页面传参接收。注意点只能写在Entry/Component结构体内部不能写在函数、代码文件最外层变量必须赋初始值字符串、布尔false不能空定义。2. 弹窗 AlertDialog// 顶部必须导入模块 import AlertDialog from ohos.promptAction; AlertDialog.show({ title: 登录失败, message: 账号或密码不能为空请重新输入 })解析表单校验失败、操作异常时弹出提示框title弹窗标题message提示正文。注意点缺少导入语句会直接编译标红报错弹窗弹出后用户必须点击确认才能操作页面。3. 路由 router页面跳转 传参跳转页面代码登录页跳转首页import router from ohos.router; // 点击跳转并携带参数 router.pushUrl({ url: pages/HomePage, params: { username: this.username } })接收参数代码HomePage 页面onPageShow(): void { const params router.getParams() as Recordstring, string if(params){ this.username params.username } }解析router.pushUrl实现页面跳转url填写目标页面路径params携带传递的数据onPageShow是页面生命周期页面每次显示自动执行router.getParams()读取上一页传过来的参数。注意点所有页面必须在main_pages.json注册否则跳转提示页面不存在读取参数前加if(params)判断避免无参数时报错崩溃。四、事件onChange、onClick1. onClick 点击事件按钮、文字、图片点击Text(没有账号立即注册) .fontSize(22) .fontColor(0x1677ff) .onClick(() { router.pushUrl({ url: pages/zhuce2 }) }) Button(登录) .onClick((){ AlertDialog.show({title:提示,message:点击登录}) })解析绑定在可点击组件上手指点击组件时自动执行大括号内业务逻辑页面跳转、弹窗、表单校验。注意点无点击交互需求的静态 Text 不需要绑定 onClick减少性能消耗。2. onChange 内容变更事件输入框、开关、单选框TextInput({text:this.username}) .onChange((value:string){ this.username value }) Toggle({isOn:this.isOpen}) .onChange((value:boolean){ this.isOpen value })解析监听组件内容、状态发生变化时触发输入框输入文字、开关切换、单选框选中都会触发 onChange实时同步数据到 State 变量。注意点回调参数value是组件最新的值必须赋值给状态变量才能实现双向绑定。全局通用核心规则所有模块通用页面根布局规则每个 ets 页面有且仅有 1 个根布局根布局必须.width(100%).height(100%)铺满屏幕导入规则router、AlertDialog、InputType 等工具 / 类型必须在文件头部手动导入布局嵌套规范嵌套层级控制在 3 层以内多层嵌套会造成页面滑动卡顿适配规范优先使用百分比宽高减少固定像素数值适配不同尺寸手机。