鸿蒙——布局——线性布局

前提知识：

组件与布局含义

组件是什么？

组件是鸿蒙 UI 开发中最小的 、可复用 的可视化单元，举一个比较简单的例子，你所输入的文本框，就是一个组件

布局是什么？

带排版规则的容器：能装组件，还规定组件怎么摆
布局本身默认看不见，但可加样式（如背景色）让它显现

疑问：我想大多数人都有过这个疑问，为什么会有这么多的布局？原因如下

一是因为有不同的展示区域，电脑，平板，手机，需要适应不同的屏幕大小，来保证排版的不变
二是我们需要复杂的排版画面实现视觉效果，以至于需要不同的布局方式

二、线性布局

定义

将子组件按照单一方向（水平或垂直）依次排列的布局方式

通俗理解：把它想象成排队的人 ------ 要么排成一横排，要么排成一竖列，组件之间不会重叠，而是沿着指定方向紧密或分散地排列

核心特点

单一方向排列：分为两种核心组件 ------Row（水平方向，从左到右）和Column（垂直方向，从上到下），子组件 按照指定方向线性排布，默认无重叠，当然这些是可以套娃的，每一层都是这样的排列方式
对齐与间距可控：统控所有子组件 在 "主轴"（排列方向）和 "交叉轴"（垂直于排列方向）上的对齐方式 ，也能设置组件间的间距
自适应 与占比分配：支持通过flexGrow/flexShrink/flexBasis控制子组件的伸缩规则 ，或通过LayoutWeight设置占比，适配不同屏幕尺寸

适用场景

几乎所有基础 UI 结构都依赖线性布局搭建，典型应用场景包括

基础页面结构：例如页面顶部的导航栏 （Row：左侧返回按钮 + 中间标题 + 右侧更多按钮）、页面底部的功能栏（Row：首页 / 分类 / 我的等图标）
表单布局：例如登录页的 "标签 + 输入框" 组合（Column：账号行 + 密码行 + 登录按钮）
列表项布局：例如联系人列表项（Row：头像 + 姓名 + 电话）、商品列表项（Row：商品图片 + 商品名称 / 价格）
均分布局：例如底部 4 个功能按钮均分屏幕宽度（Row+LayoutWeight）、垂直方向：标题 / 内容 / 按钮按比例分配高度（Column+LayoutWeight）
嵌套组合：与其他布局（如 Stack、Grid）嵌套，搭建复杂 UI（例如 Row 嵌套 Column 实现 "左图右文 + 多行文字" 的卡片）

实现

在鸿蒙中使用 Column组件/Row 组件实现层叠布局

了解一些核心属性

设置在布局上的属性：
1. justifyContent
  - 含义：控制子组件在主轴上的对齐方式
  - 写法： .justifyContent(FlexAlign.Center)
2. alignItems
  - 含义：控制子组件在交叉轴上的对齐方式
  - 写法： .alignItems(ItemAlign.Center)
3. space
  - 含义：设置子组件之间的间距（单位 vp）

注：justifyContent与 alignItems需要将布局设置上宽高，易观察

常用的一些 FlexAlign值
FlexAlign.Start 主轴起始端对齐（Row：左对齐；Column：上对齐）
FlexAlign.End 主轴末端对齐（Row：右对齐；Column：下对齐）
FlexAlign.Center 主轴居中对齐（Row：水平居中；Column：垂直居中）
FlexAlign.SpaceBetween 两端对齐，子组件之间间隔相等（无左右 / 上下边距）
FlexAlign.SpaceAround 每个子组件两侧间隔相等（左右 / 上下有一半间距）
FlexAlign.SpaceEvenly 子组件之间、子组件与边界的间隔全部相等

常用的一些 ItemAlign值
ItemAlign.Start 交叉轴起点对齐（Row：垂直上对齐；Column：水平左对齐）
ItemAlign.Center 交叉轴居中对齐（Row：垂直居中；Column：水平居中）
ItemAlign.End 交叉轴终点对齐（Row：垂直下对齐；Column：水平右对齐）
ItemAlign.Stretch 子组件拉伸填满交叉轴（需子组件交叉轴方向无固定尺寸）

注： Stretch 的生效条件为子组件在交叉轴方向不能设置固定尺寸

例如：比如 Row 中，子组件不设 height，Stretch 才会让子组件垂直拉伸填满 Row 的高度

设置在子组件 的属性：
1. LayoutWeight
  - 定义：设置主轴方向的占比，需父组件尺寸固定
  - 写法：.layoutWeight(1)
2. flexGrow
  - 定义：主轴空间充足时的拉伸比例。优先级低于 LayoutWeight
  - 写法：.flexGrow(1)
3. flexShrink
  - 定义：主轴空间不足时的收缩比例
  - 写法： .flexShrink(1)

代码实现

bash 复制代码

@Entry
@Component
struct Page1 {
  build() {
    Column({}){
      Column( {space: 10}) {
        Text('解，破除疑惑，但是需要一直在路上1')
          // .layoutWeight(1)
          .backgroundColor('#923d12')
        Button("你倒是解一下啊")
          // .layoutWeight(1)
          .backgroundColor('#d23d22')
        Text('解，破除疑惑，但是需要一直在路上2')
          // .layoutWeight(2)
          .backgroundColor('#d23d22')
          .flexShrink(1)
        Text('解，破除疑惑，但是需要一直在路上3')
          // .flexGrow(1)
      }
      .width('100%').height("100%")
      .backgroundColor(Color.Pink)
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.End)
    }
  }
}

更新于25_12_20------22:50