Live Templates

WARNING

博主以下模版可以down下来导入-（自己也可自定义）持续更新
Gitee链接：https://gitee.com/BlocksArchitect/hongmeng-live-templates

导入方式

自定义模版方式

TIP

Abbreviation: ---- fori ---- DesCription: ---- i循环 ---- template text: 模版内容

fori i循环

javascript

for (let i = 0; i < $LIMIT$.length; i++) {
    $END$
}

forj j循环

javascript

for (let j = 0; j < $LIMIT$.length; j++) {
    $END$
}

foreach 循环渲染

javascript

ForEach($array$, (item: $type$) => {
  $end$
})

onclick 点击事件

javascript

.onClick(() => {
  $END$
 })

func 方法

javascript

$name$() {
  $END$
}

v1 @ComponentV1

javascript

@Component
export struct $compName$ {
build() {
  aboutToAppear(): void {
  }

  aboutToDisappear(): void {
  }

  @Builder
  containerBuilder() {
    Column() {

    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Orange)
  }

  build() {
    this.containerBuilder()
  }
 }
}

v2 @ComponentV2

javascript

@ComponentV2
export struct $compNmae$ {
build() {
  aboutToAppear(): void {
  }

  aboutToDisappear(): void {
  }

  @Builder
  containerBuilder() {
    Column() {

    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Orange)
  }

  build() {
    this.containerBuilder()
  }
 }
}

col 列容器宽高100

javascript

Column() {
  $END$
}
 .width('100%')
 .height('100%')
 .backgroundColor(Color.Orange)

row 行容器宽高100

javascript

Row() {
  $END$
}
 .width('100%')
 .height('100%')
 .backgroundColor(Color.Orange)

col 列容器

javascript

Column() {
  $END$
}

row 行容器

javascript

Row() {
  $END$
}

text 文本容器

javascript

Text() {
  $END$
}

image 图片

javascript

Image($r('app.media.$iamge$'))
  .syncLoad(true)
  .draggable(false)

list 列表滑动

javascript

List({ space: 5 }) {
  ForEach($arr$, (item: $type$) => {
    ListItem() {
     $end$
    }
  })
 }
 .listDirection(Axis.Vertical)
 .scrollBar(BarState.Off)
 .edgeEffect(EdgeEffect.Spring)

Builder 自定义构建函数

javascript

@Builder
 $name$() {
  $end$
}

wid100 宽100

javascript

.width('100%')

he100 高

javascript

.height('100%')

wh100 宽高100

javascript

.width('100%')
.height('100%')

wid 宽度自定义

javascript

.width($wid$)

he 高度自定义

javascript

.height($he$)

pad 四方内边距

javascript

.padding($pad$)

pada 左右上下内边距自定义

javascript

.padding({
  left: $left$,
  right: $right$,
  top: $top$,
  bottom: $bottom$
})

padl 左内边距自定义

javascript

.padding({ left: $left$ })

padr 右内边距自定义

javascript

.padding({ right: $right$ })

padlr 左右内边距自定义

javascript

.padding({ left: $left$, right: $right$ })

padt 上内边距自定义

javascript

.padding({ top: $top$ })

padb 下内边距自定义

javascript

.padding({ bottom: $bottom$ })

padlr 上下内边距自定义

javascript

.padding({ top: $top$, bottom: $bottom$ })

mar 四方外边距

javascript

.margin(mar)

mara 左右上下外边距自定义

javascript

.margin({
  left: $left$,
  right: $right$,
  top: $top$,
  bottom: $bottom$
})

marl 左外边距自定义

javascript

.margin({ left: $left$ })

marr 右外边距自定义

javascript

.margin({ right: $right$ })

marlr 左右外边距自定义

javascript

.margin({ left: $left$, right: $right$ })

mart 上外边距自定义

javascript

.margin({ top: $top$ })

marb 下外边距自定义

javascript

.margin({ bottom: $bottom$ })

marlr 上下外边距自定义

javascript

.margin({ top: $top$, bottom: $bottom$ })

styles 多态样式

javascript

.stateStyles({
  focused: {.$property$},
  pressed: {.$property$},
  normal: {.$property$}
})

stat State装饰器

javascript

@State $name$: $type$ = $value$

link Link装饰器

javascript

@Link $name$: $type$

prop Prop装饰器

javascript

@Prop $name$: $type$

prov Provide装饰器

javascript

@Provide $name$: $type$ = $value$

con Consume装饰器

javascript

@Consume $name$: $type$

local Local v2组件内部状态

javascript

@Local $name$: $type$ = $value$

param Param v2组件外部输入

javascript

@Require @Param $name$: $type$

