装饰器

@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 查看效果

容器

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(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() {// TitleText(this.message).padding({left: 16,top: 10,right: 16,bottom: 10}).width('100%').textAlign(TextAlign.Start).fontWeight(FontWeight.Bold)// BannerBanner().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;}
}

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