HarmonyOS 速记

装饰器
- @Entry(入口)
- @Component(组件)
- @State(状态)
- @Prop(属性)
- @Preview(预览)
- - Previewer
  - Inspector
结构体
- struct
- build
- 自定义组件
- - 自定义 Custom 组件
容器
- Row(行) & Column(列)
- RelativeContainer(相对布局容器)
- margin
- padding
- Swiper(轮播图)
- Grid(网格容器)
- List(列表)
组件
- Image(图片)
- - 图片的填充模式
- Text(文本)
- - 组件：左上角对齐
  - 文字：左对齐
参考

装饰器

@Entry(入口)

@Entry 装饰的 @Component 将作为 UI 页面的入口
在单个 UI 页面中，最多可以使用@Entry 装饰一个自定义组件

@Entry
@Component
struct Index {

}

@Component(组件)

@Component 装饰了 struct 关键字声明的类 Index

Index 被 @Component 装饰后具备组件化的能力，通过实现 build 方法描述 UI
@Component 装饰的 struct 类必须添加 @Component 装饰器，开发工具有提示

@Component
struct Index {
	
	build() {
	
	}
}

@State(状态)

文本信息由 @State 装饰器装饰的状态变量 message 驱动

@State message: string = 'HarmonyOS 速记';

@Prop(属性)

@Prop 装饰器，用于从父组件接收数据

注意：加入 @Prop 后，Previewer 会失效

@Preview(预览)

Previewer

Previewer 可以直接预览 @Entry 装饰的整个页面
也可以预览由 @Preview 装饰的单独组件
预览 @Entry 装饰的整个页面时，需要选中 @Entry 所在的文件，Previewer 才能顺利打开
将 Previewer 调整至 ComponentMode，便可以单独预览组件视图
如果修改的是文本内容，则需要手动保存（即 ctrl+s）后，Previewer 才会更新
如果修改的是相关属性，则不需要手动保存，Previewer 也会实时更新
注意：此时的 Inspector 是不可用状态

Inspector

开启 Previewer 工具栏的 Inspector 工具，可以观察到当前组件树，并与 Previewer 交互

结构体

struct

定义组件结构体

@Component 装饰的 struct 类必须添加 @Component 装饰器，开发工具有提示
@Component 装饰的 struct 类必须重写 build 函数，开发工具有提示

struct Index {

}

build

组件通过 build 函数用于描述 UI

@Component 装饰的 struct 类必须重写 build 函数，开发工具有提示

 build() {
 	
 }

自定义组件

@Component
struct Custom {
  build() {
    
  }
}

自定义 Custom 组件

@Preview // 用于组件预览
@Component // 定义组件
struct Custom { // 组件名

  build() {
    Image($r('app.media.banner_pic1')) // 图片
      .width('100%') // 宽度
      .padding({ // 内边距
        left: 16,
        top: 10,
        right: 16,
        bottom: 10
      })
      .borderRadius(16) // 圆角
      .objectFit(ImageFit.Contain) // 缩放模式
  }
}

使用 Previewer 查看效果
自定义 Custom 组件

容器

Row(行) & Column(列)

    Row() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')

RelativeContainer(相对布局容器)

alignRules 在 RelativeContainer 中设置对齐规则（位置：上中下、左中右）

top、center、bottom 上中下
left、middle、right 左中右

注：alignRules 属性在 Row & Column 容器中无效

	// 水平、竖直居中
    RelativeContainer() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .alignRules({ // 对齐规则
            center: {
              anchor: '__container__',
              align: VerticalAlign.Center
            },
            middle: {
              anchor: '__container__',
              align: HorizontalAlign.Center
            }
          })
    }
    .width('100%')
    .height('100%')

正常效果：Start -> Top/Center/Bottom

异常效果：Start -> Top/Center/Bottom

正常效果：Top -> Start/Middle/End

异常效果：Top -> Start/Middle/End

函数 alignRules 声明

alignRules(value: AlignRuleOption): T;

参数 AlignRuleOption 源码

declare interface AlignRuleOption {
    top?: { // 上
        anchor: string;
        align: VerticalAlign;
    };
    center?: { // 中
        anchor: string;
        align: VerticalAlign;
    };
    bottom?: { // 下
        anchor: string;
        align: VerticalAlign;
    };
    
    left?: { // 左
        anchor: string;
        align: HorizontalAlign;
    };
    middle?: { // 中
        anchor: string;
        align: HorizontalAlign;
    };
    right?: { // 右
        anchor: string;
        align: HorizontalAlign;
    };

    bias?: Bias;
}

结论

top、center、bottom、left、middle、right

对应着设置子控件的基线，即以子控件的哪个位置作为对齐的基准点

VerticalAlign#Top、Center、Bottom & HorizontalAlign#Start、Center、End

