HarmonyOS 速记

装饰器

@Entry(入口)

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

@Entry
@Component
struct Index {}

@Component(组件)

@Component 装饰了 struct 关键字声明的数据结构 Index
Index 被 @Component 装饰后具备组件化的能力，通过实现 build 方法描述 UI

@Component
struct Index {build() {}
}

@State(状态)

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

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

@Preview(预览)

Previewer

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

Inspector

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

结构体

struct

定义结构体，即数据结构

struct Index {}

build

build 方法用于描述 UI

 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) // 缩放模式}
}

容器

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%')

函数 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({left: 20,top: 20,right: 20,bottom: 20})

padding

内边距

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

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 模式，即保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内

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) // 设置文字朝向 居左

Swiper(轮播图)

使用Swiper构建轮播图

参考

HarmonyOS应用开发快速入门