harmony OS NEXT-UI开发与部分布局

UI开发

1. 布局概述

1.1 开发流程

1.先确定开发流程 -> 2.分析页面元素构成 ->3.选用合适的布局容器组件

image-20241121081642623

1.3 布局元素组成：盒模型

image-20241121082444491

image-20241121083235114

2.1 布局分类

2.1 线性布局

线性布局是开发中最常用·、最基础的布局，通过线性容器Row和Column构建

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.1.1 线性布局子元素排列方向：主轴

image-20241121090407452

布局子元素在排列方向上的间距

在布局容器内，可以通过space属性设置排列方向上子元素的间距

线性布局容器在布局方向的轴线，子元素默认沿主轴排列

.justifyContent(FlexAlign.End)//主轴对齐
.alignItems(HorizontalAlign.Center)//交叉轴对齐  

2.1.2 设置主轴对齐方式

 .justifyContent(FlexAlign.End)//主轴对齐
    .alignItems(HorizontalAlign.Center)//交叉轴对齐  

image-20241121090911564

不管容器是Coloum还是Row,它们默认的排列方式都是主轴为始端，交叉轴为居中对齐

1. 设置主轴对齐的方式：JustifyContent(FlexAlign.Center)
2. 设置交叉轴的对齐方式：alignItems()

自适应拉伸：Blank组件

线性布局下，常用空白填充组件Blank,在容器主轴方向自动填充空白空间，达到自适应的拉伸效果 打个比方，就是你竖屏在看小说，然后你横屏了，小说的内容会跟着横屏的屏幕去调整

image-20241121093045568

2.2 层叠布局

层叠布局用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局

• 层叠布局通过Stack容器组件实现位置的固定定位与层叠
• 容器中的子元素（子组件）一次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可设置元素

image-20241121093711961

2.1.1 层叠布局的对齐方式

Stack组件通过alignContent参数实现位置的相对移动

image-20241121095941931

在层叠布局中，如果后面子元素尺寸大于前面子元素的尺寸，则前面子元素完全隐藏

2.1.2 层叠布局的层级控制：Z控制

如何显示前面的元素呢？

• Stack容器中兄弟组件显示层级关系可以通过Z序控制ZIndex属性改变
• zIndex值越大，显示的层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方

2.1.3 层叠布局的应用场景

使用层叠布局快速搭建手机页面显示模型

image-20241121134023838

2.3 弹性布局

2.3.1 弹性布局的概念

弹性布局提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间

• 容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉尺寸
• 弹性布局常用在以下场景：如页面头部均匀分布的导航栏、页面框架的搭建、多行数据的排列
  

  image-20241121134936895

2.3.2 弹性布局的元素排列方向：direction

弹性布局中，容器的子元素可以按照任意方向排列，通过设置参数direction,可以决定主轴的反向，从而控制子组件的排列方向

image-20241121101155517

2.3.3 案例解析

通过参数FlexDirection.Row和FlexDirection.RowReverse来控制容器主轴为水平方向

image-20241121135300259

通过参数FlexDirection.Column和FlexDirection.ColumnReverse来控制容器主轴为垂直方向

image-20241121135442101

2.4 相对布局

2.4.1 概念

布局容器内子元素支持指定锚点，可以为兄弟元素或者父元素，基于锚点做相应位置布局

• RelativeContainer为采用相对布局的容器。支持容器内部的子元素设置相对未知关系

image-20241121123948980

2.4.2 相对布局的依赖关系： 锚点设置

锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系

• 水平方向上，可以设置left、middle、right的锚点
• 在竖值方向上，可以设置top、center、bottom的锚点
• 为了明确定义锚点，必须为RelativeContainer及其子元素设置ID,用于指定锚点信息
• RelativeConrainer的ID默认为“container”,其余子元素的ID通过这只id属性。未设置ID的子元素在RelativeContainer中不会显示
• 在使用锚点时要注意子元素的相对位置关系，避免出现错位或者遮挡的情况

2.4.3 相对布局的依赖关系：以容器为锚点

RelativeContainer父组件为锚点，container代表父容器的id

2.4.4 相对布局的依赖关系：以子元素为锚点

只要在RelativeContainer容器内，均可以通过alignRules进行相应的位置移动

代码案例

@Entry
@Component
struct RelativeContainer1{
  build() {
    RelativeContainer() {//父容器组件
        Text("1111")
          .width(80)
          .height(80)
          .backgroundColor(Color.Gray)
          .alignRules({
      top:{anchor:"__container__",align:VerticalAlign.Top},
      left:{anchor:'__container__',align:HorizontalAlign.Start}
          }).id('Text')

        Text("2222")
          .width(80)
          .height(80)
          .backgroundColor(Color.Pink)
          .alignRules({
            top:{anchor:"Text",align:VerticalAlign.Bottom},
            left:{anchor:"Text",align:HorizontalAlign.End}
          })
          .id("Text1")



    }
  }
}

image-20241121132722692