这些属性才是对应着设置子控件相对于父布局的对齐规则，但需要配合上面的基准来使用才会得到想要的正确效果

margin

外边距

      Text(this.message)
      	// .margin(12)
        .margin({
          left: 20,
          top: 20,
          right: 20,
          bottom: 20
        })

padding

内边距

      Text(this.message)
      	// .padding(12)
        .padding({
          left: 20,
          top: 20,
          right: 20,
          bottom: 20
        })

Swiper(轮播图)

使用Swiper构建轮播图


@Entry
@Component
struct Index {
  @State message: string = 'HarmonyOS 速记';

  build() {

    Column() {
      // Title
      Text(this.message)
        .padding({
          left: 16,
          top: 10,
          right: 16,
          bottom: 10
        })
        .width('100%')
        .textAlign(TextAlign.Start)
        .fontWeight(FontWeight.Bold)

      // Banner
      Banner()
        .margin({
          left: 16,
          right: 16
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

@Preview
@Component
struct Banner {
  // Banner 数据源
  @State banners: Array<BannerBean> = [
    new BannerBean('pic0', $r('app.media.banner_pic0'),
      'https://developer.huawei.com/consumer/cn/training/course/video/C101718352529709527'),
    new BannerBean('pic1', $r('app.media.banner_pic1'),
      'https://developer.huawei.com/consumer/cn/'),
    new BannerBean('pic2', $r('app.media.banner_pic2'),
      'https://developer.huawei.com/consumer/cn/deveco-studio/'),
    new BannerBean('pic3', $r('app.media.banner_pic3'),
      'https://developer.huawei.com/consumer/cn/arkts/'),
    new BannerBean('pic4', $r('app.media.banner_pic4'),
      'https://developer.huawei.com/consumer/cn/arkui/'),
    new BannerBean('pic5', $r('app.media.banner_pic5'),
      'https://developer.huawei.com/consumer/cn/sdk')
  ];

  build() {
    Swiper() { // 轮播图
      ForEach(
        this.banners, // 数据源
        (item: BannerBean, index: number) => { // 用于生成 item 组件
          Image(item.imageSrc)
            .width('100%')
            .borderRadius( 10 ) // 设置图片的圆角，不是 Banner 的圆角，所以感觉有点怪异
            .objectFit(ImageFit.Contain)
        },
        (item: BannerBean, index: number) => item.id // 用于 item 增量更新，所以需要 id
      )
    }
    .autoPlay(true) // 开启自动播放
    .loop(true) // 开启轮训
    // .interval(1000) // 时间间隔
    // .indicator(true) // 使用默认的指示器
    .indicator( // 配置指示器
      new DotIndicator()
        .color('#1a000000')
        .selectedColor('#0A59F7')
    )
  }
}

/**
 * Banner 结构体
 */
class BannerBean {
  id: string = '';
  imageSrc: ResourceStr = '';
  url: string = '';

  constructor(id: string, imageSrc: ResourceStr, url: string) {
    this.id = id;
    this.imageSrc = imageSrc;
    this.url = url;
  }
}

Swiper 轮播图

Grid(网格容器)

网格容器，由“行”和“列”分割的单元格所组成，其中容器内各条目对应一个 GridItem 组件
如果仅设置行、列数量与占比中的一个，则网格单元将按照设置的方向排列，超出Grid显示区域后，Grid拥有可滚动能力
设置单行显示，则赋能套件部分可以横向滑动
网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局

List(列表)

List容器可以轻松高效地显示结构化、可滚动的信息。当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能

组件

Image(图片)

用于显示图片，使用 $r(‘app.media. 文件名字’) 将 media 文件夹下的图片读取到 Image 组件

    Image($r('app.media.banner_pic1')) // 设置图片资源
      .width('100%') // 宽度
      .padding({ // 内边距
        left: 16,
        top: 10,
        right: 16,
        bottom: 10
      })
      .borderRadius(16) // 圆角
      .objectFit(ImageFit.Contain) // 缩放模式

图片的填充模式

.objectFit(ImageFit.Contain)

设置图片的填充模式

Contain 模式，即保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内
Cover 模式，即保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

Text(文本)

组件：左上角对齐

      Text(this.message) // 默认宽度 wrap_content
        .id('HelloWorld')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontStyle(FontStyle.Italic)
        .lineHeight(55)
        .alignRules({ // 对齐规则：左上角（top、left） 为 对其基准点
          top: { // 上边缘 为 对其基准点
            anchor: '__container__',
            align: VerticalAlign.Top // 上对齐
          },
          left: { // 左边缘 为 对其基准点
            anchor: '__container__',
            align: HorizontalAlign.Start // 左对齐
          }
        })

文字：左对齐

      Text(this.message)
        .width('100%') // 设置宽度 match_parent
        .textAlign(TextAlign.Start) // 设置文字朝向 居左

参考

HarmonyOS应用开发快速入门