Bootstrap

鸿蒙开发学习笔记——页面布局

一、线性布局组件

对齐方式:依靠容器的属性方法 

属性方法名说明参数
justifyContent设置子元素在主轴方向的对齐格式FlexAlign枚举
alignItems设置子元素在交叉轴方向的对齐格式

Row容器使用VerticalAlign枚举

Column容器使用HorizontalAlign枚举

新建一个.ets文件,输入以下代码:

@Entry
@Component
struct home {
  build(){
    Column({space:20}){
      Text('item1')
      Text('item2')
      Text('item3')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

预览图:

 

1.控制主轴属性方法justifyContent的参数FlexAlgn

1.1 Column容器

1.2 Row容器

2.控制交叉轴属性方法与参数

二、常见布局属性

内边距:padding

外边距:margin

;