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应用开发快速入门