提交 deb78999 编写于 作者: Y yamila

update semicolon

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 c853f403
...@@ -64,7 +64,7 @@ struct GaugeExample { ...@@ -64,7 +64,7 @@ struct GaugeExample {
// 参数设置当前值为75,属性设置值为25,属性设置优先级高 // 参数设置当前值为75,属性设置值为25,属性设置优先级高
Gauge({ value: 75 }) Gauge({ value: 75 })
.value(25) //属性和参数都设置时以参数为准 .value(25) // 属性和参数都设置时以参数为准
.width(200).height(200) .width(200).height(200)
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
......
...@@ -353,17 +353,17 @@ struct ImageExample3 { ...@@ -353,17 +353,17 @@ struct ImageExample3 {
### 渲染沙箱路径图片 ### 渲染沙箱路径图片
``` ```
import fileio from '@ohos.fileio'; import fileio from '@ohos.fileio'
import image from '@ohos.multimedia.image'; import image from '@ohos.multimedia.image'
const EMPTY_PATH = 'file://'; const EMPTY_PATH = 'file://'
@Entry @Entry
@Component @Component
struct LoadImageExample { struct LoadImageExample {
@State fileContent: string = ''; @State fileContent: string = ''
@State path: string = EMPTY_PATH; @State path: string = EMPTY_PATH
@State accountInfoHeadPic: any = ''; @State accountInfoHeadPic: any = ''
build() { build() {
Column() { Column() {
...@@ -371,22 +371,22 @@ struct LoadImageExample { ...@@ -371,22 +371,22 @@ struct LoadImageExample {
.margin({ bottom: 10 }) .margin({ bottom: 10 })
.onClick(() => { .onClick(() => {
try { try {
this.path = EMPTY_PATH; this.path = EMPTY_PATH
let context = getContext(this); let context = getContext(this)
let path = context.getApplicationContext().filesDir + '/icon.png'; let path = context.getApplicationContext().filesDir + '/icon.png'
console.log(`读取沙箱图片=========>${path}`); console.log(`读取沙箱图片=========>${path}`)
let fd = fileio.openSync(path, 0o100, 0o666); let fd = fileio.openSync(path, 0o100, 0o666)
console.log(`create file========>${fd}`); console.log(`create file========>${fd}`)
let srcPath = context.bundleCodeDir + '/entry/resource/base/media/icon.png'; let srcPath = context.bundleCodeDir + '/entry/resource/base/media/icon.png'
fileio.copyFileSync(srcPath, path); fileio.copyFileSync(srcPath, path)
console.log(`error:=============>${e.message}`); console.log(`error:=============>${e.message}`)
} }
}) })
Button('读取资源图片') Button('读取资源图片')
.margin({ bottom: 10 }) .margin({ bottom: 10 })
.onClick(() => { .onClick(() => {
this.path = EMPTY_PATH; this.path = EMPTY_PATH;
this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png'); this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png')
}) })
Text(`图片路径:${this.path}`) Text(`图片路径:${this.path}`)
.fontSize(20) .fontSize(20)
......
...@@ -66,9 +66,9 @@ reset(): void ...@@ -66,9 +66,9 @@ reset(): void
@Entry @Entry
@Component @Component
struct PatternLockExample { struct PatternLockExample {
@State passwords: Number[] = []; @State passwords: Number[] = []
@State message: string = 'please input password!'; @State message: string = 'please input password!'
private patternLockController: PatternLockController = new PatternLockController(); private patternLockController: PatternLockController = new PatternLockController()
build() { build() {
Column() { Column() {
...@@ -85,29 +85,29 @@ struct PatternLockExample { ...@@ -85,29 +85,29 @@ struct PatternLockExample {
.onPatternComplete((input: Array<number>) => { .onPatternComplete((input: Array<number>) => {
// 输入的密码长度小于5时,提示重新输入 // 输入的密码长度小于5时,提示重新输入
if (input === null || input === undefined || input.length < 5) { if (input === null || input === undefined || input.length < 5) {
this.message = 'The password length needs to be greater than 5, please enter again.'; this.message = 'The password length needs to be greater than 5, please enter again.'
return; return
} }
// 判断密码长度是否大于0 // 判断密码长度是否大于0
if (this.passwords.length > 0) { if (this.passwords.length > 0) {
// 判断两次输入的密码是否相同,相同则提示密码设置成功,否则提示重新输入 // 判断两次输入的密码是否相同,相同则提示密码设置成功,否则提示重新输入
if (this.passwords.toString() === input.toString()) { if (this.passwords.toString() === input.toString()) {
this.passwords = input; this.passwords = input
this.message = 'Set password successfully: ' + this.passwords.toString(); this.message = 'Set password successfully: ' + this.passwords.toString()
} else { } else {
this.message = 'Inconsistent passwords, please enter again.'; this.message = 'Inconsistent passwords, please enter again.'
} }
} else { } else {
// 提示第二次输入密码 // 提示第二次输入密码
this.passwords = input; this.passwords = input
this.message = "Please enter again."; this.message = "Please enter again."
} }
}) })
Button('Reset PatternLock').margin(30).onClick(() => { Button('Reset PatternLock').margin(30).onClick(() => {
// 重置密码锁 // 重置密码锁
this.patternLockController.reset(); this.patternLockController.reset()
this.passwords = []; this.passwords = []
this.message = 'Please input password'; this.message = 'Please input password'
}) })
}.width('100%').height('100%') }.width('100%').height('100%')
} }
......
...@@ -75,9 +75,9 @@ caretPosition(value: number): void ...@@ -75,9 +75,9 @@ caretPosition(value: number): void
@Entry @Entry
@Component @Component
struct SearchExample { struct SearchExample {
@State changeValue: string = ''; @State changeValue: string = ''
@State submitValue: string = ''; @State submitValue: string = ''
controller: SearchController = new SearchController(); controller: SearchController = new SearchController()
build() { build() {
Column() { Column() {
...@@ -92,16 +92,16 @@ struct SearchExample { ...@@ -92,16 +92,16 @@ struct SearchExample {
.placeholderFont({ size: 14, weight: 400 }) .placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 }) .textFont({ size: 14, weight: 400 })
.onSubmit((value: string) => { .onSubmit((value: string) => {
this.submitValue = value; this.submitValue = value
}) })
.onChange((value: string) => { .onChange((value: string) => {
this.changeValue = value; this.changeValue = value
}) })
.margin(20) .margin(20)
Button('Set caretPosition 1') Button('Set caretPosition 1')
.onClick(() => { .onClick(() => {
// 设置光标位置到输入的第一个字符后 // 设置光标位置到输入的第一个字符后
this.controller.caretPosition(1); this.controller.caretPosition(1)
}) })
}.width('100%') }.width('100%')
} }
......
...@@ -75,14 +75,14 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty ...@@ -75,14 +75,14 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
@Entry @Entry
@Component @Component
struct SliderExample { struct SliderExample {
@State outSetValueOne: number = 40; @State outSetValueOne: number = 40
@State inSetValueOne: number = 40; @State inSetValueOne: number = 40
@State outSetValueTwo: number = 40; @State outSetValueTwo: number = 40
@State inSetValueTwo: number = 40; @State inSetValueTwo: number = 40
@State vOutSetValueOne: number = 40; @State vOutSetValueOne: number = 40
@State vInSetValueOne: number = 40; @State vInSetValueOne: number = 40
@State vOutSetValueTwo: number = 40; @State vOutSetValueTwo: number = 40
@State vInSetValueTwo: number = 40; @State vInSetValueTwo: number = 40
build() { build() {
Column({ space: 8 }) { Column({ space: 8 }) {
...@@ -96,8 +96,8 @@ struct SliderExample { ...@@ -96,8 +96,8 @@ struct SliderExample {
}) })
.showTips(true) .showTips(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.outSetValueOne = value; this.outSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
// toFixed(0)将滑动条返回值处理为整数精度 // toFixed(0)将滑动条返回值处理为整数精度
Text(this.outSetValueOne.toFixed(0)).fontSize(12) Text(this.outSetValueOne.toFixed(0)).fontSize(12)
...@@ -111,8 +111,8 @@ struct SliderExample { ...@@ -111,8 +111,8 @@ struct SliderExample {
}) })
.showSteps(true) .showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.outSetValueTwo = value; this.outSetValueTwo = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
Text(this.outSetValueTwo.toFixed(0)).fontSize(12) Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
} }
...@@ -131,8 +131,8 @@ struct SliderExample { ...@@ -131,8 +131,8 @@ struct SliderExample {
.selectedColor('#4169E1') .selectedColor('#4169E1')
.showTips(true) .showTips(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.inSetValueOne = value; this.inSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
Text(this.inSetValueOne.toFixed(0)).fontSize(12) Text(this.inSetValueOne.toFixed(0)).fontSize(12)
} }
...@@ -148,8 +148,8 @@ struct SliderExample { ...@@ -148,8 +148,8 @@ struct SliderExample {
.selectedColor('#4169E1') .selectedColor('#4169E1')
.showSteps(true) .showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.inSetValueTwo = value; this.inSetValueTwo = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
Text(this.inSetValueTwo.toFixed(0)).fontSize(12) Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
} }
...@@ -169,8 +169,8 @@ struct SliderExample { ...@@ -169,8 +169,8 @@ struct SliderExample {
.selectedColor('#4169E1') .selectedColor('#4169E1')
.showTips(true) .showTips(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.vOutSetValueOne = value; this.vOutSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
Slider({ Slider({
value: this.vOutSetValueTwo, value: this.vOutSetValueTwo,
...@@ -183,8 +183,8 @@ struct SliderExample { ...@@ -183,8 +183,8 @@ struct SliderExample {
.selectedColor('#4169E1') .selectedColor('#4169E1')
.showSteps(true) .showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.vOutSetValueTwo = value; this.vOutSetValueTwo = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
} }
}.width('50%').height(300) }.width('50%').height(300)
...@@ -200,8 +200,8 @@ struct SliderExample { ...@@ -200,8 +200,8 @@ struct SliderExample {
}) })
.showTips(true) .showTips(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.vInSetValueOne = value; this.vInSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
Slider({ Slider({
value: this.vInSetValueTwo, value: this.vInSetValueTwo,
...@@ -212,8 +212,8 @@ struct SliderExample { ...@@ -212,8 +212,8 @@ struct SliderExample {
}) })
.showSteps(true) .showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.vInSetValueTwo = value; this.vInSetValueTwo = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
} }
}.width('50%').height(300) }.width('50%').height(300)
......
...@@ -48,10 +48,10 @@ Stepper(value?: { index?: number }) ...@@ -48,10 +48,10 @@ Stepper(value?: { index?: number })
@Entry @Entry
@Component @Component
struct StepperExample { struct StepperExample {
@State currentIndex: number = 0; @State currentIndex: number = 0
@State firstState: ItemState = ItemState.Normal; @State firstState: ItemState = ItemState.Normal
@State secondState: ItemState = ItemState.Normal; @State secondState: ItemState = ItemState.Normal
@State thirdState: ItemState = ItemState.Normal; @State thirdState: ItemState = ItemState.Normal
build() { build() {
Stepper({ Stepper({
...@@ -67,7 +67,7 @@ struct StepperExample { ...@@ -67,7 +67,7 @@ struct StepperExample {
.margin({ top: 250, bottom: 50 }) .margin({ top: 250, bottom: 50 })
Button('change status:' + this.firstState) Button('change status:' + this.firstState)
.onClick(() => { .onClick(() => {
this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip; this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
}) })
}.width('100%') }.width('100%')
} }
...@@ -83,7 +83,7 @@ struct StepperExample { ...@@ -83,7 +83,7 @@ struct StepperExample {
.margin({ top: 250, bottom: 50 }) .margin({ top: 250, bottom: 50 })
Button('change status:' + this.secondState) Button('change status:' + this.secondState)
.onClick(() => { .onClick(() => {
this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled; this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled
}) })
}.width('100%') }.width('100%')
} }
...@@ -100,7 +100,7 @@ struct StepperExample { ...@@ -100,7 +100,7 @@ struct StepperExample {
.margin({ top: 250, bottom: 50 }) .margin({ top: 250, bottom: 50 })
Button('change status:' + this.thirdState) Button('change status:' + this.thirdState)
.onClick(() => { .onClick(() => {
this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting; this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
}) })
}.width('100%') }.width('100%')
} }
...@@ -119,14 +119,14 @@ struct StepperExample { ...@@ -119,14 +119,14 @@ struct StepperExample {
} }
.onFinish(() => { .onFinish(() => {
// 此处可处理点击最后一页的Finish时的逻辑,例如路由跳转等 // 此处可处理点击最后一页的Finish时的逻辑,例如路由跳转等
console.info('onFinish'); console.info('onFinish')
}) })
.onSkip(() => { .onSkip(() => {
// 此处可处理点击跳过时的逻辑,例如动态修改Stepper的index值使其跳转到某一步骤页等 // 此处可处理点击跳过时的逻辑,例如动态修改Stepper的index值使其跳转到某一步骤页等
console.info('onSkip'); console.info('onSkip')
}) })
.onChange((prevIndex: number, index: number) => { .onChange((prevIndex: number, index: number) => {
this.currentIndex = index; this.currentIndex = index
}) })
} }
} }
......
...@@ -85,7 +85,7 @@ struct TextAreaExample { ...@@ -85,7 +85,7 @@ struct TextAreaExample {
build() { build() {
Column() { Column() {
TextArea({ placeholder: 'input your word', controller: this.controller }) TextArea({ placeholder: 'The text area can hold an unlimited amount of text. input your word', controller: this.controller })
.placeholderFont({ size: 14, weight: 400 }) .placeholderFont({ size: 14, weight: 400 })
.width(400) .width(400)
.height(50) .height(50)
......
...@@ -112,8 +112,8 @@ caretPosition(value:&nbsp;number): void ...@@ -112,8 +112,8 @@ caretPosition(value:&nbsp;number): void
@Entry @Entry
@Component @Component
struct TextInputExample { struct TextInputExample {
@State text: string = ''; @State text: string = ''
controller: TextInputController = new TextInputController(); controller: TextInputController = new TextInputController()
build() { build() {
Column() { Column() {
...@@ -127,14 +127,14 @@ struct TextInputExample { ...@@ -127,14 +127,14 @@ struct TextInputExample {
.fontSize(14) .fontSize(14)
.fontColor(Color.Black) .fontColor(Color.Black)
.onChange((value: string) => { .onChange((value: string) => {
this.text = value; this.text = value
}) })
Text(this.text) Text(this.text)
Button('Set caretPosition 1') Button('Set caretPosition 1')
.margin(15) .margin(15)
.onClick(() => { .onClick(() => {
// 将光标移动至第一个字符后 // 将光标移动至第一个字符后
this.controller.caretPosition(1); this.controller.caretPosition(1)
}) })
// 密码输入框 // 密码输入框
TextInput({ placeholder: 'input your password...' }) TextInput({ placeholder: 'input your password...' })
......
...@@ -107,7 +107,7 @@ getXComponentContext() ...@@ -107,7 +107,7 @@ getXComponentContext()
```ts ```ts
// xxx.ets // xxx.ets
import camera from '@ohos.multimedia.camera'; import camera from '@ohos.multimedia.camera'
@Entry @Entry
@Component @Component
struct PreviewArea { struct PreviewArea {
...@@ -122,9 +122,9 @@ struct PreviewArea { ...@@ -122,9 +122,9 @@ struct PreviewArea {
}) })
.onLoad(() => { .onLoad(() => {
this.xcomponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080}); this.xcomponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080});
this.surfaceId = this.xcomponentController.getXComponentSurfaceId(); this.surfaceId = this.xcomponentController.getXComponentSurfaceId()
camera.createPreviewOutput(this.surfaceId).then((previewOutput) => { camera.createPreviewOutput(this.surfaceId).then((previewOutput) => {
console.log('Promise returned with the PreviewOutput instance'); console.log('Promise returned with the PreviewOutput instance')
}) })
}) })
.width('640px') .width('640px')
......
...@@ -36,7 +36,7 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number ...@@ -36,7 +36,7 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number
@Entry @Entry
@Component @Component
struct LongPressGestureExample { struct LongPressGestureExample {
@State count: number = 0; @State count: number = 0
build() { build() {
Column() { Column() {
...@@ -47,12 +47,12 @@ struct LongPressGestureExample { ...@@ -47,12 +47,12 @@ struct LongPressGestureExample {
// 由于repeat设置为true,长按动作存在时会连续触发,触发间隔为duration(默认值500ms) // 由于repeat设置为true,长按动作存在时会连续触发,触发间隔为duration(默认值500ms)
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
if (event.repeat) { if (event.repeat) {
this.count++; this.count++
} }
}) })
// 长按动作一结束触发 // 长按动作一结束触发
.onActionEnd(() => { .onActionEnd(() => {
this.count = 0; this.count = 0
}) })
) )
} }
......
...@@ -75,11 +75,11 @@ PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance ...@@ -75,11 +75,11 @@ PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance
@Entry @Entry
@Component @Component
struct PanGestureExample { struct PanGestureExample {
@State offsetX: number = 0; @State offsetX: number = 0
@State offsetY: number = 0; @State offsetY: number = 0
@State positionX: number = 0; @State positionX: number = 0
@State positionY: number = 0; @State positionY: number = 0
private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right }); private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })
build() { build() {
Column() { Column() {
...@@ -96,24 +96,24 @@ struct PanGestureExample { ...@@ -96,24 +96,24 @@ struct PanGestureExample {
.gesture( .gesture(
PanGesture(this.panOption) PanGesture(this.panOption)
.onActionStart((event: GestureEvent) => { .onActionStart((event: GestureEvent) => {
console.info('Pan start'); console.info('Pan start')
}) })
.onActionUpdate((event: GestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.offsetX = this.positionX + event.offsetX; this.offsetX = this.positionX + event.offsetX
this.offsetY = this.positionY + event.offsetY; this.offsetY = this.positionY + event.offsetY
}) })
.onActionEnd(() => { .onActionEnd(() => {
this.positionX = this.offsetX; this.positionX = this.offsetX
this.positionY = this.offsetY; this.positionY = this.offsetY
console.info('Pan end'); console.info('Pan end')
}) })
) )
Button('修改PanGesture触发条件') Button('修改PanGesture触发条件')
.onClick(() => { .onClick(() => {
// 将PanGesture手势事件触发条件改为双指以任意方向拖动 // 将PanGesture手势事件触发条件改为双指以任意方向拖动
this.panOption.setDirection(PanDirection.All); this.panOption.setDirection(PanDirection.All)
this.panOption.setFingers(2); this.panOption.setFingers(2)
}) })
} }
} }
......
...@@ -36,10 +36,10 @@ PinchGesture(value?: { fingers?: number, distance?: number }) ...@@ -36,10 +36,10 @@ PinchGesture(value?: { fingers?: number, distance?: number })
@Entry @Entry
@Component @Component
struct PinchGestureExample { struct PinchGestureExample {
@State scaleValue: number = 1; @State scaleValue: number = 1
@State pinchValue: number = 1; @State pinchValue: number = 1
@State pinchX: number = 0; @State pinchX: number = 0
@State pinchY: number = 0; @State pinchY: number = 0
build() { build() {
Column() { Column() {
...@@ -57,16 +57,16 @@ struct PinchGestureExample { ...@@ -57,16 +57,16 @@ struct PinchGestureExample {
.gesture( .gesture(
PinchGesture({ fingers: 3 }) PinchGesture({ fingers: 3 })
.onActionStart((event: GestureEvent) => { .onActionStart((event: GestureEvent) => {
console.info('Pinch start'); console.info('Pinch start')
}) })
.onActionUpdate((event: GestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.scaleValue = this.pinchValue * event.scale; this.scaleValue = this.pinchValue * event.scale
this.pinchX = event.pinchCenterX; this.pinchX = event.pinchCenterX
this.pinchY = event.pinchCenterY; this.pinchY = event.pinchCenterY
}) })
.onActionEnd(() => { .onActionEnd(() => {
this.pinchValue = this.scaleValue; this.pinchValue = this.scaleValue
console.info('Pinch end'); console.info('Pinch end')
}) })
) )
}.width('100%') }.width('100%')
......
...@@ -36,8 +36,8 @@ RotationGesture(value?: { fingers?: number, angle?: number }) ...@@ -36,8 +36,8 @@ RotationGesture(value?: { fingers?: number, angle?: number })
@Entry @Entry
@Component @Component
struct RotationGestureExample { struct RotationGestureExample {
@State angle: number = 0; @State angle: number = 0
@State rotateValue: number = 0; @State rotateValue: number = 0
build() { build() {
Column() { Column() {
...@@ -54,14 +54,14 @@ struct RotationGestureExample { ...@@ -54,14 +54,14 @@ struct RotationGestureExample {
.gesture( .gesture(
RotationGesture() RotationGesture()
.onActionStart((event: GestureEvent) => { .onActionStart((event: GestureEvent) => {
console.info('Rotation start'); console.info('Rotation start')
}) })
.onActionUpdate((event: GestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.angle = this.rotateValue + event.angle; this.angle = this.rotateValue + event.angle
}) })
.onActionEnd(() => { .onActionEnd(() => {
this.rotateValue = this.angle; this.rotateValue = this.angle
console.info('Rotation end'); console.info('Rotation end')
}) })
) )
}.width('100%') }.width('100%')
......
...@@ -42,8 +42,8 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num ...@@ -42,8 +42,8 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
@Entry @Entry
@Component @Component
struct SwipeGestureExample { struct SwipeGestureExample {
@State rotateAngle: number = 0; @State rotateAngle: number = 0
@State speed: number = 1; @State speed: number = 1
build() { build() {
Column() { Column() {
...@@ -60,8 +60,8 @@ struct SwipeGestureExample { ...@@ -60,8 +60,8 @@ struct SwipeGestureExample {
.gesture( .gesture(
SwipeGesture({ direction: SwipeDirection.Vertical }) SwipeGesture({ direction: SwipeDirection.Vertical })
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
this.speed = event.speed; this.speed = event.speed
this.rotateAngle = event.angle; this.rotateAngle = event.angle
}) })
) )
}.width('100%') }.width('100%')
......
...@@ -33,7 +33,7 @@ TapGesture(value?: { count?: number, fingers?: number }) ...@@ -33,7 +33,7 @@ TapGesture(value?: { count?: number, fingers?: number })
@Entry @Entry
@Component @Component
struct TapGestureExample { struct TapGestureExample {
@State value: string = ''; @State value: string = ''
build() { build() {
Column() { Column() {
...@@ -42,7 +42,7 @@ struct TapGestureExample { ...@@ -42,7 +42,7 @@ struct TapGestureExample {
.gesture( .gesture(
TapGesture({ count: 2 }) TapGesture({ count: 2 })
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
this.value = JSON.stringify(event.fingerList[0]); this.value = JSON.stringify(event.fingerList[0])
}) })
) )
Text(this.value) Text(this.value)
......
...@@ -39,12 +39,12 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[]) ...@@ -39,12 +39,12 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
@Entry @Entry
@Component @Component
struct GestureGroupExample { struct GestureGroupExample {
@State count: number = 0; @State count: number = 0
@State offsetX: number = 0; @State offsetX: number = 0
@State offsetY: number = 0; @State offsetY: number = 0
@State positionX: number = 0; @State positionX: number = 0
@State positionY: number = 0; @State positionY: number = 0
@State borderStyles: BorderStyle = BorderStyle.Solid; @State borderStyles: BorderStyle = BorderStyle.Solid
build() { build() {
Column() { Column() {
...@@ -57,37 +57,37 @@ struct GestureGroupExample { ...@@ -57,37 +57,37 @@ struct GestureGroupExample {
.margin(20) .margin(20)
.border({ width: 3, style: this.borderStyles }) .border({ width: 3, style: this.borderStyles })
.gesture( .gesture(
//以下组合手势为顺序识别,当长按手势事件未正常触发时则不会触发拖动手势事件 // 以下组合手势为顺序识别,当长按手势事件未正常触发时则不会触发拖动手势事件
GestureGroup(GestureMode.Sequence, GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: true }) LongPressGesture({ repeat: true })
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
if (event.repeat) { if (event.repeat) {
this.count++; this.count++
} }
console.info('LongPress onAction'); console.info('LongPress onAction')
}) })
.onActionEnd(() => { .onActionEnd(() => {
console.info('LongPress end'); console.info('LongPress end')
}), }),
PanGesture() PanGesture()
.onActionStart(() => { .onActionStart(() => {
this.borderStyles = BorderStyle.Dashed; this.borderStyles = BorderStyle.Dashed
console.info('pan start'); console.info('pan start')
}) })
.onActionUpdate((event: GestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.offsetX = this.positionX + event.offsetX; this.offsetX = this.positionX + event.offsetX
this.offsetY = this.positionY + event.offsetY; this.offsetY = this.positionY + event.offsetY
console.info('pan update'); console.info('pan update')
}) })
.onActionEnd(() => { .onActionEnd(() => {
this.positionX = this.offsetX; this.positionX = this.offsetX
this.positionY = this.offsetY; this.positionY = this.offsetY
this.borderStyles = BorderStyle.Solid; this.borderStyles = BorderStyle.Solid
console.info('pan end'); console.info('pan end')
}) })
) )
.onCancel(() => { .onCancel(() => {
console.info('sequence gesture canceled'); console.info('sequence gesture canceled')
}) })
) )
} }
......
...@@ -22,9 +22,9 @@ ImageBitmap对象可以存储canvas渲染的像素数据。 ...@@ -22,9 +22,9 @@ ImageBitmap对象可以存储canvas渲染的像素数据。
@Entry @Entry
@Component @Component
struct ImageExample { struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -33,7 +33,7 @@ ImageBitmap对象可以存储canvas渲染的像素数据。 ...@@ -33,7 +33,7 @@ ImageBitmap对象可以存储canvas渲染的像素数据。
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage( this.img,0,0,500,500,0,0,400,200); this.context.drawImage( this.img,0,0,500,500,0,0,400,200)
}) })
} }
.width('100%') .width('100%')
......
...@@ -23,8 +23,8 @@ ImageData对象可以存储canvas渲染的像素数据。 ...@@ -23,8 +23,8 @@ ImageData对象可以存储canvas渲染的像素数据。
@Entry @Entry
@Component @Component
struct Translate { struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() { build() {
...@@ -34,9 +34,9 @@ struct Translate { ...@@ -34,9 +34,9 @@ struct Translate {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage(this.img,0,0,130,130); this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130); var imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150); this.context.putImageData(imagedata,150,150)
}) })
} }
.width('100%') .width('100%')
......
...@@ -65,10 +65,10 @@ struct MyComponent { ...@@ -65,10 +65,10 @@ struct MyComponent {
}, },
}) })
.onConnect(() => { .onConnect(() => {
console.log('AbilityComponent connect'); console.log('AbilityComponent connect')
}) })
.onDisconnect(() => { .onDisconnect(() => {
console.log('AbilityComponent disconnect'); console.log('AbilityComponent disconnect')
}) })
} }
} }
......
...@@ -6,10 +6,6 @@ ...@@ -6,10 +6,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件 ## 子组件
可以包含子组件。 可以包含子组件。
......
...@@ -168,8 +168,8 @@ scrollBy(dx: Length, dy: Length): void ...@@ -168,8 +168,8 @@ scrollBy(dx: Length, dy: Length): void
@Entry @Entry
@Component @Component
struct ScrollExample { struct ScrollExample {
scroller: Scroller = new Scroller(); scroller: Scroller = new Scroller()
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
build() { build() {
Stack({ alignContent: Alignment.TopStart }) { Stack({ alignContent: Alignment.TopStart }) {
...@@ -193,33 +193,33 @@ struct ScrollExample { ...@@ -193,33 +193,33 @@ struct ScrollExample {
.scrollBarWidth(30) // 滚动条宽度 .scrollBarWidth(30) // 滚动条宽度
.edgeEffect(EdgeEffect.None) .edgeEffect(EdgeEffect.None)
.onScroll((xOffset: number, yOffset: number) => { .onScroll((xOffset: number, yOffset: number) => {
console.info(xOffset + ' ' + yOffset); console.info(xOffset + ' ' + yOffset)
}) })
.onScrollEdge((side: Edge) => { .onScrollEdge((side: Edge) => {
console.info('To the edge'); console.info('To the edge')
}) })
.onScrollEnd(() => { .onScrollEnd(() => {
console.info('Scroll Stop'); console.info('Scroll Stop')
}) })
Button('scroll 150') Button('scroll 150')
.onClick(() => { // 点击后下滑指定距离150.0vp .onClick(() => { // 点击后下滑指定距离150.0vp
this.scroller.scrollBy(0,150); this.scroller.scrollBy(0,150)
}) })
.margin({ top: 10, left: 20 }) .margin({ top: 10, left: 20 })
Button('scroll 100') Button('scroll 100')
.onClick(() => { // 点击后滑动到指定位置,即下滑100.0vp的距离 .onClick(() => { // 点击后滑动到指定位置,即下滑100.0vp的距离
this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }); this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
}) })
.margin({ top: 60, left: 20 }) .margin({ top: 60, left: 20 })
Button('back top') Button('back top')
.onClick(() => { // 点击后回到顶部 .onClick(() => { // 点击后回到顶部
this.scroller.scrollEdge(Edge.Top); this.scroller.scrollEdge(Edge.Top)
}) })
.margin({ top: 110, left: 20 }) .margin({ top: 110, left: 20 })
Button('next page') Button('next page')
.onClick(() => { // 点击后滑到下一页 .onClick(() => { // 点击后滑到下一页
this.scroller.scrollPage({ next: true }); this.scroller.scrollPage({ next: true })
}) })
.margin({ top: 170, left: 20 }) .margin({ top: 170, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC) }.width('100%').height('100%').backgroundColor(0xDCDCDC)
...@@ -235,8 +235,8 @@ struct ScrollExample { ...@@ -235,8 +235,8 @@ struct ScrollExample {
@Component @Component
struct NestedScroll { struct NestedScroll {
@State listPosition: number = 0; // 0代表滚动到List顶部,1代表中间值,2代表滚动到List底部。 @State listPosition: number = 0; // 0代表滚动到List顶部,1代表中间值,2代表滚动到List底部。
private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
private scroller: Scroller = new Scroller(); private scroller: Scroller = new Scroller()
build() { build() {
Flex() { Flex() {
...@@ -257,17 +257,17 @@ struct NestedScroll { ...@@ -257,17 +257,17 @@ struct NestedScroll {
} }
.width("100%").height("50%").edgeEffect(EdgeEffect.None) .width("100%").height("50%").edgeEffect(EdgeEffect.None)
.onReachStart(() => { .onReachStart(() => {
this.listPosition = 0; this.listPosition = 0
}) })
.onReachEnd(() => { .onReachEnd(() => {
this.listPosition = 2; this.listPosition = 2
}) })
.onScrollBegin((dx: number, dy: number) => { .onScrollBegin((dx: number, dy: number) => {
if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) { if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) {
this.scroller.scrollBy(0, -dy); this.scroller.scrollBy(0, -dy)
return { dxRemain: dx, dyRemain: 0 }; return { dxRemain: dx, dyRemain: 0 }
} }
this.listPosition = 1; this.listPosition = 1
return { dxRemain: dx, dyRemain: dy }; return { dxRemain: dx, dyRemain: dy };
}) })
......
...@@ -152,12 +152,12 @@ struct ShapeExample { ...@@ -152,12 +152,12 @@ struct ShapeExample {
@Entry @Entry
@Component @Component
struct ShapeMeshExample { struct ShapeMeshExample {
@State columnVal: number = 0; @State columnVal: number = 0
@State rowVal: number = 0; @State rowVal: number = 0
@State count: number = 0; @State count: number = 0
@State verts: Array<number> = []; @State verts: Array<number> = []
@State shapeWidth: number = 600; @State shapeWidth: number = 600
@State shapeHeight: number = 600; @State shapeHeight: number = 600
build() { build() {
Column() { Column() {
...@@ -186,34 +186,34 @@ struct ShapeMeshExample { ...@@ -186,34 +186,34 @@ struct ShapeMeshExample {
.height(this.shapeHeight + 'px') .height(this.shapeHeight + 'px')
// 手指触摸Shape组件时会显示mesh扭曲效果 // 手指触摸Shape组件时会显示mesh扭曲效果
.onTouch((event: TouchEvent) => { .onTouch((event: TouchEvent) => {
var touchX = event.touches[0].x * 2; var touchX = event.touches[0].x * 2
var touchY = event.touches[0].y * 2; var touchY = event.touches[0].y * 2
this.columnVal = 20; this.columnVal = 20
this.rowVal = 20; this.rowVal = 20
this.count = (this.columnVal + 1) * (this.rowVal + 1); this.count = (this.columnVal + 1) * (this.rowVal + 1)
var orig = [this.count * 2]; var orig = [this.count * 2]
var index = 0; var index = 0
for (var i = 0; i <= this.rowVal; i++) { for (var i = 0; i <= this.rowVal; i++) {
var fy = this.shapeWidth * i / this.rowVal; var fy = this.shapeWidth * i / this.rowVal
for (var j = 0; j <= this.columnVal; j++) { for (var j = 0; j <= this.columnVal; j++) {
var fx = this.shapeWidth * j / this.columnVal; var fx = this.shapeWidth * j / this.columnVal
orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx; orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx
orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy; orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy
index++; index++;
} }
} }
for (var k = 0; k < this.count * 2; k += 2) { for (var k = 0; k < this.count * 2; k += 2) {
var dx = touchX - orig[k + 0]; var dx = touchX - orig[k + 0]
var dy = touchY - orig[k + 1]; var dy = touchY - orig[k + 1]
var dd = dx * dx + dy * dy; var dd = dx * dx + dy * dy
var d = Math.sqrt(dd); var d = Math.sqrt(dd)
var pull = 80000 / (dd * d); var pull = 80000 / (dd * d)
if (pull >= 1) { if (pull >= 1) {
this.verts[k + 0] = touchX; this.verts[k + 0] = touchX
this.verts[k + 1] = touchY; this.verts[k + 1] = touchY
} else { } else {
this.verts[k + 0] = orig[k + 0] + dx * pull; this.verts[k + 0] = orig[k + 0] + dx * pull
this.verts[k + 1] = orig[k + 1] + dy * pull; this.verts[k + 1] = orig[k + 1] + dy * pull
} }
} }
}) })
......
...@@ -85,8 +85,8 @@ ...@@ -85,8 +85,8 @@
@Entry @Entry
@Component @Component
struct GestureSettingsExample { struct GestureSettingsExample {
@State priorityTestValue: string = ''; @State priorityTestValue: string = ''
@State parallelTestValue: string = ''; @State parallelTestValue: string = ''
build() { build() {
Column() { Column() {
...@@ -95,7 +95,7 @@ struct GestureSettingsExample { ...@@ -95,7 +95,7 @@ struct GestureSettingsExample {
.gesture( .gesture(
TapGesture() TapGesture()
.onAction(() => { .onAction(() => {
this.priorityTestValue += '\nText'; this.priorityTestValue += '\nText'
})) }))
} }
.height(200) .height(200)
...@@ -107,7 +107,7 @@ struct GestureSettingsExample { ...@@ -107,7 +107,7 @@ struct GestureSettingsExample {
.priorityGesture( .priorityGesture(
TapGesture() TapGesture()
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
this.priorityTestValue += '\nColumn'; this.priorityTestValue += '\nColumn'
}), GestureMask.IgnoreInternal) }), GestureMask.IgnoreInternal)
Column() { Column() {
...@@ -115,7 +115,7 @@ struct GestureSettingsExample { ...@@ -115,7 +115,7 @@ struct GestureSettingsExample {
.gesture( .gesture(
TapGesture() TapGesture()
.onAction(() => { .onAction(() => {
this.parallelTestValue += '\nText'; this.parallelTestValue += '\nText'
})) }))
} }
.height(200) .height(200)
...@@ -127,7 +127,7 @@ struct GestureSettingsExample { ...@@ -127,7 +127,7 @@ struct GestureSettingsExample {
.parallelGesture( .parallelGesture(
TapGesture() TapGesture()
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
this.parallelTestValue += '\nColumn'; this.parallelTestValue += '\nColumn'
}), GestureMask.Normal) }), GestureMask.Normal)
} }
} }
......
...@@ -41,13 +41,13 @@ struct TimePickerDialogExample { ...@@ -41,13 +41,13 @@ struct TimePickerDialogExample {
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
// 设置selectTime为按下确定按钮时的时间,这样当弹窗再次弹出时显示选中的为上一次确定的时间 // 设置selectTime为按下确定按钮时的时间,这样当弹窗再次弹出时显示选中的为上一次确定的时间
this.selectTime.setHours(value.hour, value.minute) this.selectTime.setHours(value.hour, value.minute)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
}, },
onCancel: () => { onCancel: () => {
console.info("TimePickerDialog:onCancel()"); console.info("TimePickerDialog:onCancel()")
}, },
onChange: (value: TimePickerResult) => { onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
} }
}) })
}) })
...@@ -59,13 +59,13 @@ struct TimePickerDialogExample { ...@@ -59,13 +59,13 @@ struct TimePickerDialogExample {
useMilitaryTime: true, useMilitaryTime: true,
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
this.selectTime.setHours(value.hour, value.minute) this.selectTime.setHours(value.hour, value.minute)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
}, },
onCancel: () => { onCancel: () => {
console.info("TimePickerDialog:onCancel()"); console.info("TimePickerDialog:onCancel()")
}, },
onChange: (value: TimePickerResult) => { onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
} }
}) })
}) })
......
...@@ -67,8 +67,8 @@ struct FillStyleExample { ...@@ -67,8 +67,8 @@ struct FillStyleExample {
.onReady(() =>{ .onReady(() =>{
this.offContext.fillStyle = '#0000ff' this.offContext.fillStyle = '#0000ff'
this.offContext.fillRect(20, 160, 150, 100) this.offContext.fillRect(20, 160, 150, 100)
var image = this.offContext.transferToImageBitmap(); var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image); this.context.transferFromImageBitmap(image)
}) })
} }
.width('100%') .width('100%')
...@@ -445,8 +445,8 @@ struct LineDashOffset { ...@@ -445,8 +445,8 @@ struct LineDashOffset {
.onReady(() =>{ .onReady(() =>{
this.offContext.arc(100, 75, 50, 0, 6.28) this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20]) this.offContext.setLineDash([10,20])
this.offContext.lineDashOffset = 10.0; this.offContext.lineDashOffset = 10.0
this.offContext.stroke(); this.offContext.stroke()
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -1373,10 +1373,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1373,10 +1373,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.beginPath(); this.offContext.beginPath()
this.offContext.moveTo(20, 20); this.offContext.moveTo(20, 20)
this.offContext.quadraticCurveTo(100, 100, 200, 20); this.offContext.quadraticCurveTo(100, 100, 200, 20)
this.offContext.stroke(); this.offContext.stroke()
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -1475,9 +1475,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1475,9 +1475,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.moveTo(100, 20); this.offContext.moveTo(100, 20)
this.offContext.arcTo(150, 20, 150, 70, 50); this.offContext.arcTo(150, 20, 150, 70, 50)
this.offContext.stroke(); this.offContext.stroke()
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -1664,17 +1664,17 @@ struct Fill { ...@@ -1664,17 +1664,17 @@ struct Fill {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D(); let region = new Path2D()
region.moveTo(30, 90); region.moveTo(30, 90)
region.lineTo(110, 20); region.lineTo(110, 20)
region.lineTo(240, 130); region.lineTo(240, 130)
region.lineTo(60, 130); region.lineTo(60, 130)
region.lineTo(190, 20); region.lineTo(190, 20)
region.lineTo(270, 90); region.lineTo(270, 90)
region.closePath(); region.closePath()
// Fill path // Fill path
this.offContext.fillStyle = 'green'; this.offContext.fillStyle = 'green'
this.offContext.fill(region, "evenodd"); this.offContext.fill(region, "evenodd")
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -1766,9 +1766,9 @@ struct Clip { ...@@ -1766,9 +1766,9 @@ struct Clip {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D(); let region = new Path2D()
region.rect(80,10,20,130); region.rect(80,10,20,130)
region.rect(40,50,100,50); region.rect(40,50,100,50)
this.offContext.clip(region,"evenodd") this.offContext.clip(region,"evenodd")
this.offContext.fillStyle = "rgb(255,0,0)" this.offContext.fillStyle = "rgb(255,0,0)"
this.offContext.fillRect(0, 0, 600, 600) this.offContext.fillRect(0, 0, 600, 600)
...@@ -2214,8 +2214,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData ...@@ -2214,8 +2214,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
@Entry @Entry
@Component @Component
struct GetImageData { struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
...@@ -2226,9 +2226,9 @@ struct GetImageData { ...@@ -2226,9 +2226,9 @@ struct GetImageData {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.drawImage(this.img,0,0,130,130); this.offContext.drawImage(this.img,0,0,130,130)
var imagedata = this.offContext.getImageData(50,50,130,130); var imagedata = this.offContext.getImageData(50,50,130,130)
this.offContext.putImageData(imagedata,150,150); this.offContext.putImageData(imagedata,150,150)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -2330,7 +2330,7 @@ struct SetLineDash { ...@@ -2330,7 +2330,7 @@ struct SetLineDash {
.onReady(() =>{ .onReady(() =>{
this.offContext.arc(100, 75, 50, 0, 6.28) this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20]) this.offContext.setLineDash([10,20])
this.offContext.stroke(); this.offContext.stroke()
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -2384,7 +2384,7 @@ struct OffscreenCanvasGetLineDash { ...@@ -2384,7 +2384,7 @@ struct OffscreenCanvasGetLineDash {
.onReady(() => { .onReady(() => {
this.offContext.arc(100, 75, 50, 0, 6.28) this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20]) this.offContext.setLineDash([10,20])
this.offContext.stroke(); this.offContext.stroke()
let res = this.offContext.getLineDash() let res = this.offContext.getLineDash()
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
...@@ -2437,7 +2437,7 @@ struct ToDataURL { ...@@ -2437,7 +2437,7 @@ struct ToDataURL {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var dataURL = this.offContext.toDataURL(); var dataURL = this.offContext.toDataURL()
}) })
} }
.width('100%') .width('100%')
...@@ -2534,11 +2534,11 @@ struct CanvasExample { ...@@ -2534,11 +2534,11 @@ struct CanvasExample {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.save(); // save the default state this.offContext.save() // save the default state
this.offContext.fillStyle = "green"; this.offContext.fillStyle = "green"
this.offContext.fillRect(20, 20, 100, 100); this.offContext.fillRect(20, 20, 100, 100)
this.offContext.restore(); // restore to the default state this.offContext.restore() // restore to the default state
this.offContext.fillRect(150, 75, 100, 100); this.offContext.fillRect(150, 75, 100, 100)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -2575,11 +2575,11 @@ struct CanvasExample { ...@@ -2575,11 +2575,11 @@ struct CanvasExample {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.save(); // save the default state this.offContext.save() // save the default state
this.offContext.fillStyle = "green"; this.offContext.fillStyle = "green"
this.offContext.fillRect(20, 20, 100, 100); this.offContext.fillRect(20, 20, 100, 100)
this.offContext.restore(); // restore to the default state this.offContext.restore() // restore to the default state
this.offContext.fillRect(150, 75, 100, 100); this.offContext.fillRect(150, 75, 100, 100)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
@Entry @Entry
@Component @Component
struct Index { struct Index {
@State outSetValue: number = 40; @State outSetValue: number = 40
build() { build() {
Row() { Row() {
...@@ -63,8 +63,8 @@ struct Index { ...@@ -63,8 +63,8 @@ struct Index {
}) })
.margin({ top: 30 }) .margin({ top: 30 })
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.outSetValue = value; this.outSetValue = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
} }
.width('100%') .width('100%')
......
...@@ -63,7 +63,7 @@ struct FocusableExample { ...@@ -63,7 +63,7 @@ struct FocusableExample {
.width(165) .width(165)
.height(40) .height(40)
.fontColor(Color.White) .fontColor(Color.White)
.focusOnTouch(true) //该Button组件点击后可获焦 .focusOnTouch(true) // 该Button组件点击后可获焦
Row({ space: 5 }) { Row({ space: 5 }) {
Button() Button()
.width(80) .width(80)
...@@ -73,7 +73,7 @@ struct FocusableExample { ...@@ -73,7 +73,7 @@ struct FocusableExample {
.width(80) .width(80)
.height(40) .height(40)
.fontColor(Color.White) .fontColor(Color.White)
.focusOnTouch(true) //该Button组件点击后可获焦 .focusOnTouch(true) // 该Button组件点击后可获焦
} }
Row({ space: 5 }) { Row({ space: 5 }) {
Button() Button()
...@@ -86,7 +86,7 @@ struct FocusableExample { ...@@ -86,7 +86,7 @@ struct FocusableExample {
.fontColor(Color.White) .fontColor(Color.White)
} }
}.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed) }.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed)
.tabIndex(1) //该Column组件为按TAB键走焦的第一个获焦的组件 .tabIndex(1) // 该Column组件为按TAB键走焦的第一个获焦的组件
Column({ space: 5 }) { Column({ space: 5 }) {
Button('Group2') Button('Group2')
.width(165) .width(165)
...@@ -101,7 +101,7 @@ struct FocusableExample { ...@@ -101,7 +101,7 @@ struct FocusableExample {
.width(80) .width(80)
.height(40) .height(40)
.fontColor(Color.White) .fontColor(Color.White)
.groupDefaultFocus(true) //该Button组件上级Column组件获焦时获焦 .groupDefaultFocus(true) // 该Button组件上级Column组件获焦时获焦
} }
Row({ space: 5 }) { Row({ space: 5 }) {
Button() Button()
...@@ -114,14 +114,14 @@ struct FocusableExample { ...@@ -114,14 +114,14 @@ struct FocusableExample {
.fontColor(Color.White) .fontColor(Color.White)
} }
}.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed) }.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed)
.tabIndex(2) //该Column组件为按TAB键走焦的第二个获焦的组件 .tabIndex(2) // 该Column组件为按TAB键走焦的第二个获焦的组件
} }
Column({ space: 5 }) { Column({ space: 5 }) {
TextInput({placeholder: 'input', text: this.inputValue}) TextInput({placeholder: 'input', text: this.inputValue})
.onChange((value: string) => { .onChange((value: string) => {
this.inputValue = value this.inputValue = value
}) })
.defaultFocus(true) //该TextInput组件为页面的初始默认焦点 .defaultFocus(true) // 该TextInput组件为页面的初始默认焦点
Button('Group3') Button('Group3')
.width(165) .width(165)
.height(40) .height(40)
...@@ -165,7 +165,7 @@ struct FocusableExample { ...@@ -165,7 +165,7 @@ struct FocusableExample {
.fontColor(Color.White) .fontColor(Color.White)
} }
}.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed) }.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed)
.tabIndex(3) //该Column组件为按TAB键走焦的第三个获焦的组件 .tabIndex(3) // 该Column组件为按TAB键走焦的第三个获焦的组件
}.alignItems(VerticalAlign.Top) }.alignItems(VerticalAlign.Top)
} }
} }
...@@ -200,7 +200,7 @@ focusControl.requestFocus示例代码: ...@@ -200,7 +200,7 @@ focusControl.requestFocus示例代码:
使用focusContrl.requestFocus接口使指定组件获取焦点。 使用focusContrl.requestFocus接口使指定组件获取焦点。
```ts ```ts
// requestFocus.ets // requestFocus.ets
import prompt from '@system.prompt'; import prompt from '@ohos.prompt'
@Entry @Entry
@Component @Component
...@@ -250,7 +250,7 @@ struct RequestFocusExample { ...@@ -250,7 +250,7 @@ struct RequestFocusExample {
Button("RequestFocus") Button("RequestFocus")
.width(200).height(70).fontColor(Color.White) .width(200).height(70).fontColor(Color.White)
.onClick(() => { .onClick(() => {
var res = focusControl.requestFocus(this.selectId) //使选中的this.selectId的组件获焦 var res = focusControl.requestFocus(this.selectId) // 使选中的this.selectId的组件获焦
if (res) { if (res) {
prompt.showToast({message: 'Request success'}) prompt.showToast({message: 'Request success'})
} else { } else {
......
...@@ -20,8 +20,6 @@ ...@@ -20,8 +20,6 @@
| -------------------------| ------------------------------------------------| -----| ----------------------------------------- | | -------------------------| ------------------------------------------------| -----| ----------------------------------------- |
| message | string | 是 | 弹窗信息内容。 | | message | string | 是 | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | 是否在组件上方显示,默认值为false。 | | placementOnTop | boolean | 否 | 是否在组件上方显示,默认值为false。 |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,数值为0表示箭头居最左侧,偏移量为箭头至最左侧的距离,默认居中。箭头在气泡左右侧时,偏移量为箭头至最上侧的距离,默认居中。 |
| showInSubWindow<sup>9+</sup> | boolean | 否 | 是否在子窗口显示气泡,默认值为false。 |
| primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 | | primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
| secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 | | secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
| onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 | | onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 |
...@@ -34,8 +32,6 @@ ...@@ -34,8 +32,6 @@
| -------------------------| ------------------------- | ---- | ---------------------------------------------------- | | -------------------------| ------------------------- | ---- | ---------------------------------------------------- |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。 | | builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。 |
| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置,当前位置显示不下时,会自动调整位置。<br/>默认值:Placement.Bottom | | placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置,当前位置显示不下时,会自动调整位置。<br/>默认值:Placement.Bottom |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,数值为0表示箭头居最左侧,偏移量为箭头至最左侧的距离,默认居中。箭头在气泡左右侧时,偏移量为箭头至最上侧的距离,默认居中。 |
| showInSubWindow<sup>9+</sup> | boolean | 否 | 是否在子窗口显示气泡,默认值为false。 |
| maskColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡遮障层的颜色。 | | maskColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡遮障层的颜色。 |
| popupColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡的颜色。 | | popupColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡的颜色。 |
| enableArrow | boolean | 否 | 是否显示箭头。<br/>从API Version 9开始,如果箭头所在方位侧的气泡长度不足以显示下箭头,则会默认不显示箭头。比如:placement设置为Left,但气泡高度小于箭头的宽度(32vp),则实际不会显示箭头。<br/>默认值:true | | enableArrow | boolean | 否 | 是否显示箭头。<br/>从API Version 9开始,如果箭头所在方位侧的气泡长度不足以显示下箭头,则会默认不显示箭头。比如:placement设置为Left,但气泡高度小于箭头的宽度(32vp),则实际不会显示箭头。<br/>默认值:true |
......
...@@ -50,12 +50,12 @@ ...@@ -50,12 +50,12 @@
@Entry @Entry
@Component @Component
struct DragExample { struct DragExample {
@State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']; @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']
@State text: string = ''; @State text: string = ''
@State bool: boolean = false; @State bool: boolean = false
@State appleVisible: Visibility = Visibility.Visible; @State appleVisible: Visibility = Visibility.Visible
@State orangeVisible: Visibility = Visibility.Visible; @State orangeVisible: Visibility = Visibility.Visible
@State bananaVisible: Visibility = Visibility.Visible; @State bananaVisible: Visibility = Visibility.Visible
// 自定义拖拽过程中显示的内容 // 自定义拖拽过程中显示的内容
@Builder pixelMapBuilder() { @Builder pixelMapBuilder() {
...@@ -87,10 +87,10 @@ struct DragExample { ...@@ -87,10 +87,10 @@ struct DragExample {
.backgroundColor(0xAFEEEE) .backgroundColor(0xAFEEEE)
.visibility(this.appleVisible) .visibility(this.appleVisible)
.onDragStart(() => { .onDragStart(() => {
this.bool = true; this.bool = true
this.text = 'apple'; this.text = 'apple'
this.appleVisible = Visibility.None; this.appleVisible = Visibility.None
return this.pixelMapBuilder; return this.pixelMapBuilder
}) })
Text('orange') Text('orange')
.width('25%') .width('25%')
...@@ -100,10 +100,10 @@ struct DragExample { ...@@ -100,10 +100,10 @@ struct DragExample {
.backgroundColor(0xAFEEEE) .backgroundColor(0xAFEEEE)
.visibility(this.orangeVisible) .visibility(this.orangeVisible)
.onDragStart(() => { .onDragStart(() => {
this.bool = true; this.bool = true
this.text = 'orange'; this.text = 'orange'
this.orangeVisible = Visibility.None; this.orangeVisible = Visibility.None
return this.pixelMapBuilder; return this.pixelMapBuilder
}) })
Text('banana') Text('banana')
.width('25%') .width('25%')
...@@ -113,11 +113,11 @@ struct DragExample { ...@@ -113,11 +113,11 @@ struct DragExample {
.backgroundColor(0xAFEEEE) .backgroundColor(0xAFEEEE)
.visibility(this.bananaVisible) .visibility(this.bananaVisible)
.onDragStart((event: DragEvent, extraParams: string) => { .onDragStart((event: DragEvent, extraParams: string) => {
console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
this.bool = true; this.bool = true
this.text = 'banana'; this.text = 'banana'
this.bananaVisible = Visibility.None; this.bananaVisible = Visibility.None
return this.pixelMapBuilder; return this.pixelMapBuilder
}) })
}.padding({ top: 10, bottom: 10 }).margin(10) }.padding({ top: 10, bottom: 10 }).margin(10)
...@@ -147,20 +147,20 @@ struct DragExample { ...@@ -147,20 +147,20 @@ struct DragExample {
.padding(15) .padding(15)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
.onDragEnter((event: DragEvent, extraParams: string) => { .onDragEnter((event: DragEvent, extraParams: string) => {
console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
}) })
.onDragMove((event: DragEvent, extraParams: string) => { .onDragMove((event: DragEvent, extraParams: string) => {
console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
}) })
.onDragLeave((event: DragEvent, extraParams: string) => { .onDragLeave((event: DragEvent, extraParams: string) => {
console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
}) })
.onDrop((event: DragEvent, extraParams: string) => { .onDrop((event: DragEvent, extraParams: string) => {
var jsonString = JSON.parse(extraParams); var jsonString = JSON.parse(extraParams);
if (this.bool) { if (this.bool) {
// 通过splice方法插入元素 // 通过splice方法插入元素
this.numbers.splice(jsonString.insertIndex, 0, this.text); this.numbers.splice(jsonString.insertIndex, 0, this.text)
this.bool = false; this.bool = false
} }
}) })
}.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
......
...@@ -36,20 +36,20 @@ ...@@ -36,20 +36,20 @@
@Entry @Entry
@Component @Component
struct KeyEventExample { struct KeyEventExample {
@State text: string = ''; @State text: string = ''
@State eventType: string = ''; @State eventType: string = ''
build() { build() {
Column() { Column() {
Button('KeyEvent') Button('KeyEvent')
.onKeyEvent((event: KeyEvent) => { .onKeyEvent((event: KeyEvent) => {
if (event.type === KeyType.Down) { if (event.type === KeyType.Down) {
this.eventType = 'Down'; this.eventType = 'Down'
} }
if (event.type === KeyType.Up) { if (event.type === KeyType.Up) {
this.eventType = 'Up'; this.eventType = 'Up'
} }
this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText; this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText
}) })
Text(this.text).padding(15) Text(this.text).padding(15)
}.height(300).width('100%').padding(35) }.height(300).width('100%').padding(35)
......
...@@ -19,32 +19,32 @@ ...@@ -19,32 +19,32 @@
```ts ```ts
// xxx.ets // xxx.ets
import prompt from '@ohos.prompt'; import prompt from '@ohos.prompt'
@Entry @Entry
@Component @Component
struct AppearExample { struct AppearExample {
@State isShow: boolean = true; @State isShow: boolean = true
@State changeAppear: string = 'Hide Text'; @State changeAppear: string = 'Hide Text'
private myText: string = 'Text for onAppear'; private myText: string = 'Text for onAppear'
build() { build() {
Column() { Column() {
Button(this.changeAppear) Button(this.changeAppear)
.onClick(() => { .onClick(() => {
this.isShow = !this.isShow; this.isShow = !this.isShow
}).margin(15) }).margin(15)
if (this.isShow) { if (this.isShow) {
Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold) Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
.onAppear(() => { .onAppear(() => {
this.changeAppear = 'Hide Text'; this.changeAppear = 'Hide Text'
prompt.showToast({ prompt.showToast({
message: 'The text is shown', message: 'The text is shown',
duration: 2000 duration: 2000
}) })
}) })
.onDisAppear(() => { .onDisAppear(() => {
this.changeAppear = 'Show Text'; this.changeAppear = 'Show Text'
prompt.showToast({ prompt.showToast({
message: 'The text is hidden', message: 'The text is hidden',
duration: 2000 duration: 2000
......
...@@ -45,42 +45,42 @@ ...@@ -45,42 +45,42 @@
@Entry @Entry
@Component @Component
struct TouchExample { struct TouchExample {
@State text: string = ''; @State text: string = ''
@State eventType: string = ''; @State eventType: string = ''
build() { build() {
Column() { Column() {
Button('Touch').height(40).width(100) Button('Touch').height(40).width(100)
.onTouch((event: TouchEvent) => { .onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) { if (event.type === TouchType.Down) {
this.eventType = 'Down'; this.eventType = 'Down'
} }
if (event.type === TouchType.Up) { if (event.type === TouchType.Up) {
this.eventType = 'Up'; this.eventType = 'Up'
} }
if (event.type === TouchType.Move) { if (event.type === TouchType.Move) {
this.eventType = 'Move'; this.eventType = 'Move'
} }
this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
+ event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height; + event.target.area.width + '\nheight:' + event.target.area.height
}) })
Button('Touch').height(50).width(200).margin(20) Button('Touch').height(50).width(200).margin(20)
.onTouch((event: TouchEvent) => { .onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) { if (event.type === TouchType.Down) {
this.eventType = 'Down'; this.eventType = 'Down'
} }
if (event.type === TouchType.Up) { if (event.type === TouchType.Up) {
this.eventType = 'Up'; this.eventType = 'Up'
} }
if (event.type === TouchType.Move) { if (event.type === TouchType.Move) {
this.eventType = 'Move'; this.eventType = 'Move'
} }
this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
+ event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height; + event.target.area.width + '\nheight:' + event.target.area.height
}) })
Text(this.text) Text(this.text)
}.width('100%').padding(30) }.width('100%').padding(30)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册