鸿蒙开发组件之Row、Column_鸿蒙column函数

一、Row与Column

鸿蒙开发中对于线性控制控制控件主要依赖Row与Column。其中，Row是横向排列，可以理解为1行，然后，Column是作为竖向排列，可以理解为1列。

二、初始化方式

Row() {
    //里边写该行的子控件
}
 
Column() {
    //里边写该列的子控件
}

通过对Row与Column的互相嵌套来实现页面的UI布局。

三、主轴与交叉轴

Row与Column布局时有两个重要的概念，主轴与交叉轴，可以通过设置主轴与交叉轴的排列方式来改变子控件的排列方向以及间隔等

开发的过程中主要是对主轴的控制比较多，所以一般设置的属性是justifyContent。通过设置这个属性的枚举值来改变子控件的排布方式。

四、FlexAlign属性

通过设置Row与Column的justifyContent属性，控制子控件的排列方式。

五、其他

1、内外边距

我们可以通过设置padding与margin两个属性来达到精准控制内外边距。这两个属性参数都是对象类型我们可以这样设置

.padding({right:20,left:25,bottom:30,top:40}) //内边距
 
.margin({right:20,left:25,bottom:30,top:40}) //外边距
 

内边距可以理解一个Row中控件距离该Row的上下左右的距离。

外边距可以理解一个Row距离其他Row的上下左右的距离。

2、分割线Divider

可以通过控件Divider来实现页面中的线，实现方式

Divider()
   .width('90%')
   .backgroundColor('#fff')

设置一条分割线，白色的，长度是屏幕宽度的90%。