鸿蒙初学者学习手册(HarmonyOSNext_API12)_应用开发UI设计（布局一）

本文链接：https://blog.youkuaiyun.com/m0_71977266/article/details/144386637

鸿蒙初学者应用UI设计布局

ArkUI，即方舟UI框架，为应用开发者精心打造了一套全面的UI开发基础设施。它以其简洁明了的UI语法为核心，让开发者能够轻松上手，快速构建用户界面的基础架构。框架内嵌了丰富的UI功能组件，包括但不限于多样化的布局方式、生动的动画效果以及灵活的交互事件处理机制，这些功能极大地增强了应用界面的表现力和用户交互体验。
值得一提的是，ArkUI还配备了实时界面预览工具，这一创新设计使得开发者能够在编码过程中即时查看UI变化，极大地提升了开发效率和准确性。通过这一工具，开发者可以摆脱传统开发中反复编译、运行的繁琐步骤，直接在可视化环境中对界面进行调试和优化，从而快速迭代出符合用户需求的优质界面。综上所述，ArkUI以其强大的功能和便捷的开发体验，成为应用UI开发领域的佼佼者。

在鸿蒙应用开发中有多种UI布局方式，包括但不限于线性布局，层叠布局，网格布局吗，相对布局等等，这篇文章主要介绍*线性布局

线性布局（LinearLayout）是开发过程中极为常用的一种布局方式，它依赖于线性容器——Row和Column来构建。作为其他复杂布局的基础，线性布局以其简洁明了的排列方式著称。在Row容器中，子元素会沿着水平方向依次排列；而在Column容器中，子元素则会按照垂直方向有序布局。因此，线性布局的排列方向完全取决于所选的容器组件：Column实现垂直排列，Row则实现水平排列。这种布局方式不仅易于理解和使用，而且为开发者提供了极大的灵活性和便利性。

在正式开始UI布局开发之前需要对基本的UI定义词汇需要先了解一下：

布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
布局子元素 ：布局容器内部的元素。
主轴主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。
间距：布局子元素的间距。

Column布局

Row布局

图片间距

在Column和Row的组件中的主轴交叉轴相互组合会有四种不同的情况
布局子元素在主轴上的排列方式
- Row容器内子元素在水平方向上的排列
- Column容器内子元素在垂直方向上的排列
布局子元素在交叉轴上的排列方式
- Row容器内子元素在垂直方向上的排列
- Column容器内子元素在水平方向上的排列

Row容器内子元素在水平方向上的排列justifyContent

/*
justifyContent(FlexAlign.Start)素在水平方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
justifyContent(FlexAlign.Center)元素在水平方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
justifyContent(FlexAlign.End)元素在水平方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
justifyContent(FlexAlign.SpaceBetween)第一个元素与行首对齐，最后一个元素与行尾对齐。
justifyContent(FlexAlign.SpaceAround)第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
justifyContent(FlexAlign.SpaceEvenly)水平方向均匀分配元素
*/
@Entry
@Component
struct Index {
  build() {
    // Row容器内子元素在水平方向上的排列
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)

      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)

      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%')
.height(200)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.Start)

  }
}

在这里插入图片描述

Column容器内子元素在垂直方向上的排列

/*
justifyContent(FlexAlign.Start)素在水平方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
justifyContent(FlexAlign.Center)元素在水平方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
justifyContent(FlexAlign.End)元素在水平方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
justifyContent(FlexAlign.SpaceBetween)第一个元素与行首对齐，最后一个元素与行尾对齐。
justifyContent(FlexAlign.SpaceAround)第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
justifyContent(FlexAlign.SpaceEvenly)水平方向均匀分配元素
*/
@Entry
@Component
struct Index {
  build() {
    // `Column`容器内子元素在垂直方向上的排列
    Column({}) {
      Column() {
      }.width('30%').height(50).backgroundColor(0xF5DEB3)

      Column() {
      }.width('30%').height(50).backgroundColor(0xD2B48C)

      Column() {
      }.width('30%')
      .height(50)
      .backgroundColor(0xF5DEB3)
    }.width('100%')
    .backgroundColor('rgb(242,242,242)')


  }
}

在这里插入图片描述

Row容器内子元素在垂直方向上的排列

//VerticalAlign.Top：子元素在垂直方向顶部对齐。
//VerticalAlign.Center：子元素在垂直方向居中对齐
//VerticalAlign.Bottom：子元素在垂直方向底部对齐。
@Entry
@Component
struct Page {
  build() {
    // `Row`容器内子元素在垂直方向上的排列
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)

      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)

      Column() {
      }.width('20%')
      .height(30)
      .backgroundColor(0xF5DEB3)
    }.width('100%')
    .height(200)
    .alignItems(VerticalAlign.Center)
    .backgroundColor('rgb(242,242,242)')

  }
}

在这里插入图片描述

Column容器内子元素在水平方向上的排列

/*
HorizontalAlign.Start：子元素在水平方向左对齐。
HorizontalAlign.Center：子元素在水平方向居中对齐。
HorizontalAlign.End：子元素在水平方向右对齐。
*/
@Entry
@Component
struct Index {
  build() {
    // `Column`容器内子元素在水平方向上的排列
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)

      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)

      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').alignItems(HorizontalAlign.Start).backgroundColor('rgb(242,242,242)')

  }
}