2024-02-22 使用Column和Row容器组件布局

Xnip2024-02-22_10-46-52.jpg

容器布局组件：

• Column表示沿垂直方向布局的容器。
• Row表示沿水平方向布局的容器。

主轴和交叉轴概念

• 主轴：
  在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；
  在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向。

• 交叉轴：
  与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。

对齐方式

Column和Row容器的两个属性justifyContent和alignItems。

• 主轴方向的对齐（justifyContent）
• 交叉轴方向的对齐（alignItems）

容器

Column和Row容器的接口都有一个可选参数space，表示子组件在主轴方向上的间距。

//Row有一个可选的参数
        Row({ space: 10 }) { 
//使用花括号包裹的代码块的这种方式描述子组件
          this.imageBtn($r('app.media.ic_ok'))
          this.imageBtn($r('app.media.ic_default'))
          this.imageBtn($r('app.media.app_icon'))
        }
    .justifyContent(FlexAlign.SpaceAround)
    .alignItems(HorizontalAlign.Start)

Row({ space: 10 }) 语法

TypeScript支持一些基础的数据类型:
布尔型、数组、字符串、元组、枚举、unkown、void、null、undefined、联合类型

那么这里的{space:10}属于什么类型？

declare const Row: RowInterface;

interface RowInterface { 
 
    (value?: {  
        space?: string | number;
    }): RowAttribute;
 
}

declare class RowAttribute extends CommonMethod<RowAttribute> {
  
    alignItems(value: VerticalAlign): RowAttribute;
 
    justifyContent(value: FlexAlign): RowAttribute;
}

测试

通过以下代码就实现了开头截图的界面布局效果。

import router from '@ohos.router'


@Entry
@Component
struct ContainerPage {
  @Builder backBtn() {
    Text('点击返回')
      .fontSize(50)
      .fontWeight(FontWeight.Bold).onClick(() => {
      router.back();
    });
  }

  @Builder imageBtn(src: Resource) {
    Button({ type: ButtonType.Circle, stateEffect: true }) {
      Image(src)
        .height($r('app.float.login_image_size'))
        .width($r('app.float.login_image_size'))
        .backgroundColor($r('app.color.imgBtnBackgroundColor'))
    }
  }

  build() {

    Column({ space: 20 }) {
      Column() {
        Image($r('app.media.app_icon'))
          .width(100)
          .height(100)
        Text('登录界面')
        Text('登录账号以使用更多服务')
        TextInput({ placeholder: '账号' })
        TextInput({ placeholder: '密码' })
          .type(InputType.Password)

        Row() {
          Text('短信验证码登录')
          Text('忘记密码').onClick(() => {
            router.back();
          });
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')

      }
      .justifyContent(FlexAlign.SpaceAround)
      .width('100%')
      .height('50%')

      Column({ space: 10 }) {
        Button('登录').onClick(() => {
          router.back();
        }).width('100%');

        Text('注册账号')
      }

      Column({ space: 10 }) {
        Text('其他方式登录')
          .fontColor($r('app.color.grayColor'))
          .fontSize(14)

        Row({ space: 10 }) {
          this.imageBtn($r('app.media.ic_ok'))
          this.imageBtn($r('app.media.ic_default'))
          this.imageBtn($r('app.media.app_icon'))
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceAround)
      }
    }
    .justifyContent(FlexAlign.SpaceAround)
    .alignItems(HorizontalAlign.Start)
    .width('100%')
    .height('100%')
    .padding(20)
  }
}