once Once v2初始化同步一次

javascript

@Param @Once $name$: $type$ = $value$

event Event v2规范组件输出

javascript

@Event $name$: () => void = () => {}

prov2 Provider v2跨组件层级双向绑定

javascript

@Provider() $name$: $type$ = $value$

conv2 Provider v2跨组件层级双向绑定

javascript

@Consumer $name$: $type$ = $value$

moni Monitor v2状态变量修改监听

javascript

@Monitor('$keyName$')
  onStrChange(monitor: IMonitor) {
    monitor.dirty.forEach((path: string) => {
      let before = monitor.value(path)?.before as $type$
      let now = monitor.value(path)?.now as $type$
      console.log(`${path} changed from ${before} to ${now}`)
    })
  }

compv2 Computed v2计算属性

javascript

@Computed
get $name$() {
 return $end$
}

typev2 Type v2标记类属性的类型

javascript

@Type($className$)
@Trace $name$: $className$ = new $className$

pri private 标识

javascript

private $name$: $type$ = $value$

pub public 标识

javascript

public $name$: $type$ = $value$

const 常量名标识

javascript

const $key$ = $value$

let 变量名标识

javascript

let $key$ = $value$

Live Templates ​

导入方式 ​

自定义模版方式 ​

fori i循环 ​

forj j循环 ​

foreach 循环渲染 ​

onclick 点击事件 ​

func 方法 ​

v1 @ComponentV1 ​

v2 @ComponentV2 ​

col 列容器宽高100 ​

row 行容器宽高100 ​

col 列容器 ​

row 行容器 ​

text 文本容器 ​

image 图片 ​

list 列表滑动 ​

Builder 自定义构建函数 ​

wid100 宽100 ​

he100 高 ​

wh100 宽高100 ​

wid 宽度自定义 ​

he 高度自定义 ​

pad 四方内边距 ​

pada 左右上下内边距自定义 ​

padl 左内边距自定义 ​

padr 右内边距自定义 ​

padlr 左右内边距自定义 ​

padt 上内边距自定义 ​

padb 下内边距自定义 ​

padlr 上下内边距自定义 ​

mar 四方外边距 ​

mara 左右上下外边距自定义 ​

marl 左外边距自定义 ​

marr 右外边距自定义 ​

marlr 左右外边距自定义 ​

mart 上外边距自定义 ​

marb 下外边距自定义 ​

marlr 上下外边距自定义 ​

styles 多态样式 ​

stat State装饰器 ​

link Link装饰器 ​

prop Prop装饰器 ​

prov Provide装饰器 ​

con Consume装饰器 ​

local Local v2组件内部状态 ​

param Param v2组件外部输入 ​

once Once v2初始化同步一次 ​

event Event v2规范组件输出 ​

prov2 Provider v2跨组件层级双向绑定 ​

conv2 Provider v2跨组件层级双向绑定 ​

moni Monitor v2状态变量修改监听 ​

compv2 Computed v2计算属性 ​

typev2 Type v2标记类属性的类型 ​

pri private 标识 ​

pub public 标识 ​

const 常量名 标识 ​

let 变量名 标识 ​

组件模版 ​

Live Templates

导入方式

自定义模版方式

fori i循环

forj j循环

foreach 循环渲染

onclick 点击事件

func 方法

v1 @ComponentV1

v2 @ComponentV2

col 列容器宽高100

row 行容器宽高100

col 列容器

row 行容器

text 文本容器

image 图片

list 列表滑动

Builder 自定义构建函数

wid100 宽100

he100 高

wh100 宽高100

wid 宽度自定义

he 高度自定义

pad 四方内边距

pada 左右上下内边距自定义

padl 左内边距自定义

padr 右内边距自定义

padlr 左右内边距自定义

padt 上内边距自定义

padb 下内边距自定义

padlr 上下内边距自定义

mar 四方外边距

mara 左右上下外边距自定义

marl 左外边距自定义

marr 右外边距自定义

marlr 左右外边距自定义

mart 上外边距自定义

marb 下外边距自定义

marlr 上下外边距自定义

styles 多态样式

stat State装饰器

link Link装饰器

prop Prop装饰器

prov Provide装饰器

con Consume装饰器

local Local v2组件内部状态

param Param v2组件外部输入

once Once v2初始化同步一次

event Event v2规范组件输出

prov2 Provider v2跨组件层级双向绑定

conv2 Provider v2跨组件层级双向绑定

moni Monitor v2状态变量修改监听

compv2 Computed v2计算属性

typev2 Type v2标记类属性的类型

pri private 标识

pub public 标识

const 常量名标识

let 变量名标识

组件模版