ArkUI页面布局

对齐方式

对齐方式主要由两个属性方法来控制

justifyContent

FlexAlign枚举

start

Center

End

SpaceBetween

SpaceAround

SpaceEvenly

alignItems

Row容器使用VerticalAlign枚举

VerticalAlign枚举

Start

Center

End

Column使用HorizontalAlign枚举

HorizonAlign枚举

Start

Center

End

column容器

column容器，列容器

格式

Column({space?:number}){
//内部方法、容器
}

参数解析 

space

容器内部各个组件、容器之间的纵向间距

类属性类方法

justifyContent

.justifyContent(FlexAlign.xxx)

枚举具体内容及展示效果详见上文

.alignItems(VerticalAlign.xxx)

枚举具体内容及展示效果详见上文

宽度

.width()

高度

.height()

内边距

 .padding({left:11,right:11,top:11,bottom:11})

如果只给一number类型数值则四个内边距相同

.padding(20)

外边距 

.margin({left:1,right:1,top:1,bottom:1})

如果只给一number类型数值则四个内边距相同

.margin(29)

 

Row容器

row容器，行容器

格式

Row({space?:number}){
//内部方法、容器
}

参数解析

space

容器内部各个组件、容器之间的纵向间距

类属性类方法

justifyContent

.justifyContent(FlexAlign.xxx)

枚举具体内容及展示效果详见上文

.alignItems(VerticalAlign.xxx)

枚举具体内容及展示效果详见上文

宽度

.width()

高度

.height()

内边距

 .padding({left:11,right:11,top:11,bottom:11})

如果只给一number类型数值则四个内边距相同

.padding(20)

外边距 

.margin({left:1,right:1,top:1,bottom:1})

如果只给一number类型数值则四个内边距相同

.margin(29)