龙岗在线网站制作网站关键词优化软件效果
本文聚焦于ArkUI的布局实战，三种十分重要的布局，线性布局、弹性布局、层叠布局，在实际开发过程中这几种布局方法都十分常见，下面直接上手
线性布局
垂直布局（Column）
官方文档：
Column-行列与堆叠-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者
沿垂直方向布局的容器，在此容器中，所有子组件都会沿着垂直方向排列，也就数从上往下排
参数表：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| space | string | number | 否 | 纵向布局元素垂直方向间距。 从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。 默认值：0 单位：vp 说明： 可选值为大于等于0的数字，或者可以转换为数字的字符串。 |
代码部分：
在垂直布局中，有两个十分重要的属性：
| 属性名 | 功能描述 | 参数类型 | 参数说明 | 默认值 |
|---|---|---|---|---|
| alignItems | 设置子组件在水平方向上的对齐 | HorizontalAlign | 子组件在水平方向上的对齐格式 | HorizontalAlign.Center |
| justifyContent | 设置子组件在垂直方向上的对齐 | FlexAlign | 子组件在垂直方向上的对齐格式 | FlexAlign.Start |
import { getRandomRGBA } from '../../../Utils'@Entry
@Component
struct ColumnCase {build() {NavDestination() {Column({ space: 30 }) {Text('垂直布局').fontSize(24).fontWeight(FontWeight.Bold)Column({ space: 10 }) {ForEach(Array.from({ length: 10 }), () => {Text().backgroundColor(getRandomRGBA()).width(200).height(20)})}.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}.height('100%').width('100%')}}
}@Builder
function ColumnCaseBuilder() {ColumnCase()
}可以看到在背景色部分我使用了一个函数生成随机的颜色，这个函数如下：
// 随机生成rgba颜色
export const getRandomRGBA = () => {const r = Math.floor(Math.random() * 256);const g = Math.floor(Math.random() * 256);const b = Math.floor(Math.random() * 256);return `rgba(${r}, ${g}, ${b}, ${1})`;
}效果展示：
水平布局（Row）
官方文档：
Row-行列与堆叠-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者
沿水平方向布局容器，这个组件中的子组件会沿着水平方向排列，参数表：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| space | number | string | 否 | 横向布局元素间距。 从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。 默认值：0，单位vp 说明： 可选值为大于等于0的数字，或者可以转换为数字的字符串。 |
代码部分：
在水平布局容器中也有两个十分重要的属性：
| 属性名 | 功能描述 | 参数类型 | 是否必填 | 参数说明 | 默认值 |
|---|---|---|---|---|---|
| alignItems | 设置子组件在垂直方向上的对齐 | VerticalAlign | 是 | 子组件在垂直方向上的对齐格式 | VerticalAlign.Center |
| justifyContent | 设置子组件在水平方向上的对齐 | FlexAlign | 是 | 子组件在水平方向上的对齐格式 | FlexAlign.Start |
import { getRandomRGBA } from '../../../Utils'@Entry
@Component
struct RowCase {build() {NavDestination() {Column({ space: 30 }) {Text('水平布局').fontSize(24).fontWeight(FontWeight.Bold)Row({ space: 10 }) {ForEach(Array.from({ length: 20 }), () => {Text().backgroundColor(getRandomRGBA()).width(40).height(200)})}.justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)}.height('100%').width('100%')}}
}@Builder
function RowCaseBuilder() {RowCase()
}效果展示：
弹性布局（Flex）
官方文档：
Flex-行列与堆叠-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者
Flex是以弹性方式布局子组件的容器组件，提供更加有效的方式对容器内的子元素进行排列、对齐和分配剩余空间，也就是子组件会随着容器宽度的限制而自动换行，不会挤在一块，但是使用的时候需要加上一个参数使用，才能达到换行的效果，就是：
Flex({ wrap: FlexWrap.Wrap }) // 设置这个参数之后才有换行效果
参数表：
| 名称 | 类型 | 必填 | 说明 |
|---|---|---|---|
| direction | FlexDirection | 否 | 子组件在Flex容器上排列的方向，即主轴的方向。 默认值： FlexDirection.Row 卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| wrap | FlexWrap | 否 | Flex容器是单行/列还是多行/列排列。 默认值： FlexWrap.NoWrap 说明： 在多行布局时，通过交叉轴方向，确认新行堆叠方向。 卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| justifyContent | FlexAlign | 否 | 所有子组件在Flex容器主轴上的对齐格式。 默认值： FlexAlign.Start 卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| alignItems | ItemAlign | 否 | 所有子组件在Flex容器交叉轴上的对齐格式。 默认值： ItemAlign.Start 卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| alignContent | FlexAlign | 否 | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 默认值： FlexAlign.Start 卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| space12+ | FlexSpaceOptions12+ | 否 | 所有子组件在Flex容器主轴或交叉轴的间距。 默认值： {main:LengthMetrics.px(0), cross:LengthMetrics.px(0)} space为负数、百分比或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。 元服务API： 从API version 12开始，该接口支持在元服务中使用。 |
代码部分：
在以下代码中第一个Flex组件没有设置Wrap参数，子组件就会直接默认水平排列，而第二个Flex设置了Wrap参数，子组件就可以自动换行：
import { getRandomRGBA } from '../../../Utils'@Entry
@Component
struct FlexCase {build() {NavDestination() {Column({ space: 30 }) {Text('弹性布局').fontSize(24).fontWeight(FontWeight.Bold)Flex() {ForEach(Array.from({ length: 10 }), () => {Text().backgroundColor(getRandomRGBA()).width(60).margin({ right: 20, bottom: 20 }).height(30)})}Flex({ wrap: FlexWrap.Wrap }) {ForEach(Array.from({ length: 10 }), () => {Text().backgroundColor(getRandomRGBA()).width(60).margin({ right: 20, bottom: 20 }).height(30)})}}.height('100%').width('100%')}}
}@Builder
function FlexCaseBuilder() {FlexCase()
}效果展示：
层叠布局（Stack）
官方文档：
Stack-行列与堆叠-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者
Stack组件中的子组件会堆叠在一起，默认都是居中对齐，遵循后来居上的原则，如果需要设置层级，可给子组件设置zIndex(数字)属性，数字越大，层级越高，
参数表：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| alignContent | Alignment | 否 | 设置子组件在容器内的对齐方式。 默认值：Alignment.Center |
Stack组件设置组件对齐的方式有两种，一种是通过参数设置：
Stack(value?: { alignContent?: Alignment })
第二种是通过属性设置：
Stack(){
// 子组件...
}
.alignContent(Alignment.Center)
两种方式都选一种即可，对齐方式分为九种，如下：
| 对齐位置 | 枚举值 | 说明 |
|---|---|---|
| 左上 | Alignment.TopStart | 左上角对齐 |
| 上边居中 | Alignment.Top | 上边居中对齐 |
| 右上 | Alignment.TopEnd | 右上角对齐 |
| 左边居中 | Alignment.Start | 左边居中对齐 |
| 中心 | Alignment.Center | 中心对齐 |
| 右边居中 | Alignment.End | 右边居中对齐 |
| 左下 | Alignment.BottomStart | 左下角对齐 |
| 下边居中 | Alignment.Bottom | 下边居中对齐 |
| 右下 | Alignment.BottomEnd | 右下角对齐 |
如图：
代码部分：
这里一共有三个Stack组件，第一个小图在左上，第二个默认都居中，第三个在右下，一共放了两张图片，一个在占满，一个显示位置
@Entry
@Component
struct StackCase {build() {NavDestination() {Text('层叠布局').fontSize(24).fontWeight(FontWeight.Bold)Column({ space: 20 }) {Stack({ alignContent: Alignment.TopStart }) {Image($r('app.media.ark_ui')).width(200).height(200)Image($r('app.media.avatar')).width(30).height(30)}.width(200).height(200)Stack() {Image($r('app.media.ark_ui')).width(200).height(200)Image($r('app.media.avatar')).width(30).height(30)}.width(200).height(200)Stack({ alignContent: Alignment.BottomEnd }) {Image($r('app.media.ark_ui')).width(200).height(200)Image($r('app.media.avatar')).width(30).height(30)}.width(200).height(200)}.height('100%').width('100%')}}
}@Builder
function StackCaseBuilder() {StackCase()
}效果展示：
ArkUI内容持续更新中........