Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 deb78999 编写于 作者: Y yamila
浏览文件
操作

update semicolon 

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