HarmonyOS ArkUI 六大布局极简博客

一、线性布局 (Row/Column)
1、概念
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Row容器内子元素按照水平方向排列，Column容器内子元素按照垂直方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。
2、代码解读
Row({ space: 35 }) {
Text('space: 35').fontSize(15).fontColor(Color.Gray)
Row().width('10%').height(150).backgroundColor(0xF5DEB3)
Row().width('10%').height(150).backgroundColor(0xD2B48C)
Row().width('10%').height(150).backgroundColor(0xF5DEB3)
}.width('90%')

二、层叠布局 (Stack)
1、概念
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。
2、代码解读
// xxx.ets
let mTop:Record<string,number> = { 'top': 50 }

@Entry
@Component
struct StackLayoutExample {
build() {
Column(){
Stack({ }) {
Column(){}.width('90%').height('100%').backgroundColor('#ff58b87c')
Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa')
Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
}.width('100%').height(150).margin(mTop)
}
}
}

三、弹性布局 (Flex)

1、概念
弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。
2、代码解读
Flex({ direction: FlexDirection.Row }) {
Text('1').width('33%').height(50).backgroundColor('#F5DEB3')
Text('2').width('33%').height(50).backgroundColor('#D2B48C')
Text('3').width('33%').height(50).backgroundColor('#F5DEB3')
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor('#AFEEEE')

四、相对布局 (RelativeContainer)
1、概念
在应用的开发过程中，经常需要设计复杂界面，此时涉及到多个相同或不同组件之间的嵌套。如果布局组件嵌套深度过深，或者嵌套组件数过多，会带来额外的开销。如果在布局的方式上进行优化，就可以有效的提升性能，减少时间开销。

RelativeContainer是一种采用相对布局的容器，支持容器内部的子元素设置相对位置关系，适用于处理界面复杂的场景，对多个子元素进行对齐和排列。子元素可以指定兄弟元素或父容器作为锚点，基于锚点进行相对位置布局。在使用锚点时，需注意子元素的相对位置关系，以避免出现错位或遮挡的情况。下图展示了一个 RelativeContainer的概念图，图中的虚线表示位置的依赖关系。
2、代码解读
let alignRus: Record<string, Record<string, string | VerticalAlign | HorizontalAlign>> = {
'top': { 'anchor': 'container', 'align': VerticalAlign.Top },
'left': { 'anchor': 'container', 'align': HorizontalAlign.Start }
}
let alignRue: Record<string, Record<string, string | VerticalAlign | HorizontalAlign>> = {
'top': { 'anchor': 'container', 'align': VerticalAlign.Top },
'right': { 'anchor': 'container', 'align': HorizontalAlign.End }
}
let marginLeft: Record<string, number> = { 'left': 20 }
let bwc: Record<string, number | string> = { 'width': 2, 'color': '#6699FF' }

@Entry
@Component
struct ParentRefRelativeContainer {
build() {
RelativeContainer() {
Row() {
Text('row1')
}
.justifyContent(FlexAlign.Center)
.width(100)
.height(100)
.backgroundColor('#a3cf62')
.alignRules(alignRus)
.id('row1')

Row() {
Text('row2')
}
.justifyContent(FlexAlign.Center)
.width(100)
.height(100)
.backgroundColor('#00ae9d')
.alignRules(alignRue)
.id('row2')
}.width(300).height(300)
.margin(marginLeft)
.border(bwc)
}
}

五、栅格布局 (GridRow/GridCol)
1、概念
栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括：

提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。

统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。

灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。通过调整列与列之间和行与行之间的间距，可以控制整个页面的排版效果。

自动换行和自适应：栅格布局可以完成一对多布局的自动换行和自适应。当页面元素的数量超出了一行或一列的容量时，他们会自动换到下一行或下一列，并且在不同的设备上自适应排版，使得页面布局更加灵活和适应性强。

GridRow为栅格容器组件，需与栅格子组件GridCol在栅格布局场景中联合使用。

2、代码解读
@Entry
@Component
struct WindowRefGridLayout {
@State currentBp: string = "unknown"
@State bgColors: ResourceColor[] =
['rgb(213,213,213)', 'rgb(150,150,150)', 'rgb(0,74,175)', 'rgb(39,135,217)', 'rgb(61,157,180)', 'rgb(23,169,141)',
'rgb(255,192,0)', 'rgb(170,10,33)'];

build() {
Column({ space: 6 }) {
Text(this.currentBp)

GridRow({
columns: {
xs: 2, // 窗口宽度落入xs断点上，栅格容器分为2列。
sm: 4, // 窗口宽度落入sm断点上，栅格容器分为4列。
md: 8, // 窗口宽度落入md断点上，栅格容器分为8列。
lg: 12, // 窗口宽度落入lg断点上，栅格容器分为12列。
xl: 12, // 窗口宽度落入xl断点上，栅格容器分为12列。
xxl: 12 // 窗口宽度落入xxl断点上，栅格容器分为12列。
},
breakpoints: {
value: ['320vp', '600vp', '840vp', '1440vp', '1600vp'], // 表示在保留默认断点['320vp', '600vp', '840vp']的同时自定义增加'1440vp', '1600vp'的断点，实际开发中需要根据实际使用场景，合理设置断点值实现一次开发多端适配。
reference: BreakpointsReference.WindowSize
}
}) {
ForEach(this.bgColors, (color: ResourceColor, index?: number | undefined) => {
GridCol({ span: 1 }) { // 所有子组件占一列。
Row() {
Text(${index})
}.width('100%').height('50vp')
}.backgroundColor(color)
})
}
.height(200)
.border({ color: 'rgb(39,135,217)', width: 2 })
.onBreakpointChange((breakPoint) => {
this.currentBp = breakPoint
})
}
}
}

六、动态布局 (DynamicLayout)
1、概念
从API version 24开始，支持动态布局容器组件DynamicLayout。DynamicLayout支持在运行时动态切换不同的布局算法，同时保持子组件的状态不变。通过DynamicLayout，开发者可以灵活实现同一种内容在不同场景下的多种布局展示。DynamicLayout组件支持的布局算法类包括RowLayoutAlgorithm、ColumnLayoutAlgorithm、StackLayoutAlgorithm、GridLayoutAlgorithm和自定义布局算法类CustomLayoutAlgorithm。
2、代码解读
import {
DynamicLayout, DynamicLayoutAttribute,RowLayoutAlgorithm, ColumnLayoutAlgorithm, LayoutAlgorithm
} from '@kit.ArkUI';

@Entry
@ComponentV2
struct CreateDynamicLayout {
@Local algorithm: LayoutAlgorithm = new RowLayoutAlgorithm();

build() {
Column({ space: 10 }) {
DynamicLayout(this.algorithm) {
Text('Item 1')
.fontSize(16)
.backgroundColor(0xF5DEB3)
.padding(10)
Text('Item 2')
.fontSize(16)
.backgroundColor(0xD2B48C)
.padding(10)
Text('Item 3')
.fontSize(16)
.backgroundColor(0xF5DEB3)
.padding(10)
}
.width('100%')
.height(150)
.backgroundColor(0xEFEFEF)

Button('切换为Column布局')
.fontSize(16)
.onClick(() => {
this.algorithm = new ColumnLayoutAlgorithm();
})
}
.width('100%')
.padding(20)
}
}

七、选项卡 (Tabs)
1、概念
当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。
2.代码解读
TabContent() {
// app.string.homepage_content资源文件中的value值为“首页的内容”
Text($r('app.string.homepage_content'))
.fontSize(30)
}
// app.string.homepage资源文件中的value值为“首页”
.tabBar($r('app.string.homepage'))