各位小伙伴们我们又见面了,我是鸿蒙开天组,下面让我们进入今天的学习,Harmony OS Next应用开发基础篇-高级布局

在鸿蒙中：

线性布局（DirectionalLayout）： 线性布局是将组件按照水平或垂直方向依次排列的布局方式。在水平线性布局中，组件从左到右排列；在垂直线性布局中，组件从上到下排列。通过设置组件的排列方向、对齐方式、权重等属性，可以灵活控制组件在布局中的位置和所占空间比例。

弹性布局（FlexLayout）： 弹性布局是一种更灵活和自适应的布局方式。它基于弹性盒模型，可以方便地实现组件在水平或垂直方向上的灵活分布和对齐。在弹性布局中，可以设置组件的伸缩性、排列方向、对齐方式、主轴和交叉轴的对齐方式等属性，使组件能够根据可用空间自动调整大小和位置，以适应不同的屏幕尺寸和设备方向，提供更好的用户体验。

总的来说，线性布局适用于简单的线性排列需求，而弹性布局更适合需要灵活自适应和复杂布局的场景。

首先我先来介绍一下线性布局:

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器 Row 和 Column 构建。Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

间距

在布局容器内，可以通过 space 属性设置布局主方向方向上子元素的间距，使各子元素在布局主方向上有等间距效果。

下面展示一个案例来理解:

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row({ space: 20 }) {
        Text('子元素1')
          .width(100)
          .height(40)
          .backgroundColor(Color.Pink)
        Text('子元素2')
          .width(100)
          .height(40)
          .backgroundColor(Color.Orange)
        Text('子元素3')
          .width(100)
          .height(40)
          .backgroundColor(Color.Brown)
      }
      .margin({ bottom: 50 })

      Column({ space: 20 }) {
        Text('子元素1')
          .width(100)
          .height(40)
          .backgroundColor(Color.Pink)
        Text('子元素2')
          .width(100)
          .height(40)
          .backgroundColor(Color.Orange)
        Text('子元素3')
          .width(100)
          .height(40)
          .backgroundColor(Color.Brown)
      }
    }

  }
}

`

布局主方向对齐方式

概念：

1. 在线性布局中，布局主方向，叫做主轴
2. 另外一条坐标轴，叫做交叉轴

属性：justifyContent()

参数：枚举FlexAlign

属性	描述
Start	首端对齐
Center	居中对齐
End	尾部对齐
Spacebetween	两端对齐 子元素之间间距相等
SpaceAround	子元素两侧间距相等 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
SpaceEvenly	相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

下面展示一个案例来理解:

@Entry
@Component
struct Index {
  build() {
    Row() {
      Text('子元素1')
        .width(80)
        .height(40)
        .backgroundColor(Color.Pink)
      Text('子元素2')
        .width(80)
        .height(40)
        .backgroundColor(Color.Orange)
      Text('子元素3')
        .width(80)
        .height(40)
        .backgroundColor(Color.Brown)
    }
    .width('100%')
    .height(200)
    .backgroundColor('#ccc')
    // 主布局方向的对齐方式
    .justifyContent(FlexAlign.Center)
    // 两端对齐
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

 交叉轴对齐方式

以 Row 为例，主轴在水平方向，交叉轴在垂直方向

属性：alignItems()

参数：枚举类型VerticalAlign

注意：布局容器在交叉轴要有足够空间，否则无法生效

 单个子元素交叉轴对齐方式

属性：alignSelf()

参数：枚举ItemAlign(Stretch拉伸，交叉轴拉伸效果)

自适应缩放

父容器尺寸确定时，设置了 layoutWeight 属性的子元素与兄弟元素占主轴尺寸按照权重进行分配。

属性：layoutWeight()

参数：数字

线性布局-Column

• Column 主轴方向： 垂直方向
• Column 交叉轴方向：水平方向

弹性布局（Flex）

2.1. 换行

弹性布局分为单行布局和多行布局。默认情况下，Flex 容器中的子元素都排在一条线（又称“轴线”）上。子元素尺寸总和大于 Flex 容器尺寸时，子元素尺寸会自动挤压。

wrap 属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex 是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。

参数：wrap

值：枚举 FlexWrap

下面展示一个案例来理解:

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('阶段选择')
        .fontWeight(600)
        .fontSize(24)
        .width('100%')
        .padding(15)
      Flex({ wrap: FlexWrap.Wrap }) {
        Text('ArkUI')
          .padding(10)
          .margin(5)
          .backgroundColor('#f6f7f9')
        Text('ArkTS')
          .padding(10)
          .margin(5)
          .backgroundColor('#f6f7f9')
        Text('界面开发')
          .padding(10)
          .margin(5)
          .backgroundColor('#f6f7f9')
        Text('系统能力')
          .padding(10)
          .margin(5)
          .backgroundColor('#f6f7f9')
        Text('权限控制')
          .padding(10)
          .margin(5)
          .backgroundColor('#f6f7f9')
        Text('元服务')
          .padding(10)
          .margin(5)
          .backgroundColor('#f6f7f9')
      }
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

以上是关于鸿蒙基础篇-高级布局 综合的一些内容,方便大家学习,至此，关于鸿蒙基础篇-高级布局 综合的内容就介绍到这里，愿您能学以致用，开发出精彩的鸿蒙应用！

以上内容仅供学习交流，如有违法或者侵权可以联系删除。