1. 项目概述从“画布”到“蓝图”的思维转变刚接触eTsExtended TypeScript开发时很多开发者包括我自己都容易陷入一个误区拿到一个UI设计稿就迫不及待地开始写组件、堆代码想着先把一个个按钮、文本框“画”出来。结果往往是界面元素虽然都摆上去了但屏幕尺寸一变或者设备一换布局就全乱了套要么挤成一团要么散落一地后期调整起来牵一发而动全身痛苦不堪。这背后的核心问题是把UI开发当成了“绘画”而不是“建筑”。绘画是在一张固定大小的画布上作画而建筑则需要一份严谨的蓝图来定义各个结构单元如墙体、门窗之间的空间关系。eTs的UI布局正是这份“蓝图”的绘制语言。它不关心你这个按钮具体是什么颜色、什么圆角那是样式和属性的范畴它关心的是这个按钮应该放在屏幕的哪个区域它和旁边的输入框是什么关系上下排列还是左右并排当屏幕宽度变化时按钮的宽度是固定不变还是按比例伸缩本次聚焦的“UI布局”就是eTs应用开发的骨架工程。它决定了应用界面的基本结构和自适应能力。无论你是开发一个简单的工具类应用还是一个复杂的商业应用布局都是你无法绕开的第一课。掌握它意味着你能从“被动实现”设计稿转变为“主动构建”具有弹性和可维护性的界面结构。对于初学者这是建立正确开发观的关键一步对于有一定经验的开发者深入理解布局原理能极大提升开发效率和代码质量。2. 核心布局思想与容器组件解析在eTs中布局不是通过直接设置组件的X、Y坐标来实现的虽然理论上可以但那是最不推荐的方式而是通过“容器组件”来承载和约束其内部的“子组件”。你可以把容器组件想象成一个个不同特性的“收纳盒”而布局就是决定如何把子组件内容物整齐地放入这些“收纳盒”的规则。2.1 线性布局Row与Column这是最直观、最常用的布局方式分别代表水平排列和垂直排列。Row行布局将其所有子组件在水平方向上一次排开。它有一个核心属性justifyContent用于决定子组件在主轴对Row来说就是水平方向上的对齐方式。常见值有FlexAlign.Start靠左对齐默认。FlexAlign.Center水平居中。FlexAlign.End靠右对齐。FlexAlign.SpaceBetween两端对齐子组件之间间距相等。FlexAlign.SpaceAround每个子组件左右两侧的间距相等视觉上组件之间的间隔是组件与边框间隔的两倍。Column列布局将其所有子组件在垂直方向上一次排开。它的主轴是垂直方向其justifyContent属性控制垂直方向的对齐如顶部、居中、底部对齐。同时它和Row共享alignItems属性用于控制子组件在交叉轴上的对齐方式对Column来说交叉轴是水平方向。实操心得很多新手会混淆justifyContent和alignItems。记住一个口诀“主轴对齐用justifyContent交叉轴对齐用alignItems”。在开发时我习惯先在脑海里画出主轴的方向再去设置对应的属性这样基本不会出错。2.2 弹性布局FlexFlex布局是eTs中功能最强大的布局模型Row和Column本质上都是Flex布局的特例分别设置了direction: FlexDirection.Row和FlexDirection.Column。直接使用Flex组件你可以通过direction属性自由切换主轴方向。Flex布局的精髓在于其子组件可以“伸缩”。通过给子组件设置layoutWeight属性可以实现在主轴上的尺寸按比例分配。例如在一个水平方向的Flex容器中两个子组件分别设置layoutWeight(1)和layoutWeight(2)那么它们将把容器主轴方向上的剩余空间在扣除固定宽高的组件后按1:2的比例分配。Flex({ direction: FlexDirection.Row }) { Text(左侧) .layoutWeight(1) // 占据1份空间 .backgroundColor(Color.Blue) Text(右侧) .layoutWeight(2) // 占据2份空间宽度是左侧的2倍 .backgroundColor(Color.Green) } .width(100%) .height(50)2.3 层叠布局StackStack布局允许子组件按照添加顺序层层堆叠后添加的组件会覆盖在先添加的组件之上。这非常适合实现浮层、徽章(Badge)、全屏弹窗等效果。Stack布局的关键在于对子组件使用绝对定位相关的属性如.position({ x: ‘10px’, y: ‘20px’ })。同时Stack容器本身也可以通过alignContent属性来设置子组件默认的对齐方式。Stack({ alignContent: Alignment.TopStart }) { Image($r(app.media.background)) // 底层背景图 .width(100%) .objectFit(ImageFit.Cover) Text(New) .fontSize(12) .padding(4) .backgroundColor(Color.Red) .position({ x: 80%, y: 5% }) // 右上角红色角标 } .width(100%) .height(200)2.4 相对布局RelativeContainer这是eTs中较为高级的一种布局方式它通过为每个子组件设定一系列约束规则相对于容器或其他子组件的位置关系来定位。它非常灵活能够实现复杂的、不规则网格状的布局但学习成本也相对较高。在RelativeContainer中你需要为每个子组件定义ID然后使用类似alignRules的规则来描述位置例如{ ‘left’: { ‘anchor’: ‘container’, ‘align’: HorizontalAlign.Start } }表示该组件左边缘与容器左边缘对齐。注意事项RelativeContainer虽然强大但规则设置繁琐且性能上通常不如Flex布局高效。除非布局需求非常复杂且无法用Flex嵌套实现否则建议优先使用Flex布局。过度使用RelativeContainer会使UI结构难以理解和维护。3. 布局属性深度解析与组合应用理解了核心容器我们还需要掌握修饰这些容器和子组件的关键布局属性。这些属性是构建精细蓝图的“尺规”。3.1 尺寸设置width、height与通用尺寸设置组件大小是最基础的操作。eTs支持多种单位固定数值.width(100)、.height(200)单位是vp虚拟像素与屏幕密度无关保证视觉大小一致。百分比.width(‘50%’)相对于父容器的尺寸。这是实现响应式布局的基石。‘auto’.width(‘auto’)组件根据自身内容如文本长度、图片原始尺寸自动计算大小。‘fitContent’在部分场景下行为类似‘auto’但更严格地包裹内容。一个核心技巧是组合使用例如一个搜索框你可能希望它的高度固定.height(40)但宽度占满父容器除按钮外的剩余空间。这时在Flex布局中给搜索框组件设置.width(‘100%’)并配合layoutWeight往往能解决问题。3.2 边距与内边距margin与padding这是控制组件“呼吸感”和间距的关键属性新手极易混淆。margin外边距定义组件边框之外的透明区域用于控制该组件与外部其他组件或容器边界的距离。它让组件“远离”周围元素。padding内边距定义组件内容与边框之间的区域用于控制组件内部内容如文字与组件边界的距离。它让内容在组件内部“呼吸”。例如一个按钮Button(‘点击’) .padding(20) // 按钮文字距离按钮边框四周各有20vp .margin({ top: 10, bottom: 10 }) // 这个按钮距离上方和下方的组件各有10vp设置backgroundColor后可以清晰看到padding区域是有背景色的属于按钮的一部分而margin区域是透明的。3.3 对齐方式justifyContent与alignItems的再探讨前面在Row/Column中简单提及这里深入一下。这两个属性是Flex布局模型的核心。justifyContent作用于容器决定子组件在主轴上的排列方式。当你需要子组件平均分布、靠边对齐时就使用它。alignItems作用于容器决定子组件在交叉轴上的对齐方式。当你需要所有子组件顶部对齐、居中对齐或底部对齐时就使用它。对于单个子组件如果你想在交叉轴上覆盖容器的alignItems设置可以使用alignSelf属性。例如容器设置了alignItems: FlexAlign.Center垂直居中但其中一个子组件想停留在顶部就可以对它单独设置.alignSelf(ItemAlign.Start)。3.4 布局实战实现一个常见的首页头部栏让我们用一个综合案例来串联以上知识。假设要实现一个典型的App首页头部左侧返回图标中间标题居中右侧搜索图标。错误示范使用绝对定位// 不推荐难以适配不同屏幕维护性差 Stack() { Image($r(app.media.back)).width(30).height(30).position({x:10, y:10}) Text(首页).fontSize(18).position({x:‘50%’, y:10}) // 居中计算复杂 Image($r(app.media.search)).width(30).height(30).position({right:10, y:10}) } .height(50) .width(100%)正确示范使用Flex布局Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 左侧区域 Image($r(app.media.back)) .width(30) .height(30) .margin({ left: 12 }) // 中间区域使用layoutWeight占满剩余空间并居中内容 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) { Text(首页) .fontSize(18) .fontWeight(FontWeight.Medium) } .layoutWeight(1) // 关键占据所有剩余水平空间 // 右侧区域 Image($r(app.media.search)) .width(30) .height(30) .margin({ right: 12 }) } .width(100%) .height(50) .backgroundColor(Color.White)这个方案的优势在于自适应无论屏幕多宽标题始终在视觉中间左右图标固定边距。清晰结构一目了然左中右三个区域。易维护要调整间距、大小或替换图标修改对应部分即可。4. 响应式布局与适配策略移动设备尺寸碎片化严重让你的布局能优雅地适应不同屏幕是必须考虑的问题。eTs提供了多种响应式手段。4.1 百分比与flex权重这是最基础的响应式策略。将容器的宽度设置为‘100%’内部组件使用百分比或layoutWeight来分配空间。这能保证布局结构在不同宽度下按比例缩放。4.2 栅格系统GridRow/GridCol对于需要更精细控制多列布局的场景eTs提供了栅格系统。它将容器水平划分为等宽的若干列默认为12列子组件GridCol可以声明自己占据多少列。GridRow({ columns: 12 }) { GridCol({ span: { xs: 12, sm: 6, md: 4 } }) { Text(卡片1) } .backgroundColor(Color.Blue) GridCol({ span: { xs: 12, sm: 6, md: 4 } }) { Text(卡片2) } .backgroundColor(Color.Green) GridCol({ span: { xs: 12, sm: 12, md: 4 } }) { Text(卡片3) } .backgroundColor(Color.Red) } .padding(10)在上面的例子中我们定义了在不同断点下的布局超小屏幕xs每个卡片占满12列即垂直堆叠。小屏幕sm每个卡片占6列即一行两个。中等屏幕md每个卡片占4列即一行三个。栅格系统是构建复杂、规则响应式布局的利器特别适合后台管理、商品列表等场景。4.3 媒体查询与断点对于更复杂的、非线性的布局变化需要使用媒体查询。eTs提供了ohos.mediaquery模块允许你在代码中监听屏幕特性变化。import mediaquery from ohos.mediaquery; // 定义一个断点监听器 let listener mediaquery.matchMedia((min-width: 600vp) and (orientation: landscape)); // 监听变化 listener.on(change, (result) { if (result.matches) { // 屏幕宽度600vp且为横屏时的布局逻辑 this.isWideScreen true; } else { // 其他情况 this.isWideScreen false; } }); // 在UI中使用状态变量控制不同布局 State isWideScreen: boolean false; build() { // 根据 isWideScreen 状态返回不同的布局结构 if (this.isWideScreen) { return this.buildWideLayout(); // 返回宽屏布局 } else { return this.buildNarrowLayout(); // 返回窄屏布局 } }常见问题媒体查询的断点值如何选择没有绝对标准但可以参考常见设备的逻辑宽度vp。例如手机竖屏通常在360-480vp左右手机横屏或小尺寸平板在600-800vp左右大平板或折叠屏展开态可能在840vp以上。建议根据你的设计稿和主流设备设定几个关键断点如600vp840vp。4.4 利用约束条件ConstraintSize对于一些组件你可能希望它在有足够空间时显示较大尺寸空间不足时自动缩小。可以使用.constraintSize。Text(这是一段可能很长的标题文字...) .constraintSize({ minWidth: 100, // 最小宽度 maxWidth: 300, // 最大宽度 minHeight: 50, maxHeight: 100 }) .fontSize(20)这样文本宽度会在100vp到300vp之间自适应如果内容超过300vp则会换行但高度不超过100vp超出的部分可能会被截断需配合.textOverflow属性。5. 性能优化与布局调试技巧不合理的布局设计会导致UI渲染性能下降甚至引起卡顿。以下是一些优化和调试经验。5.1 减少布局嵌套深度布局嵌套越深UI树就越复杂测量和布局计算所需的时间就越长。尽量避免不必要的容器包裹。优化前过度嵌套Column() { Row() { Column() { Text(内容) } .padding(10) } .justifyContent(FlexAlign.Center) }优化后Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) { Text(内容) .padding(10) }很多时候一个Flex容器通过设置direction,justifyContent,alignItems就能替代简单的RowColumn嵌套。5.2 善用aspectRatio保持比例对于图片、视频等需要固定宽高比的组件使用.aspectRatio()可以避免因单独设置宽高而导致的变形或额外计算。Image($r(app.media.poster)) .width(50%) // 宽度设为父容器一半 .aspectRatio(1.78) // 保持16:9 (16/9≈1.78)的宽高比高度自动计算5.3 使用预览器与调试工具ArkUI预览器在DevEco Studio中充分利用预览器的多设备预览功能快速查看布局在不同尺寸设备上的效果。组件边框高亮在预览器设置中开启“显示组件边界”可以清晰看到每个组件的实际占用区域方便检查margin和padding是否符合预期。性能分析器对于复杂页面使用DevEco Studio的性能分析器Profiler跟踪UI线程的渲染耗时。如果发现某个页面加载或滚动时存在明显的“布局”Layout耗时峰值就需要回头审查该页面的布局结构。5.4 常见布局问题速查表问题现象可能原因排查与解决方案内容超出屏幕/容器不滚动未在可滚动容器如Scroll、List中包裹超长内容或容器高度固定。检查内容区域是否被Scroll或List包裹。对于Column/Flex中的超长内容必须放入Scroll中。组件重叠使用了Stack但未正确定位或margin为负值position定位错误。检查Stack中子组件的position属性。检查margin值。确认是否误用了绝对定位。布局在横竖屏切换时错乱宽度/高度使用了固定值或百分比基准父容器尺寸变化未考虑。尽量使用百分比、flexWeight或媒体查询进行响应式设计。避免在可能变化的维度上使用过多固定值。layoutWeight不生效父容器主轴方向尺寸未明确或已被子组件固定尺寸占满无剩余空间分配。确保父容器在主轴上设置了尺寸如.width(‘100%’)并且有子组件未设置固定尺寸以留出“剩余空间”。文本末尾显示“...”文本容器宽度不足且未设置文本截断样式。检查文本父容器宽度。为Text组件添加.textOverflow({ overflow: TextOverflow.Ellipsis })和.maxLines(1)来显示省略号。6. 从布局到组件化构建可复用的UI模块当掌握了单个页面的布局后下一个阶段就是将布局思维应用于构建可复用的自定义组件。良好的布局设计是组件化的前提。例如我们将之前实现的首页头部封装成一个组件TitleBar// TitleBar.ets Component export struct TitleBar { Prop title: string ; Prop showBack: boolean true; Prop showSearch: boolean true; build() { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { if (this.showBack) { Image($r(app.media.back)) .width(30).height(30).margin({ left: 12 }) .onClick(() { // 触发返回事件可通过自定义事件向上传递 }) } else { Blank().width(30).height(30).margin({ left: 12 }) // 占位保持布局平衡 } Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) { Text(this.title).fontSize(18).fontWeight(FontWeight.Medium) } .layoutWeight(1) if (this.showSearch) { Image($r(app.media.search)) .width(30).height(30).margin({ right: 12 }) .onClick(() { // 触发搜索事件 }) } else { Blank().width(30).height(30).margin({ right: 12 }) } } .width(100%) .height(50) .backgroundColor(Color.White) } }然后在任意页面中你可以像使用系统组件一样使用它import { TitleBar } from ./TitleBar; Entry Component struct HomePage { build() { Column() { TitleBar({ title: 我的主页, showBack: false }) // ... 页面其他内容 Scroll() { // ... } .layoutWeight(1) // 让Scroll占据标题栏之外的剩余空间 } .width(100%) .height(100%) } }通过这种方式布局知识从构建单页升华到了构建整个应用UI架构的层面。每一个精心设计的布局块都可以成为一个可靠、可配置的UI积木。
