组件布局 column  从上往下布局 （上下）

通用属性： width  height  border(边框） padding(内补丁） margin(外边距）

在column从上往下布局中只定义长宽会紧密排列

我们用margin将其一个一个隔开又太麻烦

可使用Column（{space： 5}）将所有的边框都隔开

px是物理单位  （根据手机实际单位每个手机都不同）

vp 虚拟单位

列的水平垂直和对齐的方法

将主轴和交叉轴对齐

交叉轴 ：  alignitems( ） 水平方向的对齐

主轴： justifyContent()

build() {
  Column({space: 5}){
  Text("你好，鸿蒙next")
    .width(150)
    .height(50)
    .border({
      width:1 ,
      color: Color.Red
    })


    Text("你好，鸿蒙next")
      .width(150)
      .height(50)
      .border({
        width:1 ,
        color: Color.Red
      })
    Text("你好，鸿蒙next")
      .width(150)
      .height(50)
      .border({
        width:1 ,
        color: Color.Red
      })
  }
  .width(300)
  .height(500)
  .border({color:'green',width:2})
  .alignItems(HorizontalAlign.Start)
  //FlexAlign.SpaceBetween
  .justifyContent(FlexAlign.SpaceAround)
}

下面演示做一个登陆案例

新建page

将图片粘贴到resources - media 路径中

Image($r('app.media.1'))

用$r找图的位置

TextInput可输入文本  text文本

.padding(20)  

加内补丁，使其不要与边框过分近

成果展示：

build() {
  Column({space:15}) {
    Image($r('app.media.1'))
      .width(150)
    TextInput({placeholder:"请输入账号："})
    TextInput({placeholder:"请输入密码："})
      .type(InputType.Password)
    Button('登陆')
      .width('100%')
  Row(){
    Text('忘记密码')
    Blank(30)
    Text('注册')
  }

      .padding(20)
  }
  .height('100%')
  .width('100%')
}

Row从左往右布局，操作类似 （左右）

除了start ， end，center外的一些其他操作，还有SpaceBetween,SpaceAround,SpaceEvenly

ui组件了解加用