OpenHarmony ArkUI 七大布局

目录前言一、ArkUI 页面三要素二、七大布局组件详解 代码示例Column 垂直布局Row 水平布局Stack 层叠布局Flex 弹性布局RelativeContainer 相对布局Swiper 轮播布局Tabs 标签页布局七大布局组件1 Column垂直布局功能子组件自上而下纵向依次排列标准竖向容器。适用个人中心、表单、竖向列表etsColumn(){ Text(第一行文本).fontSize(24) Text(第二行文本).fontSize(24) }.width(100%)2 Row水平布局功能子组件从左向右横向排列标准横向容器。适用顶部导航、并排按钮、行内图文etsRow(){ Button(左侧按钮) Button(右侧按钮) }.width(100%)3 Stack层叠布局功能子组件同一坐标堆叠后声明控件层级在上实现图层覆盖。适用图片加文字浮层、头像角标、悬浮控件etsStack(){ Image($r(sys.media.test_bg)) Text(悬浮文字).fontColor(Color.White) }.width(200).height(200)4 Flex弹性布局功能可横向 / 纵向切换通过flexGrow实现控件自适应占比流式自适应。适用等分多列卡片、自适应按钮栏etsFlex({wrap:FlexWrap.NoWrap}){ Text(模块1).flexGrow(1) Text(模块2).flexGrow(1) Text(模块3).flexGrow(1) }.width(100%)5 RelativeContainer相对布局功能依靠id alignRules锚定其他控件位置控件互相参照排版。适用复杂不规则页面、多控件错位排版etsRelativeContainer(){ Text(标题).id(title) .alignRules({top:{anchor:__container__,align:VerticalAlign.Top}}) Text(黄色区块).backgroundColor(Color.Yellow).width(150).height(150) .alignRules({top:{anchor:title,align:VerticalAlign.Bottom}}) }.width(100%).height(300)6 Swiper轮播布局功能手势左右滑动 自动轮播切换页面常用 Banner。适用首页广告轮播、图片走马灯etsSwiper(){ Image($r(sys.media.img1)) Image($r(sys.media.img2)) }.autoPlay(true).index(0)7 Tabs标签页布局功能底部 / 顶部标签栏点击标签切换对应页面移动端主流底部导航。适用APP 首页底栏首页 / 推荐 / 我的、分类标签etsTabs(){ TabContent(){Text(首页内容)}.tabBar(首页) TabContent(){Text(推荐内容)}.tabBar(推荐) TabContent(){Text(我的内容)}.tabBar(我的) }二、布局快速选型总结表格业务场景首选布局竖向从上到下排版Column横向从左到右排版Row图片 浮层文字叠加Stack自适应等分多栏Flex控件互相错位参照RelativeContainerBanner 自动轮播Swiper底部导航多页面切换Tabs