鸿蒙HarmonyOS NEXT 5.0开发（2）—— ArkUI布局&组件

• 华为官方教程
• B站视频教程

布局

主轴和交叉轴的概念：

• 对于Column布局而言，主轴是垂直方向，交叉轴是水平方向
• 对于Row布局而言，主轴是水平方向，交叉轴是垂直方向
  

Column：从上往下的布局

@Entry
@Component
struct Layouts {
   
  @State message: string = 'Hello World';

  build() {
   
    /*
    column：从上往下的布局
    {space:5}对应每个组件有.margin({top:5})
    * 对齐问题：
    *   主轴：从上往下的方向
    *   交叉轴：横向的为交叉轴
     */
    Column({
    space: 5}) {
   
      Text("你好，鸿蒙Next")
        // 组件的基础属性，宽度、高度、边框设置
        .width(150)
        .height(50)
        .border({
   
          width:1,
          color: 'red'
        })
      Text("你好，鸿蒙Next")
        .width(150)
        .height(50)
        .border({
   
          width:1,
          color: 'red'
        })
      Text("你好，鸿蒙Next")
        .width(150)
        .height(50)
        .border({
   
          width:1,
          color: 'red'
        })
    }
    .width(300)
    .height(500)
    .border({
   color: 'green', width:2})
    // 设置交叉轴方向的对齐：Start、Center、End
    .alignItems(HorizontalAlign.Start)
    // 设置主轴方向的对齐：Start、End、Center、SpaceBetween、SpaceAround、SpaceEvenly
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

@Entry
@Component
struct Layouts {
   
  @State message: string = 'Hello World';

  build() {
   
    /*
    用column实现登陆界面
     */
    Column({
    space:15}) {
   
      Image($r('app.media.startIcon'))
        .width(150)
      TextInput({
   placeholder: '请输入账号: '})
      TextInput({
   placeholder: '请输入密码: '})
        .type(InputType.Password)
      Button('登陆')
      	// 写函数去实现交互
        .onClick(()=>{
   
          // 创建一个对象，可以用字面量来写，需要该进成接口或类
          let obj: User = {
   
              name: "",
              pwd: ''
          }
          let user: UserInfo | null = null
          AlertDialog.show({
    message: JSON.stringify(user) })
        })
        .width('100%')
      Row() {
   
        Text('忘记密码？')
        Blank(30)
        Text('注册')
      }
    }
    .height('100%')
    .width('100%')
    .padding(20)
  }
}


interface User {
   
  name: string
  pwd: string
}


class UserInfo {
   
  name: string = ''
  pwd: string = ''

  // constructor(name: string, pwd: string) {
   
  //   this.name = name;
  //   this.pwd = pwd;
  // }
}

Row：从左往右的布局

@Entry
@Component
struct Layouts {
   
  @State message: string