【HarmonyOS 鸿蒙 黑马程序员 学习笔记 36.1】

线性布局

主轴对齐

.justifyContent(FlexAlign.枚举值)

枚举值下列
Start 对应主轴开始点平铺
Center 对应主轴局中平铺
End 对应主轴结尾平铺
SpaceBetween 对应主轴两端不留空均匀分布
SpaceAround 每个容器或组件都有自己独立且相等的间隔,类似.margin()
SpaceEvenly 每个容器,组件,边 间隙是相等的

交叉对齐

.alignItems(HorizontalAlign.Center)  //  交叉对齐 X轴

交叉对齐没有主轴对齐好用且强大
且.alignItems(VerticalAlign.Center) // 交叉对齐 Y轴
VerticalAlign.Center 好像废除了,IDE会报错
还是主轴对齐好用,且功能多

自适应伸缩

.layoutWeight(1)

一个父组件(容器也是组件)包含两个子组件
一个组件固定大小,另一个则可以用自适应填充大小
或者按权重比设置占比,值越大,权重越高

简易演示

视频中是横向演示
我这里弄一个纵向演示

@Entry
@Component
struct Index {
   
   
  build() {
   
   
    Column(){
   
   
      Text('X轴布局')
        .padding(10)
        .backgroundColor(Color.Pink)
      Text('X轴布局')
        .padding(10)