未验证 提交 3bab43b4 编写于 作者: O openharmony_ci 提交者: Gitee

!2595 add ace component

Merge pull request !2595 from 张绕/master
...@@ -9,13 +9,16 @@ ...@@ -9,13 +9,16 @@
# distributed under the License is distributed on an "AS IS" BASIS, # distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and # See the License for the specific language governing permissions and
# limitations under the License. # limitations under the License.
group("ace") { group("ace") {
testonly = true testonly = true
deps = [ deps = [
"ace_ets_component:AceEtsComponentTest", "ace_ets_component:AceEtsComponentTest",
"ace_ets_component:AceEtsComponentTest", "ace_ets_component_five:AceEtsComponentFiveTest",
"ace_ets_component_four:AceEtsComponentFourTest",
"ace_ets_component_three:AceEtsComponentThreeTest",
"ace_ets_component_two:AceEtsComponentTwoTest",
"ace_ets_standard:ActsAceEtsStTest", "ace_ets_standard:ActsAceEtsStTest",
"ace_ets_test:ActsAceEtsTest", "ace_ets_test:ActsAceEtsTest",
"ace_ets_third_test:ActsAceEtsThirdTest", "ace_ets_third_test:ActsAceEtsThirdTest",
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
# distributed under the License is distributed on an "AS IS" BASIS, # distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and # See the License for the specific language governing permissions and
# limitations under the License. # limitations under the License.
import("//test/xts/tools/build/suite.gni") import("//test/xts/tools/build/suite.gni")
......
...@@ -59,149 +59,27 @@ ...@@ -59,149 +59,27 @@
}, },
"pages": [ "pages": [
"pages/index", "pages/index",
"pages/toggle", "pages/appear",
"pages/actionSheet", "pages/areaChange",
"pages/gauge",
"pages/ellipse", "pages/ellipse",
"pages/systemRouterA",
"pages/systemRouterB",
"pages/marquee",
"pages/stepper",
"pages/list",
"pages/general-properties/sizeSetting",
"pages/general-properties/positionSetting",
"pages/general-properties/shapeClipping",
"pages/general-properties/opacitySetting",
"pages/swiper",
"pages/enable", "pages/enable",
"pages/general-properties/clickEvent", "pages/flex",
"pages/general-properties/layoutConstraints", "pages/gauge",
"pages/general-properties/colorGradient", "pages/global",
"pages/areaChange", "pages/gridContainer",
"pages/general-properties/textStyle", "pages/gridSettings",
"pages/appear", "pages/imageEffects",
"pages/layoutConstraints",
"pages/list",
"pages/marquee",
"pages/overlay", "pages/overlay",
"pages/general-properties/visibility", "pages/stepper",
"pages/zIndex",
"pages/general-properties/touchAble",
"pages/general-properties/imageEffects",
"pages/general-properties/transForm",
"pages/general-properties/touchAble",
"pages/general-properties/gridSettings",
"pages/general-properties/touch",
"pages/general-properties/border",
"pages/general-properties/flex",
"pages/swiper",
"pages/gridPage",
"pages/span",
"pages/text",
"pages/badge",
"pages/canvas",
"pages/longPressGesture",
"pages/badge",
"pages/button",
"pages/gridPage",
"pages/general-properties/touchAble",
"pages/swiper", "pages/swiper",
"pages/general-properties/visibility", "pages/textStyle",
"pages/general-properties/ResponseRegion", "pages/touchAble",
"pages/general-properties/PanGesture", "pages/touch",
"pages/QrCode", "pages/visibility",
"pages/tabs", "pages/zIndex"
"pages/tapGesture",
"pages/progress",
"pages/animate",
"pages/column",
"pages/rating",
"pages/canvas2",
"pages/shape",
"pages/motionPath",
"pages/scrollCode",
"pages/transition",
"pages/priorityGesture",
"pages/parallelGesture",
"pages/alertDialog",
"pages/blank",
"pages/sharedTransition",
"pages/sharedTransition2",
"pages/alphabetIndexer",
"pages/line",
"pages/circle",
"pages/aboutToDisappear",
"pages/timeStamp",
"pages/bindMenu",
"pages/bindPopup",
"pages/gridContainer",
"pages/direction",
"pages/divider",
"pages/listItem",
"pages/systemPrompt",
"pages/configuration",
"pages/sourceType",
"pages/NavigatorBackCode",
"pages/NavigatorCode",
"pages/NavigatorDetailCode",
"pages/PieceCode",
"pages/sourceType",
"pages/pageTransition",
"pages/pageTransition2",
"pages/scrollBar",
"pages/search",
"pages/pageTransition2",
"pages/lifecycle",
"pages/pageTransition2",
"pages/navigation",
"pages/stateStyle",
"pages/focus",
"pages/placement",
"pages/imageAnimator",
"pages/animationStatus",
"pages/sourceType",
"pages/curves",
"pages/gradientDirection",
"pages/enumsFlexAlign",
"pages/ohosRouterA",
"pages/ohosRouterB",
"pages/flexDirection",
"pages/flexWrap",
"pages/geometryTransition",
"pages/keyEvent",
"pages/enumsHorizontalAlign",
"pages/enumsVerticalAlign",
"pages/datePicker",
"pages/dragEvent",
"pages/direction2",
"pages/barState",
"pages/patternLock",
"pages/enumsImage",
"pages/slider",
"pages/edgeEffect",
"pages/appStorage",
"pages/checkbox",
"pages/checkboxGroup",
"pages/customDialogController",
"pages/select",
"pages/ohosMatrix4",
"pages/ohosPrompt",
"pages/select",
"pages/video",
"pages/refresh",
"pages/richText",
"pages/row",
"pages/textTimer",
"pages/textPickerDialog",
"pages/path",
"pages/edgeEffect",
"pages/enumsLineCapStyle",
"pages/pinchGestureInterface",
"pages/rotationGestureInterface",
"pages/gestureGroupInterface",
"pages/enumsItemAlign",
"pages/fillMode",
"pages/playMode",
"pages/swipeDirection",
"pages/gestureMode",
"pages/panDirection"
], ],
"name": ".MainAbility", "name": ".MainAbility",
"window": { "window": {
......
// @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
......
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@Entry
@Component
struct ActionSheetTest {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button('Click to Show ActionSheet')
.fontSize(20)
.key("actionSheet")
.onClick(() => {
ActionSheet.show({
title: 'ActionSheet title',
message: 'message',
confirm: {
value: 'Confirm button',
action: () => {
console.log('Get Alert Dialog handled')
}
},
sheets: [
{
title: 'apples',
action: () => {
console.log('apples')
}
},
{
title: 'bananas',
action: () => {
console.log('bananas')
}
},
{
title: 'pears',
action: () => {
console.log('pears')
}
}
]
})
})
}.width('100%')
.height('100%')
}
}
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@Entry
@Component
struct AlertDialogExample {
build() {
Column({ space: 5 }) {
Button('one button dialog')
.onClick(() => {
AlertDialog.show(
{
title: 'title',
message: 'text',
alignment: DialogAlignment.Center,
offset: {
dx: 100,
dy: 100
},
confirm: {
value: 'button',
action: () => {
console.info('Button-clicking callback')
}
},
cancel: () => {
console.info('Closed callbacks')
}
}
)
})
.backgroundColor(0x317aff)
Button('two button dialog')
.onClick(() => {
AlertDialog.show(
{
title: 'title',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
console.info('Callback when the first button is clicked')
}
},
secondaryButton: {
value: 'ok',
action: () => {
console.info('Callback when the second button is clicked')
}
},
cancel: () => {
console.info('Closed callbacks')
}
}
)
}).backgroundColor(0x317aff)
}.width('100%').margin({ top: 5 })
}
}
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct AlphabetIndexerSample {
private value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q',
'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
@State color: Color = Color.Red;
@State fontSize: string = 20;
@State fontWeight: FontWeight = FontWeight.Bolder;
@State fontFamily: string = 'sans-serif';
@State fontStyle: FontStyle = FontStyle.Italic;
@State offSetX: number = 10
@State offSetY: number = 10
build() {
AlphabetIndexer({ arrayValue: this.value, selected: 0 })
.selectedColor(0xffffff)
.selectedIndex(0)
.popupColor(0xFFFAF0)
.selectedBackgroundColor(0xCCCCCC)
.popupBackground(0xD2B48C)
.usingPopup(true)
.selectedFont({ size: 16, weight: FontWeight.Bolder })
.popupFont({ size: 30, weight: FontWeight.Bolder })
.itemSize(28)
.alignStyle(IndexerAlign.Left)
.popupPosition({offsetX: this.offSetX,offsetY: this.offSetY})
.onPopupSelected((index: number) =>{
console.info('index on action')
})
.onSelected((index: number) => {
console.info(this.value[index] + 'is choosen');
})
.onRequestPopupData((index: number) =>{
return this.value
})
.margin({ left: 50 })
.font({size: this.fontSize, weight: this.fontWeight, family: this.fontFamily, style: this.fontStyle })
.color(this.color)
.key('alphabetIndexer')
}
onPageShow() {
console.info('alphabetIndexer page show called');
var stateChangeEvent = {
eventId: 71,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(stateChangeEvent, this.stateChangCallBack);
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("alphabetIndexer page state change called:" + JSON.stringify(eventData));
let font = JSON.parse(eventData.data.font);
if(font) {
this.fontSize = font.size;
this.fontWeight = font.weight;
this.fontFamily = font.family;
this.fontStyle = font.style;
}
}
}
}
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct AppStorageExp {
@State countDownStartValue: number = 10 // 10 Nuggets default start value in a Game
build() {
Column() {
Text(`Grant ${this.countDownStartValue} nuggets to play.`)
Button() {
Text('+1 - Nuggets in New Game')
}.onClick(() => {
this.countDownStartValue += 1
})
Button() {
Text('-1 - Nuggets in New Game')
}.onClick(() => {
this.countDownStartValue -= 1
})
// 创建子组件时,必须在构造函数参数中提供其@Prop变量的初始值,同时初始化常规变量CostOfOneAttump(非Prop)
CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2 })
}
}
}
@Component
struct CountDownComponent {
@Prop count: number
private costOfOneAttempt: number
build() {
Column() {
if (this.count > 0) {
Text(`You have ${this.count} Nuggets left`)
} else {
Text('Game over!')
}
Button() {
Text('Try again')
}.onClick(() => {
this.count -= this.costOfOneAttempt
})
}
}
}
\ No newline at end of file
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import events_emitter from '@ohos.events.emitter'
import prompt from '@system.prompt' import events_emitter from '@ohos.emitter'
import prompt from '@system.prompt'
@Entry
@Preview @Entry
@Component @Preview
struct AppearExample { @Component
@State isShow: boolean = true struct AppearExample {
@State appearFlag: boolean = false @State isShow: boolean = true
@State disAppearFlag: boolean = false @State appearFlag: boolean = false
private changeAppear: string = 'Hide Text' @State disAppearFlag: boolean = false
private myText: string = 'Text for onAppear' private changeAppear: string = 'Hide Text'
private myText: string = 'Text for onAppear'
onPageShow() {
console.info('[appear] page show called'); onPageShow() {
var stateChangeEvent = { console.info('[appear] page show called');
eventId: 15, var stateChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 58,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent, this.stateChangCallBack); }
} events_emitter.on(stateChangeEvent, this.stateChangCallBack);
}
private stateChangCallBack = (eventData) => {
console.info("[appear] page stateChangCallBack"); private stateChangCallBack = (eventData) => {
if (eventData != null) { console.info("[appear] page stateChangCallBack");
console.info("[appear] page state change called:" + JSON.stringify(eventData)); if (eventData != null) {
if(eventData.data.isShow != null) { console.info("[appear] page state change called:" + JSON.stringify(eventData));
this.isShow = eventData.data.isShow; if(eventData.data.isShow != null) {
} this.isShow = eventData.data.isShow;
} }
} }
}
build() {
Column() { build() {
Button(this.changeAppear) Column() {
.key('appear') Button(this.changeAppear)
.onClick(() => { .key('appear')
this.isShow = !this.isShow .onClick(() => {
}).margin(3).backgroundColor(0x2788D9) this.isShow = !this.isShow
if (this.isShow) { }).margin(3).backgroundColor(0x2788D9)
Text(this.myText) if (this.isShow) {
.onAppear(() => { Text(this.myText)
this.appearFlag = true .onAppear(() => {
this.changeAppear = 'Show Text' this.appearFlag = true
console.info('appearFlag current action state is: ' + this.appearFlag); this.changeAppear = 'Show Text'
prompt.showToast({ message: 'The text is shown', duration: 2000 }) console.info('appearFlag current action state is: ' + this.appearFlag);
try{ prompt.showToast({ message: 'The text is shown', duration: 2000 })
var backData = { try{
data: { var backData = {
"ACTION": this.appearFlag, data: {
} "ACTION": this.appearFlag,
} }
var backEvent = { }
eventId: 15, var backEvent = {
priority: events_emitter.EventPriority.LOW eventId: 59,
} priority: events_emitter.EventPriority.LOW
console.info("appearFlag start to emit action state") }
events_emitter.emit(backEvent, backData) console.info("appearFlag start to emit action state")
}catch{ events_emitter.emit(backEvent, backData)
console.info("appearFlag emit action state err: " + JSON.stringify(err.message)) }catch{
} console.info("appearFlag emit action state err: " + JSON.stringify(err.message))
}) }
.onDisAppear(() => { })
this.disAppearFlag = true .onDisAppear(() => {
this.changeAppear = 'Hide Text' this.disAppearFlag = true
console.info('disAppearFlag current action state is: ' + this.disAppearFlag); this.changeAppear = 'Hide Text'
prompt.showToast({ message: 'The text is hidden', duration: 2000 }) console.info('disAppearFlag current action state is: ' + this.disAppearFlag);
try{ prompt.showToast({ message: 'The text is hidden', duration: 2000 })
var backData = { try{
data: { var backData = {
"ACTION": this.disAppearFlag, data: {
} "ACTION": this.disAppearFlag,
} }
var backEvent = { }
eventId: 16, var backEvent = {
priority: events_emitter.EventPriority.LOW eventId: 60,
} priority: events_emitter.EventPriority.LOW
console.info("disAppearFlag start to emit action state") }
events_emitter.emit(backEvent, backData) console.info("disAppearFlag start to emit action state")
}catch{ events_emitter.emit(backEvent, backData)
console.info("disAppearFlag emit action state err: " + JSON.stringify(err.message)) }catch{
} console.info("disAppearFlag emit action state err: " + JSON.stringify(err.message))
}) }
} })
}.padding(30).width('100%') }
} }.padding(30).width('100%')
}
} }
\ No newline at end of file
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import events_emitter from '@ohos.events.emitter';
@Entry import events_emitter from '@ohos.emitter';
@Component
struct AreaExample { @Entry
@State value: string = 'Text'; @Component
@State size: string = ''; struct AreaExample {
@State onActionCalled: boolean = false; @State value: string = 'Text';
@State size: string = '';
build() { @State onActionCalled: boolean = false;
Column() {
Text(this.value) build() {
.key('text1') Column() {
.backgroundColor(Color.Green) Text(this.value)
.margin(30) .key('text1')
.fontSize(20) .backgroundColor(Color.Green)
.onClick(() => { .margin(30)
this.value = this.value + 'Text' .fontSize(20)
try { .onClick(() => {
var backData = { this.value = this.value + 'Text'
data: { try {
"value": this.value, var backData = {
} data: {
} "value": this.value,
var backEvent = { }
eventId: 21, }
priority: events_emitter.EventPriority.LOW var backEvent = {
} eventId: 61,
console.info("onClick start to emit action state") priority: events_emitter.EventPriority.LOW
events_emitter.emit(backEvent, backData) }
} catch (err) { console.info("onClick start to emit action state")
console.info("onClick emit action state err: " + JSON.stringify(err.message)) events_emitter.emit(backEvent, backData)
} } catch (err) {
}) console.info("onClick emit action state err: " + JSON.stringify(err.message))
.onAreaChange((oldValue: Area, newValue: Area) => { }
console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} newvalue is ${JSON.stringify(newValue)}`) })
this.size = JSON.stringify(newValue) .onAreaChange((oldValue: Area, newValue: Area) => {
this.onActionCalled = true; console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} newvalue is ${JSON.stringify(newValue)}`)
console.info('onAreaChange current action state is: ' + this.onActionCalled); this.size = JSON.stringify(newValue)
try { this.onActionCalled = true;
var backData = { console.info('onAreaChange current action state is: ' + this.onActionCalled);
data: { try {
"ACTION": this.onActionCalled, var backData = {
} data: {
} "ACTION": this.onActionCalled,
var backEvent = { }
eventId: 22, }
priority: events_emitter.EventPriority.LOW var backEvent = {
} eventId: 62,
console.info("onAreaChange start to emit action state") priority: events_emitter.EventPriority.LOW
events_emitter.emit(backEvent, backData) }
} catch (err) { console.info("onAreaChange start to emit action state")
console.info("onAreaChange emit action state err: " + JSON.stringify(err.message)) events_emitter.emit(backEvent, backData)
} } catch (err) {
}) console.info("onAreaChange emit action state err: " + JSON.stringify(err.message))
Text('new area is: \n' + this.size) }
.key('text2') })
.margin({ right: 30, left: 30 }) Text('new area is: \n' + this.size)
} .key('text2')
.width('100%').height('100%').margin({ top: 30 }) .margin({ right: 30, left: 30 })
} }
.width('100%').height('100%').margin({ top: 30 })
}
} }
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct ScrollBarExample {
private scroller: Scroller = new Scroller()
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
build() {
Column() {
Stack({ alignContent: Alignment.End }) {
Scroll(this.scroller) {
Flex({ direction: FlexDirection.Column }) {
ForEach(this.arr, (item) => {
Row() {
Text(item.toString())
.width('90%')
.height(100)
.backgroundColor('#3366CC')
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.margin({ top: 5 })
}
}, item => item)
}.margin({ left: 52 })
}
.scrollBar(BarState.On)
.scrollable(ScrollDirection.Vertical)
ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
Text()
.width(30)
.height(100)
.borderRadius(10)
.backgroundColor('#C0C0C0')
}.width(30).backgroundColor('#ededed')
}
}
}
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@Entry
@Component
struct ColumnExample {
build() {
Column({ space: 5 }) {
Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column({ space: 5 }) {
Column().width('100%').height(50).backgroundColor(0xAFEEEE)
Column().width('100%').height(50).backgroundColor(0x00FFFF).key('column')
}.width('90%').height(107).border({ width: 1 })
Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('50%').height(50).backgroundColor(0xAFEEEE)
Column().width('50%').height(50).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('50%').height(50).backgroundColor(0xAFEEEE)
Column().width('50%').height(50).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
}.width('100%').padding({ top: 5 })
}
}
\ No newline at end of file
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import events_emitter from '@ohos.events.emitter';
import events_emitter from '@ohos.emitter';
@Entry
@Component @Entry
struct EllipseExample { @Component
@State width: string = "200px"; struct EllipseExample {
@State height: string = "200px"; @State width: string = "200px";
@State height: string = "200px";
onPageShow() {
console.info('[ellipse] page show called'); onPageShow() {
var stateChangeEvent = { console.info('[ellipse] page show called');
eventId: 5, var stateChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 92,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent, this.stateChangCallBack); }
} events_emitter.on(stateChangeEvent, this.stateChangCallBack);
}
private stateChangCallBack = (eventData) => {
console.info("[ellipse] page stateChangCallBack"); private stateChangCallBack = (eventData) => {
if (eventData != null) { console.info("[ellipse] page stateChangCallBack");
console.info("[ellipse] page state change called:" + JSON.stringify(eventData)); if (eventData != null) {
if(eventData.data.width != null) { console.info("[ellipse] page state change called:" + JSON.stringify(eventData));
this.width = eventData.data.width; if(eventData.data.width != null) {
} this.width = eventData.data.width;
if(eventData.data.height != null) { }
this.height = eventData.data.height; if(eventData.data.height != null) {
} this.height = eventData.data.height;
} }
} }
}
build() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center,justifyContent: FlexAlign.Center}) { build() {
Ellipse().width(`${this.width}`).height(`${this.height}`).key('ellipse') Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center,justifyContent: FlexAlign.Center}) {
}.width('100%').height('100%') Ellipse().width(`${this.width}`).height(`${this.height}`).key('ellipse')
} }.width('100%').height('100%')
}
} }
\ No newline at end of file
/** // @ts-nocheck
* Copyright (c) 2021 Huawei Device Co., Ltd. /**
* Licensed under the Apache License, Version 2.0 (the "License"); * Copyright (c) 2021 Huawei Device Co., Ltd.
* you may not use this file except in compliance with the License. * Licensed under the Apache License, Version 2.0 (the "License");
* You may obtain a copy of the License at * you may not use this file except in compliance with the License.
* * You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0 *
* * http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software *
* distributed under the License is distributed on an "AS IS" BASIS, * Unless required by applicable law or agreed to in writing, software
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * distributed under the License is distributed on an "AS IS" BASIS,
* See the License for the specific language governing permissions and * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* limitations under the License. * See the License for the specific language governing permissions and
*/ * limitations under the License.
*/
import events_emitter from '@ohos.events.emitter' import events_emitter from '@ohos.emitter'
@Entry @Entry
@Component @Component
struct EnabledExample { struct EnabledExample {
@State enabled: boolean = true; @State enabled: boolean = true;
@State text: string = "enable"; @State text: string = "enable";
onPageShow() { onPageShow() {
console.info('[enabled] page show called '); console.info('[enabled] page show called ');
var stateChangeEvent = { var stateChangeEvent = {
eventId: 82, eventId: 93,
priority: events_emitter.EventPriority.LOW priority: events_emitter.EventPriority.LOW
} }
events_emitter.on(stateChangeEvent, this.stateChangCallBack); events_emitter.on(stateChangeEvent, this.stateChangCallBack);
} }
private stateChangCallBack = (eventData) => { private stateChangCallBack = (eventData) => {
console.info("[stateChangCallBack] stateChangCallBack "); console.info("[stateChangCallBack] stateChangCallBack ");
if (eventData != null) { if (eventData != null) {
console.info("[stateChangCallBack] state change called: " + JSON.stringify(eventData)); console.info("[stateChangCallBack] state change called: " + JSON.stringify(eventData));
if (eventData.data.enabled != null) { if (eventData.data.enabled != null) {
this.enabled = eventData.data.enabled this.enabled = eventData.data.enabled
} }
if (eventData.data.text != null) { if (eventData.data.text != null) {
this.text = eventData.data.text this.text = eventData.data.text
} }
} }
} }
build() { build() {
Flex({ justifyContent: FlexAlign.SpaceAround }) { Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('disable') Button('disable')
.enabled(false) .enabled(false)
.backgroundColor(0x317aff) .backgroundColor(0x317aff)
.opacity(0.4) .opacity(0.4)
Button(this.text) Button(this.text)
.key('enabled') .key('enabled')
.backgroundColor(0x317aff) .backgroundColor(0x317aff)
.enabled(this.enabled) .enabled(this.enabled)
} }
.width('100%') .width('100%')
.padding({ top: 5 }) .padding({ top: 5 })
} }
} }
\ No newline at end of file
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import events_emitter from '@ohos.events.emitter'
import events_emitter from '@ohos.emitter'
@Entry
@Component @Entry
struct FlexExample { @Component
@State direction: FlexDirection = FlexDirection.Row struct FlexExample {
private stateChangCallBack = (eventData) => { @State direction: FlexDirection = FlexDirection.Row
if (eventData != null) { private stateChangCallBack = (eventData) => {
console.info("Flex page state change called:" + JSON.stringify(eventData)); if (eventData != null) {
if(eventData.data.flexBasis != null) { console.info("Flex page state change called:" + JSON.stringify(eventData));
this.flexBasis = eventData.data.flexBasis; if(eventData.data.flexBasis != null) {
} this.flexBasis = eventData.data.flexBasis;
if(eventData.data.flexGrow != null) { }
this.flexGrow = eventData.data.flexGrow; if(eventData.data.flexGrow != null) {
} this.flexGrow = eventData.data.flexGrow;
if(eventData.data.flexShrink != null) { }
this.flexShrink = eventData.data.flexShrink; if(eventData.data.flexShrink != null) {
} this.flexShrink = eventData.data.flexShrink;
if(eventData.data.alignSelf != null) { }
this.alignSelf = eventData.data.alignSelf; if(eventData.data.alignSelf != null) {
} this.alignSelf = eventData.data.alignSelf;
} }
} }
}
private stateChangCallBack = (eventData) => {
if (eventData != null) { private stateChangCallBack = (eventData) => {
console.info("Flex page state change called:" + JSON.stringify(eventData)); if (eventData != null) {
switch(eventData.data.alignSelf) { console.info("Flex page state change called:" + JSON.stringify(eventData));
case 'Auto': switch(eventData.data.alignSelf) {
this.alignSelf = ItemAlign.Auto; case 'Auto':
break; this.alignSelf = ItemAlign.Auto;
case 'Start': break;
this.alignSelf = ItemAlign.Start; case 'Start':
break; this.alignSelf = ItemAlign.Start;
case 'Center': break;
this.alignSelf = ItemAlign.Center; case 'Center':
break; this.alignSelf = ItemAlign.Center;
case 'End': break;
this.alignSelf = ItemAlign.End; case 'End':
break; this.alignSelf = ItemAlign.End;
case 'Stretch': break;
this.alignSelf = ItemAlign.Stretch; case 'Stretch':
break; this.alignSelf = ItemAlign.Stretch;
case 'Baseline': break;
this.alignSelf = ItemAlign.Baseline; case 'Baseline':
break; this.alignSelf = ItemAlign.Baseline;
default: break;
this.alignSelf = ItemAlign.Auto; default:
} this.alignSelf = ItemAlign.Auto;
} }
} }
}
onPageShow() {
console.info('flex page show called'); onPageShow() {
var stateChangeEvent = { console.info('flex page show called');
eventId: 27, var stateChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 8,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent, this.stateChangCallBack); }
} events_emitter.on(stateChangeEvent, this.stateChangCallBack);
}
build() {
Column({ space: 5 }) { build() {
Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') Column({ space: 5 }) {
Flex() { Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
Text('flexBasis("auto")') Flex() {
.flexBasis('auto').key("flexBasis").width('60%').height(100).lineHeight(70) Text('flexBasis("auto")')
.backgroundColor(0xD2B48C).textAlign(TextAlign.Center) .flexBasis('auto').key("flexBasis").width('60%').height(100).lineHeight(70)
Text('flexBasis(100)') .backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
.flexBasis('100').height(100).lineHeight(70) Text('flexBasis(100)')
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .flexBasis('100').height(100).lineHeight(70)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('flexGrow').key("flexGrow").fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex() { Text('flexGrow').key("flexGrow").fontSize(9).fontColor(0xCCCCCC).width('90%')
Text('flexGrow(2)') Flex() {
.flexGrow(2).height(100).lineHeight(70) Text('flexGrow(2)')
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .flexGrow(2).height(100).lineHeight(70)
Text('flexGrow(1)') .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
.flexGrow(1).height(100).lineHeight(70) Text('flexGrow(1)')
.backgroundColor(0xD2B48C).textAlign(TextAlign.Center) .flexGrow(1).height(100).lineHeight(70)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) .backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.Row }) { Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
Text('flexShrink(0)') Flex({ direction: FlexDirection.Row }) {
.flexShrink(0).key("flexShrink").width('50%').height(100).lineHeight(70) Text('flexShrink(0)')
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .flexShrink(0).key("flexShrink").width('50%').height(100).lineHeight(70)
Text('no flexShrink') .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
.width('40%').height(100).lineHeight(70).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) Text('no flexShrink')
Text('flexShrink(2)') .width('40%').height(100).lineHeight(70).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
.flexShrink(2).width('40%').height(100) .lineHeight(70) Text('flexShrink(2)')
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .flexShrink(2).width('40%').height(100) .lineHeight(70)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('alignSelf').key("alignSelf").fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { Text('alignSelf').key("alignSelf").fontSize(9).fontColor(0xCCCCCC).width('90%')
Text('no alignSelf,height:80').width('33%').height(80) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) Text('no alignSelf,height:80').width('33%').height(80)
Text('alignSelf stretch') .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
.alignSelf(ItemAlign.Stretch).width('33%').height(80).lineHeight(70) Text('alignSelf stretch')
.backgroundColor(0xD2B48C).textAlign(TextAlign.Center) .alignSelf(ItemAlign.Stretch).width('33%').height(80).lineHeight(70)
Text('no alignSelf,height:100').width('34%').height(100) .backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) Text('no alignSelf,height:100').width('34%').height(100)
}.key('flex').width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}.width('100%').margin({ top: 5 }) }.key('flex').width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
} }.width('100%').margin({ top: 5 })
}
} }
\ No newline at end of file
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import events_emitter from '@ohos.events.emitter';
import events_emitter from '@ohos.emitter';
@Entry
@Component @Entry
struct GaugeExample { @Component
@State gaugeValue: string = 50; struct GaugeExample {
@State strokeWidthValue: string = 20; @State gaugeValue: string = 50;
@State startAngleValue: string = 210; @State strokeWidthValue: string = 20;
@State endAngleValue: string = 150; @State startAngleValue: string = 210;
@State colorValues: Array = [[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]]; @State endAngleValue: string = 150;
@State colorValues: Array = [[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]];
private stateChangCallBack = (eventData) => {
if (eventData != null) { private stateChangCallBack = (eventData) => {
console.info("gauge page state change called:" + JSON.stringify(eventData)); if (eventData != null) {
if(eventData.data.gaugeValue != null) { console.info("gauge page state change called:" + JSON.stringify(eventData));
this.gaugeValue = eventData.data.gaugeValue; if(eventData.data.gaugeValue != null) {
} this.gaugeValue = eventData.data.gaugeValue;
if(eventData.data.strokeWidthValue != null) { }
this.strokeWidthValue = eventData.data.strokeWidthValue; if(eventData.data.strokeWidthValue != null) {
} this.strokeWidthValue = eventData.data.strokeWidthValue;
if(eventData.data.startAngleValue != null) { }
this.startAngleValue = eventData.data.startAngleValue; if(eventData.data.startAngleValue != null) {
} this.startAngleValue = eventData.data.startAngleValue;
if(eventData.data.endAngleValue != null) { }
this.endAngleValue = eventData.data.endAngleValue; if(eventData.data.endAngleValue != null) {
} this.endAngleValue = eventData.data.endAngleValue;
if(eventData.data.colorValues != null) { }
this.colorValues = JSON.parse(eventData.data.colorValues); if(eventData.data.colorValues != null) {
} this.colorValues = JSON.parse(eventData.data.colorValues);
} }
} }
}
onPageShow() {
console.info('gauge page show called'); onPageShow() {
var stateChangeEvent = { console.info('gauge page show called');
eventId: 1, var stateChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 102,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent, this.stateChangCallBack); }
events_emitter.on(stateChangeEvent, this.stateChangCallBack);
var stateChangeEventTwo = {
eventId: 2, var stateChangeEventTwo = {
priority: events_emitter.EventPriority.LOW eventId: 103,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEventTwo, this.stateChangCallBack); }
} events_emitter.on(stateChangeEventTwo, this.stateChangCallBack);
}
build() {
Column() { build() {
Gauge({ value: 0, min: 0, max: 100 }) Column() {
.key("gauge") Gauge({ value: 0, min: 0, max: 100 })
.value(`${this.gaugeValue}`) .key("gauge")
.startAngle(`${this.startAngleValue}`) .value(`${this.gaugeValue}`)
.endAngle(`${this.endAngleValue}`) .startAngle(`${this.startAngleValue}`)
.colors(this.colorValues) .endAngle(`${this.endAngleValue}`)
.strokeWidth(`${this.strokeWidthValue}`) .colors(this.colorValues)
.width(200).height(200) .strokeWidth(`${this.strokeWidthValue}`)
}.width('100%').margin({ top: 300 }) .width(200).height(200)
} }.width('100%').margin({ top: 300 })
} }
}
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct ClickExample {
@State text: string = '';
@State onClickValue: boolean = false;
build() {
Column() {
Button('Click').backgroundColor(0x2788D9).width(200).height(100).fontSize(20)
.onClick((event: ClickEvent) => {
console.info(this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY
+ '\n x :' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:('
+ event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\n width:'
+ event.target.area.width + '\n height:' + event.target.area.height);
this.onClickValue = true;
try {
var backData = {
data: {
"ACTION": this.onClickValue,
"event": JSON.stringify(event)
}
}
var backEvent = {
eventId: 30,
priority: events_emitter.EventPriority.LOW
}
console.info("click to emit action state")
events_emitter.emit(backEvent, backData)
} catch (err) {
console.info("click action state err: " + JSON.stringify(err.message))
}
}).key('button')
Text(this.text).padding(15).fontSize(20).key('text')
}.height(350).width('100%').padding(10)
}
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@Entry
@Component
struct GestureGroupExample {
@State count: number = 0
@State offsetX: number = 0
@State offsetY: number = 0
@State borderStyle: BorderStyle = BorderStyle.Solid
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
}.translate({ x: this.offsetX, y: this.offsetY, z: 5 })
.key('gestureGroup')
.height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyle })
.gesture(
GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: true })
.onAction((event: GestureEvent) => {
if (event.repeat) {this.count++}
console.log('LongPress onAction')
})
.onActionEnd(() => {
console.log('LongPress end')
}),
PanGesture({})
.onActionStart(() => {
this.borderStyle = BorderStyle.Dashed
console.log('pan start')
})
.onActionUpdate((event: GestureEvent) => {
this.offsetX = event.offsetX
this.offsetY = event.offsetY
console.log('pan update')
})
)
.onCancel(() => {
console.log('sequence gesture canceled')
})
)
}
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@Entry
@Component
struct GlobalExample {
onPageShow() {
}
build() {
Flex({
direction: FlexDirection.Column,
alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center
}) {
Canvas(this.context)
.width('100%').height('40%').backgroundColor('#00ffff')
.onReady(() => {
this.context.imageSmoothingEnabled = false
this.testImageBitmapSize();
this.testOffscreenCanvas();
this.testImageData();
this.testImage();
})
}.width('100%').height('100%')
}
testImageBitmapSize() {
let img = new ImageBitmap("/images/bg.jpg");
let width = img.width;
let height = img.height;
this.context.imageSmoothingEnabled = false;
this.context.drawImage( img, 30, 950, 160, 100);
console.log("imagebitmap_width="+width);
console.log("imagebitmap_height="+height);
}
testOffscreenCanvas() {
var offscreen = new OffscreenCanvas(300, 300);
var offCanvas2 = offscreen.getContext("2d");
var img = new Image();
img.src = "/images/bg.jpg";
offCanvas2.drawImage(img, 0, 0, 100, 100);
var bitmap = offscreen.transferToImageBitmap();
this.ctx.transferFromImageBitmap(bitmap);
}
testImageData() {
var offscreen = new OffscreenCanvas(300, 300);
var offCanvas2 = offscreen.getContext("2d");
var imageData = offCanvas2.createImageData(100,100);
var imgData = imageData.data;
console.log("imageData_width="+imageData.width);
console.log("imageData_height="+imageData.height);
}
testImage(){
var img = new Image("/images/bg.jpg",100,100)
.onload(()=>{})
.onerror(()=>{});
console.log("img_width="+img.width);
console.log("img_height="+img.height);
}
}
\ No newline at end of file
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import events_emitter from '@ohos.events.emitter'
import events_emitter from '@ohos.emitter'
@Entry
@Component @Entry
struct GridContainerExample { @Component
@State sizeType: SizeType = SizeType.XS; struct GridContainerExample {
private stateChangCallBack = (eventData) => { @State sizeType: SizeType = SizeType.XS;
if (eventData != null) { private stateChangCallBack = (eventData) => {
console.info("gridContainer page state change called:" + JSON.stringify(eventData)); if (eventData != null) {
switch (eventData.data.sizeType) { console.info("gridContainer page state change called:" + JSON.stringify(eventData));
case 'Auto': switch (eventData.data.sizeType) {
this.sizeType = SizeType.Auto; case 'Auto':
break; this.sizeType = SizeType.Auto;
case 'XS': break;
this.sizeType = SizeType.XS; case 'XS':
break; this.sizeType = SizeType.XS;
case 'SM': break;
this.sizeType = SizeType.SM; case 'SM':
break; this.sizeType = SizeType.SM;
case 'MD': break;
this.sizeType = SizeType.MD; case 'MD':
break; this.sizeType = SizeType.MD;
case 'LG': break;
this.sizeType = SizeType.LG; case 'LG':
break; this.sizeType = SizeType.LG;
default: break;
this.sizeType = SizeType.Auto; default:
} this.sizeType = SizeType.Auto;
} }
} }
}
onPageShow() {
console.info('gridContainer page show called'); onPageShow() {
var stateChangeEvent = { console.info('gridContainer page show called');
eventId: 7, var stateChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 109,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent, this.stateChangCallBack); }
} events_emitter.on(stateChangeEvent, this.stateChangCallBack);
}
build() {
Column({ space: 5 }) { build() {
GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { Column({ space: 5 }) {
Row() { GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) {
Text('1') Row() {
.fontSize(20) Text('1')
.useSizeType({ .fontSize(20)
xs: { span: 6, offset: 0 }, .useSizeType({
sm: { span: 2, offset: 0 }, xs: { span: 6, offset: 0 },
md: { span: 2, offset: 0 }, sm: { span: 2, offset: 0 },
lg: { span: 2, offset: 0 } md: { span: 2, offset: 0 },
}) lg: { span: 2, offset: 0 }
.height(50) })
.backgroundColor(0x4582B4) .height(50)
.textAlign(TextAlign.Center) .backgroundColor(0x4582B4)
Text('2') .textAlign(TextAlign.Center)
.fontSize(20) Text('2')
.useSizeType({ .fontSize(20)
xs: { span: 2, offset: 6 }, .useSizeType({
sm: { span: 6, offset: 2 }, xs: { span: 2, offset: 6 },
md: { span: 2, offset: 2 }, sm: { span: 6, offset: 2 },
lg: { span: 2, offset: 2 } md: { span: 2, offset: 2 },
}) lg: { span: 2, offset: 2 }
.height(50) })
.backgroundColor(0x00BFFF) .height(50)
.textAlign(TextAlign.Center) .backgroundColor(0x00BFFF)
Text('3') .textAlign(TextAlign.Center)
.fontSize(20) Text('3')
.useSizeType({ .fontSize(20)
xs: { span: 2, offset: 8 }, .useSizeType({
sm: { span: 2, offset: 8 }, xs: { span: 2, offset: 8 },
md: { span: 6, offset: 4 }, sm: { span: 2, offset: 8 },
lg: { span: 2, offset: 4 } md: { span: 6, offset: 4 },
}) lg: { span: 2, offset: 4 }
.height(50) })
.backgroundColor(0x4682B4) .height(50)
.textAlign(TextAlign.Center) .backgroundColor(0x4682B4)
Text('4') .textAlign(TextAlign.Center)
.fontSize(20) Text('4')
.useSizeType({ .fontSize(20)
xs: { span: 2, offset: 10 }, .useSizeType({
sm: { span: 2, offset: 10 }, xs: { span: 2, offset: 10 },
md: { span: 2, offset: 10 }, sm: { span: 2, offset: 10 },
lg: { span: 6, offset: 6 } md: { span: 2, offset: 10 },
}) lg: { span: 6, offset: 6 }
})
.height(50)
.backgroundColor(0x00BFFF) .height(50)
.textAlign(TextAlign.Center) .backgroundColor(0x00BFFF)
} .textAlign(TextAlign.Center)
}.width('90%').key('gridContainer').margin({ top: 300 }) }
} }.width('90%').key('gridContainer').margin({ top: 300 })
} }
}
} }
\ No newline at end of file
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import events_emitter from '@ohos.events.emitter'
import events_emitter from '@ohos.emitter'
@Entry
@Component @Entry
struct GridSetting { @Component
@State smSpan: number = 2; struct GridSetting {
@State smOffset: number = 1; @State smSpan: number = 2;
@State gridSpan: number = 1; @State smOffset: number = 1;
@State gridOffset: number = 0; @State gridSpan: number = 1;
@State gridOffset: number = 0;
build(){
GridContainer({sizeType: SizeType.SM}) { build(){
Row({}) { GridContainer({sizeType: SizeType.SM}) {
Row() { Row({}) {
Text('Left').fontSize(25) Row() {
} Text('Left').fontSize(25)
.gridOffset(this.gridOffset) }
.height("100%") .gridOffset(this.gridOffset)
.backgroundColor(0x66bbb2cb) .height("100%")
.key('gridOffset') .backgroundColor(0x66bbb2cb)
Row() { .key('gridOffset')
Text('Center').fontSize(25) Row() {
} Text('Center').fontSize(25)
.useSizeType({ }
xs: { span: 1, offset: 0 }, sm: { span: this.smSpan, offset: this.smOffset }, .useSizeType({
md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 } xs: { span: 1, offset: 0 }, sm: { span: this.smSpan, offset: this.smOffset },
}) md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 }
.height("100%") })
.backgroundColor(0x66b6c5d1) .height("100%")
.key('gridRow') .backgroundColor(0x66b6c5d1)
Row() { .key('gridRow')
Text('Right').fontSize(25) Row() {
} Text('Right').fontSize(25)
.gridSpan(this.gridSpan) }
.height("100%") .gridSpan(this.gridSpan)
.backgroundColor(0x66bbb2cb) .height("100%")
.key('gridSpan') .backgroundColor(0x66bbb2cb)
} .key('gridSpan')
.height(200) }
} .height(200)
.backgroundColor(0xf1f3f5) }
.margin({ top: 10 }) .backgroundColor(0xf1f3f5)
.key('gridContainer') .margin({ top: 10 })
} .key('gridContainer')
onPageShow() { }
let smChangeEvent = { onPageShow() {
eventId: 45, let smChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 9,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(smChangeEvent, this.stateChangCallBack); }
let offsetChangeEvent = { events_emitter.on(smChangeEvent, this.stateChangCallBack);
eventId: 46, let offsetChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 10,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(offsetChangeEvent, this.stateChangCallBack); }
let spanChangeEvent = { events_emitter.on(offsetChangeEvent, this.stateChangCallBack);
eventId: 47, let spanChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 11,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(spanChangeEvent, this.stateChangCallBack); }
} events_emitter.on(spanChangeEvent, this.stateChangCallBack);
stateChangCallBack = (eventData) => { }
console.info("GridSetting page stateChangCallBack" + JSON.stringify(eventData)); stateChangCallBack = (eventData) => {
if (eventData && eventData.data) { console.info("GridSetting page stateChangCallBack" + JSON.stringify(eventData));
if (eventData.data.span) { if (eventData && eventData.data) {
this.smSpan = eventData.data.span; if (eventData.data.span) {
this.smOffset = eventData.data.offset; this.smSpan = eventData.data.span;
} else if (eventData.data.gridOffset) { this.smOffset = eventData.data.offset;
this.gridOffset = eventData.data.gridOffset; } else if (eventData.data.gridOffset) {
} else if (eventData.data.gridSpan) { this.gridOffset = eventData.data.gridOffset;
this.gridSpan = eventData.data.gridSpan; } else if (eventData.data.gridSpan) {
} this.gridSpan = eventData.data.gridSpan;
} }
} }
}
} }
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@Entry
@Component
struct HoverExample {
@State isHoverVal: boolean = false
@State hoverEffect1: HoverEffect = HoverEffect.Auto
@State hoverEffect2: HoverEffect = HoverEffect.Board
@State hoverEffect3: HoverEffect = HoverEffect.None
build() {
Column({ space: 5 }) {
Column({ space: 5 }) {
Text('Scale').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 80 })
Column()
.width('80%').height(200).backgroundColor(Color.Gray)
.position({ x: 40, y: 120 })
.hoverEffect(this.hoverEffect1)
.key('bindContextMenu')
.onHover((isHover: boolean) => {
console.info('Scale' + isHover)
this.isHoverVal = isHover
})
Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 })
Column()
.width('80%').height(200).backgroundColor(Color.Gray)
.hoverEffect(this.hoverEffect2)
.position({ x: 40, y: 420 })
.onHover((isHover: boolean) => {
console.info('HoverEffect.Board')
this.isHoverVal = isHover
})
}
.hoverEffect(this.hoverEffect3)
.width('100%').height('100%').border({ width: 1 })
.onHover((isHover: boolean) => {
console.info('HoverEffect.None')
this.isHoverVal = isHover
})
}
}
}
\ No newline at end of file
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import events_emitter from '@ohos.events.emitter'
import events_emitter from '@ohos.emitter'
@Entry
@Component @Entry
struct ImageEffectsExample { @Component
@State blurValue: string = 100; struct ImageEffectsExample {
@State backdropBlueValue: string= 30; @State blurValue: string = 100;
@State shadowValue: object= { radius: 10, color: Color.Gray, offsetX: 5, offsetY: 5 } @State backdropBlueValue: string= 30;
@State grayscaleValue: string= 10; @State shadowValue: object= { radius: 10, color: Color.Gray, offsetX: 5, offsetY: 5 }
@State brightnessValue: string= 20; @State grayscaleValue: string= 10;
@State saturateValue: string= 50; @State brightnessValue: string= 20;
@State contrastValue: string= 20; @State saturateValue: string= 50;
@State invertValue: string= 10; @State contrastValue: string= 20;
@State hueRotateValue: string= 10 @State invertValue: string= 10;
@State hueRotateValue: string= 10
private stateChangCallBack = (eventData) => {
if (eventData != null) { private stateChangCallBack = (eventData) => {
console.info("imageEffects page state change called:" + JSON.stringify(eventData)); if (eventData != null) {
if (eventData.data.blurValue != null) { console.info("imageEffects page state change called:" + JSON.stringify(eventData));
this.blurValue = eventData.data.blurValue; if (eventData.data.blurValue != null) {
} this.blurValue = eventData.data.blurValue;
if (eventData.data.shadowValue != null) { }
this.shadowValue = JSON.parse(eventData.data.shadowValue); if (eventData.data.shadowValue != null) {
} this.shadowValue = JSON.parse(eventData.data.shadowValue);
if (eventData.data.grayscaleValue != null) { }
this.grayscaleValue = eventData.data.grayscaleValue; if (eventData.data.grayscaleValue != null) {
} this.grayscaleValue = eventData.data.grayscaleValue;
if (eventData.data.brightnessValue != null) { }
this.brightnessValue = eventData.data.brightnessValue; if (eventData.data.brightnessValue != null) {
} this.brightnessValue = eventData.data.brightnessValue;
if (eventData.data.saturateValue != null) { }
this.saturateValue = eventData.data.saturateValue; if (eventData.data.saturateValue != null) {
} this.saturateValue = eventData.data.saturateValue;
if (eventData.data.contrastValue != null) { }
this.contrastValue = eventData.data.contrastValue; if (eventData.data.contrastValue != null) {
} this.contrastValue = eventData.data.contrastValue;
if (eventData.data.invertValue != null) { }
this.invertValue = eventData.data.invertValue; if (eventData.data.invertValue != null) {
} this.invertValue = eventData.data.invertValue;
if (eventData.data.hueRotateValue != null) { }
this.hueRotateValue = eventData.data.hueRotateValue; if (eventData.data.hueRotateValue != null) {
} this.hueRotateValue = eventData.data.hueRotateValue;
} }
} }
}
onPageShow() {
console.info('imageEffects page show called'); onPageShow() {
var stateChangeEvent = { console.info('imageEffects page show called');
eventId: 40, var stateChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 12,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent, this.stateChangCallBack); }
events_emitter.on(stateChangeEvent, this.stateChangCallBack);
var stateChangeEvent2 = {
eventId: 41, var stateChangeEvent2 = {
priority: events_emitter.EventPriority.LOW eventId: 13,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent2, this.stateChangCallBack); }
events_emitter.on(stateChangeEvent2, this.stateChangCallBack);
var stateChangeEvent3 = {
eventId: 42, var stateChangeEvent3 = {
priority: events_emitter.EventPriority.LOW eventId: 14,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent3, this.stateChangCallBack); }
events_emitter.on(stateChangeEvent3, this.stateChangCallBack);
var stateChangeEvent4 = {
eventId: 43, var stateChangeEvent4 = {
priority: events_emitter.EventPriority.LOW eventId: 15,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent4, this.stateChangCallBack); }
events_emitter.on(stateChangeEvent4, this.stateChangCallBack);
var stateChangeEvent5 = {
eventId: 44, var stateChangeEvent5 = {
priority: events_emitter.EventPriority.LOW eventId: 16,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent5, this.stateChangCallBack); }
events_emitter.on(stateChangeEvent5, this.stateChangCallBack);
var stateChangeEvent6 = {
eventId: 45, var stateChangeEvent6 = {
priority: events_emitter.EventPriority.LOW eventId: 17,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent6, this.stateChangCallBack); }
events_emitter.on(stateChangeEvent6, this.stateChangCallBack);
var stateChangeEvent7 = {
eventId: 46, var stateChangeEvent7 = {
priority: events_emitter.EventPriority.LOW eventId: 18,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent7, this.stateChangCallBack); }
events_emitter.on(stateChangeEvent7, this.stateChangCallBack);
var stateChangeEvent8 = {
eventId: 47, var stateChangeEvent8 = {
priority: events_emitter.EventPriority.LOW eventId: 19,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent8, this.stateChangCallBack); }
} events_emitter.on(stateChangeEvent8, this.stateChangCallBack);
}
build() {
Column({ space: 10 }) { build() {
Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') Column({ space: 10 }) {
Text('text') Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
.blur(this.blurValue) Text('text')
.width('90%') .blur(this.blurValue)
.height(40) .width('90%')
.fontSize(16) .height(40)
.backgroundColor(0xF9CF93) .fontSize(16)
.padding({ left: 5 }) .backgroundColor(0xF9CF93)
.key('centerRow') .padding({ left: 5 })
.key('centerRow')
Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%')
Text() Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%')
.width('90%') Text()
.height(40) .width('90%')
.fontSize(16) .height(40)
.backdropBlur(this.backdropBlueValue) .fontSize(16)
.backgroundImage('/images/download.png') .backdropBlur(this.backdropBlueValue)
.backgroundImageSize({ width: 1200, height: 160 }) .backgroundImage('/images/download.png')
.key('centerRow2') .backgroundImageSize({ width: 1200, height: 160 })
.key('centerRow2')
Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image('/images/download.png') Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
.width('90%') Image('/images/download.png')
.height(40) .width('90%')
.shadow(this.shadowValue) .height(40)
.key('centerRow3') .shadow(this.shadowValue)
.key('centerRow3')
Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image('/images/download.png') Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%')
.width('90%') Image('/images/download.png')
.height(40) .width('90%')
.grayscale(`${this.grayscaleValue}`) .height(40)
.key('centerRow4') .grayscale(`${this.grayscaleValue}`)
.key('centerRow4')
Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image('/images/download.png').width('90%').height(40).brightness(this.brightnessValue).key('centerRow5') Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image('/images/download.png').width('90%').height(40).brightness(this.brightnessValue).key('centerRow5')
Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image('/images/download.png').width('90%').height(40).saturate(this.saturateValue).key('centerRow6') Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image('/images/download.png').width('90%').height(40).saturate(this.saturateValue).key('centerRow6')
Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image('/images/download.png').width('90%').height(40).contrast(this.contrastValue).key('centerRow7') Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image('/images/download.png').width('90%').height(40).contrast(this.contrastValue).key('centerRow7')
Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image('/images/download.png').width('90%').height(40).invert(`${this.invertValue}`).key('centerRow8') Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image('/images/download.png').width('90%').height(40).invert(`${this.invertValue}`).key('centerRow8')
Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image('/images/download.png').width('90%').height(40).hueRotate(`${this.hueRotateValue}`).key('centerRow9') Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%')
}.width('100%').margin({ top: 5 }) Image('/images/download.png').width('90%').height(40).hueRotate(`${this.hueRotateValue}`).key('centerRow9')
} }.width('100%').margin({ top: 5 })
} }
}
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import file from '@system.file'; import file from '@system.file';
import {Core, ExpectExtend, InstrumentLog, ReportExtend} from "deccjsunit/index.ets"; import {Core, ExpectExtend, InstrumentLog, ReportExtend} from "deccjsunit/index.ets";
import testsuite from "../test/List.test.ets"; import testsuite from "../test/List.test.ets";
import featureAbility from "@ohos.ability.featureAbility"; import featureAbility from "@ohos.ability.featureAbility";
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
aboutToAppear() { aboutToAppear() {
console.info("start run testcase!!!!") console.info("start run testcase!!!!")
featureAbility.getWant() featureAbility.getWant()
.then((Want) => { .then((Want) => {
const core = Core.getInstance(); const core = Core.getInstance();
const expectExtend = new ExpectExtend({ const expectExtend = new ExpectExtend({
'id': 'extend' 'id': 'extend'
}); });
core.addService('expect', expectExtend); core.addService('expect', expectExtend);
const reportExtend = new ReportExtend(file); const reportExtend = new ReportExtend(file);
core.addService('report', reportExtend); core.addService('report', reportExtend);
core.init(); core.init();
core.subscribeEvent('task', reportExtend); core.subscribeEvent('task', reportExtend);
const configService = core.getDefaultService('config'); const configService = core.getDefaultService('config');
console.info('parameters---->' + JSON.stringify(Want.parameters)); console.info('parameters---->' + JSON.stringify(Want.parameters));
configService.setConfig(Want.parameters); configService.setConfig(Want.parameters);
testsuite(); testsuite();
core.execute(); core.execute();
console.info('Operation successful. Data: ' + JSON.stringify(Want)); console.info('Operation successful. Data: ' + JSON.stringify(Want));
}) })
.catch((error) => { .catch((error) => {
console.error('Operation failed. Cause: ' + JSON.stringify(error)); console.error('Operation failed. Cause: ' + JSON.stringify(error));
}) })
} }
build() { build() {
Flex({ Flex({
direction: FlexDirection.Column, direction: FlexDirection.Column,
alignItems: ItemAlign.Center, alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center justifyContent: FlexAlign.Center
}) { }) {
Text('ACE ETS TEST') Text('ACE ETS TEST')
.fontSize(50) .fontSize(50)
.fontWeight(FontWeight.Bold) .fontWeight(FontWeight.Bold)
} }
.width('100%') .width('100%')
.height('100%') .height('100%')
} }
} }
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct KeyEventExample {
@State text: string = ''
@State textOne: string = ''
@State textTwo: string = ''
@State textThree: string = ''
@State eventType: string = ''
build() {
Column() {
Button('KeyEvent').backgroundColor(0x2788D9)
.onKeyEvent((event: KeyEvent) => {
if (event.type === KeyType.Down) {
this.eventType = 'Down'
}
if (event.type === KeyType.Up) {
this.eventType = 'Up'
}
if (event.type === keySource.Unknown) {
this.eventType = 'Unknown'
}
if (event.type === keySource.Keyboard) {
this.eventType = 'Keyboard'
}
console.info(this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText)
console.info(this.textOne = 'KeySource:' + event.keySource + '\ndeviceId:' + event.deviceId + '\nmetaKey:' + event.metaKey + '\ntimeStamp:' + event.timestamp)
console.info(this.textTwo = 'KeyType:' + this.keySource + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText)
console.info(this.textThree = 'KeyType:' + this.keySource + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText)
stopPropagation: () => {
console.info('stopPropagation')
}
})
Text(this.text).padding(15)
}.height(300).width('100%').padding(35)
}
}
\ No newline at end of file
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import events_emitter from '@ohos.events.emitter';
import events_emitter from '@ohos.emitter';
class ContainerInfo {
label : string = '' class ContainerInfo {
size : string = '' label : string = ''
}; size : string = ''
};
class ChildInfo {
text : string = '' class ChildInfo {
priority : number = 0 text : string = ''
}; priority : number = 0
};
@Entry
@Component @Entry
struct LayoutConstraints { @Component
private children : string[] = ['1', '2', '3', '4', '5', '6']; struct LayoutConstraints {
@State aspectRatio: number = 1.5; private children : string[] = ['1', '2', '3', '4', '5', '6'];
private container: ContainerInfo[] = [ @State aspectRatio: number = 1.5;
{label: 'Big container', size: '97%'}, private container: ContainerInfo[] = [
{label: 'Small container', size: '30%'}]; {label: 'Big container', size: '97%'},
@State priorityChildren: any[] = [ {label: 'Small container', size: '30%'}];
{text: '1\n(priority:1)', priority: 1}, @State priorityChildren: any[] = [
{text: '2\n(priority:2)', priority: 2}, {text: '1\n(priority:1)', priority: 1},
{text: '3\n(priority:3)', priority: 3}, {text: '2\n(priority:2)', priority: 2},
{text: '4\n(priority:4)', priority: 4}]; {text: '3\n(priority:3)', priority: 3},
@State currentIndex : number = 0; {text: '4\n(priority:4)', priority: 4}];
@State currentIndex : number = 0;
build() {
Column({ space: 20 }) { build() {
Text('using container: row').fontSize(20).fontColor(Color.Black).width('100%') Column({ space: 20 }) {
Row({space: 10}) { Text('using container: row').fontSize(20).fontColor(Color.Black).width('100%')
ForEach(this.children, (item) => { Row({space: 10}) {
Text(item) ForEach(this.children, (item) => {
.backgroundColor(0xbbb2cb) Text(item)
.fontSize(20) .backgroundColor(0xbbb2cb)
.aspectRatio(this.aspectRatio) .fontSize(20)
.height(60) .aspectRatio(this.aspectRatio)
Text(item) .height(60)
.backgroundColor(0xbbb2cb) Text(item)
.fontSize(20) .backgroundColor(0xbbb2cb)
.aspectRatio(this.aspectRatio) .fontSize(20)
.width(60) .aspectRatio(this.aspectRatio)
.key('aspectRatio') .width(60)
}, item=>item) .key('aspectRatio')
} }, item=>item)
.size({width: "100%", height: 100}) }
.backgroundColor(0xd2cab3) .size({width: "100%", height: 100})
.clip(true) .backgroundColor(0xd2cab3)
.clip(true)
Text('using container: grid').fontSize(20).fontColor(Color.Black).width('100%')
Grid() { Text('using container: grid').fontSize(20).fontColor(Color.Black).width('100%')
ForEach(this.children, (item) => { Grid() {
GridItem() { ForEach(this.children, (item) => {
Text(item) GridItem() {
.backgroundColor(0xbbb2cb) Text(item)
.fontSize(40) .backgroundColor(0xbbb2cb)
.aspectRatio(this.aspectRatio) .fontSize(40)
} .aspectRatio(this.aspectRatio)
}, item=>item) }
} }, item=>item)
.columnsTemplate('1fr 1fr 1fr') }
.columnsGap(10) .columnsTemplate('1fr 1fr 1fr')
.rowsGap(10) .columnsGap(10)
.size({width: "100%", height: 165}) .rowsGap(10)
.backgroundColor(0xd2cab3) .size({width: "100%", height: 165})
.backgroundColor(0xd2cab3)
Text('displayPriority 4').fontSize(20).fontColor(Color.Black).width('100%')
Flex({justifyContent: FlexAlign.SpaceBetween}) { Text('displayPriority 4').fontSize(20).fontColor(Color.Black).width('100%')
ForEach(this.priorityChildren, (item)=>{ Flex({justifyContent: FlexAlign.SpaceBetween}) {
if (item.priority === 1 || item.priority === 5) { ForEach(this.priorityChildren, (item)=>{
Text(`1\n(priority:${item.priority})`) if (item.priority === 1 || item.priority === 5) {
.width(135) Text(`1\n(priority:${item.priority})`)
.height(60) .width(135)
.fontSize(18) .height(60)
.textAlign(TextAlign.Center) .fontSize(18)
.backgroundColor(0xbbb2cb) .textAlign(TextAlign.Center)
.displayPriority(item.priority) .backgroundColor(0xbbb2cb)
.key('displayPriority') .displayPriority(item.priority)
} else { .key('displayPriority')
Text(item.text) } else {
.width(135) Text(item.text)
.height(60) .width(135)
.fontSize(18) .height(60)
.textAlign(TextAlign.Center) .fontSize(18)
.backgroundColor(0xbbb2cb) .textAlign(TextAlign.Center)
.displayPriority(item.priority) .backgroundColor(0xbbb2cb)
} .displayPriority(item.priority)
}, item=>item.text) }
} }, item=>item.text)
.width(this.container[this.currentIndex].size) }
.backgroundColor(0xd2cab3) .width(this.container[this.currentIndex].size)
}.padding(10) .backgroundColor(0xd2cab3)
} }.padding(10)
onPageShow() { }
let aspectRatioChangeEvent = { onPageShow() {
eventId: 26, let aspectRatioChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 20,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(aspectRatioChangeEvent, this.stateChangCallBack); }
events_emitter.on(aspectRatioChangeEvent, this.stateChangCallBack);
let priorityChangeEvent = {
eventId: 27, let priorityChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 21,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(priorityChangeEvent, this.stateChangCallBack); }
} events_emitter.on(priorityChangeEvent, this.stateChangCallBack);
stateChangCallBack = (eventData) => { }
console.info("LayoutConstraints page stateChangCallBack" + JSON.stringify(eventData)); stateChangCallBack = (eventData) => {
if (eventData) { console.info("LayoutConstraints page stateChangCallBack" + JSON.stringify(eventData));
if (eventData.data.aspectRatio) { if (eventData) {
this.aspectRatio = eventData.data.aspectRatio; if (eventData.data.aspectRatio) {
} else if (eventData.data.displayPriority) { this.aspectRatio = eventData.data.aspectRatio;
let priority = JSON.parse(JSON.stringify(this.priorityChildren)); } else if (eventData.data.displayPriority) {
priority[0].priority = eventData.data.displayPriority; let priority = JSON.parse(JSON.stringify(this.priorityChildren));
this.priorityChildren = []; priority[0].priority = eventData.data.displayPriority;
this.priorityChildren = priority; this.priorityChildren = [];
} this.priorityChildren = priority;
} }
} }
}
} }
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct EllipseExample {
onActive(){
console.log("lifecycle-->onActive")
}
onInactive(){
console.log("lifecycle-->onInactive")
}
onShow(){
console.log("lifecycle-->onShow")
}
onCastTempToNormal(){
console.log("lifecycle-->onCastTempToNormal")
}
onVisibilityChanged(){
console.log("lifecycle-->onVisibilityChanged")
}
onTriggerEvent(){
console.log("lifecycle-->onTriggerEvent")
}
onDelete(){
console.log("lifecycle-->onDelete")
}
onAcquireFormState(){
console.log("lifecycle-->onAcquireFormState")
}
onHide(){
console.log("lifecycle-->onHide")
}
onWindowDisplayModeChanged(){
console.log("lifecycle-->onWindowDisplayModeChanged")
}
onStartContinuation(){
console.log("lifecycle-->onStartContinuation")
}
onSaveData(){
console.log("lifecycle-->onSaveData")
}
onCompleteContinuation(){
console.log("lifecycle-->onCompleteContinuation")
}
onRestoreData(){
console.log("lifecycle-->onRestoreData")
}
onRemoteTerminated(){
console.log("lifecycle-->onRemoteTerminated")
}
onSaveAbilityState(){
console.log("lifecycle-->onSaveAbilityState")
}
onRestoreAbilityState(){
console.log("lifecycle-->onRestoreAbilityState")
}
onInactive(){
console.log("lifecycle-->onInactive")
}
onActive(){
console.log("lifecycle-->onActive")
}
onNewWant(){
console.log("lifecycle-->onNewWant")
}
onMemoryLevel(){
console.log("lifecycle-->onMemoryLevel")
}
onCommand(){
console.log("lifecycle-->onCommand")
}
onStop(){
console.log("lifecycle-->onStop")
}
onConnect(){
console.log("lifecycle-->onConnect")
}
onDisconnect(){
console.log("lifecycle-->onDisconnect")
}
onReconnect(){
console.log("lifecycle-->onReconnect")
}
update(){
console.log("lifecycle-->update")
}
normalizeUri(){
console.log("lifecycle-->normalizeUri")
}
batchInsert(){
console.log("lifecycle-->batchInsert")
}
denormalizeUri(){
console.log("lifecycle-->denormalizeUri")
}
openFile(){
console.log("lifecycle-->openFile")
}
getFileTypes(){
console.log("lifecycle-->getFileTypes")
}
onInitialized(){
console.log("lifecycle-->onInitialized")
}
getType(){
console.log("lifecycle-->getType")
}
build(){
Column(){
Button('click')
.key('button')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
}
}
}
\ No newline at end of file
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import events_emitter from '@ohos.events.emitter';
import events_emitter from '@ohos.emitter';
@Entry
@Component @Entry
struct ListExample { @Component
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; struct ListExample {
@State listDirection: Axis = Axis.Vertical; private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
@State editMode: boolean = false; @State listDirection: Axis = Axis.Vertical;
@State edgeEffect: EdgeEffect = EdgeEffect.None; @State editMode: boolean = false;
@State chainAnimation: boolean = false; @State edgeEffect: EdgeEffect = EdgeEffect.None;
@State strokeWidth: number = 2.000000; @State chainAnimation: boolean = false;
@State color: string = 0xFFFFFF; @State strokeWidth: number = 2.000000;
@State startMargin: number = 20.000000; @State color: string = 0xFFFFFF;
@State endMargin: number = 20.000000; @State startMargin: number = 20.000000;
@State endMargin: number = 20.000000;
onPageShow() {
console.info('[list] page show called'); onPageShow() {
var stateChangeEvent = { console.info('[list] page show called');
eventId: 80, var stateChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 124,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent, this.stateChangCallBack); }
events_emitter.on(stateChangeEvent, this.stateChangCallBack);
var stateChangeEventTwo = {
eventId: 81, var stateChangeEventTwo = {
priority: events_emitter.EventPriority.LOW eventId: 125,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEventTwo, this.stateChangCallBackTwo); }
} events_emitter.on(stateChangeEventTwo, this.stateChangCallBackTwo);
}
private stateChangCallBack = (eventData) => {
console.info("[stateChangCallBack] stateChangCallBack"); private stateChangCallBack = (eventData) => {
if (eventData != null) { console.info("[stateChangCallBack] stateChangCallBack");
console.info("[stateChangCallBack] state change called:" + JSON.stringify(eventData)); if (eventData != null) {
if(eventData.data.listDirection != null) { console.info("[stateChangCallBack] state change called:" + JSON.stringify(eventData));
this.listDirection = eventData.data.listDirection; if(eventData.data.listDirection != null) {
} this.listDirection = eventData.data.listDirection;
if(eventData.data.editMode != null) { }
this.editMode = eventData.data.editMode; if(eventData.data.editMode != null) {
} this.editMode = eventData.data.editMode;
if(eventData.data.edgeEffect != null) { }
this.edgeEffect = eventData.data.edgeEffect; if(eventData.data.edgeEffect != null) {
} this.edgeEffect = eventData.data.edgeEffect;
if(eventData.data.chainAnimation != null) { }
this.chainAnimation = eventData.data.chainAnimation; if(eventData.data.chainAnimation != null) {
} this.chainAnimation = eventData.data.chainAnimation;
} }
} }
}
private stateChangCallBackTwo = (eventData) => {
console.info("[stateChangCallBackTwo] stateChangCallBack"); private stateChangCallBackTwo = (eventData) => {
if (eventData != null) { console.info("[stateChangCallBackTwo] stateChangCallBack");
console.info("[stateChangCallBackTwo] state change called:" + JSON.stringify(eventData)); if (eventData != null) {
if(eventData.data.strokeWidth != null) { console.info("[stateChangCallBackTwo] state change called:" + JSON.stringify(eventData));
this.strokeWidth = eventData.data.strokeWidth; if(eventData.data.strokeWidth != null) {
} this.strokeWidth = eventData.data.strokeWidth;
if(eventData.data.color != null) { }
this.color = eventData.data.color; if(eventData.data.color != null) {
} this.color = eventData.data.color;
if(eventData.data.startMargin != null) { }
this.startMargin = eventData.data.startMargin; if(eventData.data.startMargin != null) {
} this.startMargin = eventData.data.startMargin;
if(eventData.data.endMargin != null) { }
this.endMargin = eventData.data.endMargin; if(eventData.data.endMargin != null) {
} this.endMargin = eventData.data.endMargin;
} }
} }
}
build() {
Stack({ alignContent: Alignment.TopStart }) { build() {
Column() { Stack({ alignContent: Alignment.TopStart }) {
List({ space: 20, initialIndex: 0 }) { Column() {
ForEach(this.arr, (item) => { List({ space: 20, initialIndex: 0 }) {
ListItem() { ForEach(this.arr, (item) => {
Text('' + item) ListItem() {
.width('100%').height(100).fontSize(16) Text('' + item)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) .width('100%').height(100).fontSize(16)
}.editable(true) .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}, item => item) }.editable(true)
} }, item => item)
.key('list') }
.listDirection(this.listDirection) .key('list')
.divider({ strokeWidth: this.strokeWidth, color: this.color, startMargin: this.startMargin, endMargin: this.endMargin }) .listDirection(this.listDirection)
.edgeEffect(this.edgeEffect) .divider({ strokeWidth: this.strokeWidth, color: this.color, startMargin: this.startMargin, endMargin: this.endMargin })
.chainAnimation(this.chainAnimation) .edgeEffect(this.edgeEffect)
.multiSelectable(true) .chainAnimation(this.chainAnimation)
.onScrollIndex((firstIndex: number, lastIndex: number) => { .multiSelectable(true)
console.info('first' + firstIndex) .onScrollIndex((firstIndex: number, lastIndex: number) => {
console.info('last' + lastIndex) console.info('first' + firstIndex)
}) console.info('last' + lastIndex)
.onScroll((scrollOffset: number, scrollState: ScrollState) => { })
console.info('scrollOffset:' + scrollOffset) .onScroll((scrollOffset: number, scrollState: ScrollState) => {
console.info('scrollState:' + scrollState) console.info('scrollOffset:' + scrollOffset)
}) console.info('scrollState:' + scrollState)
.editMode(this.editMode) })
.onItemDelete((index: number) => { .editMode(this.editMode)
console.info(this.arr[index] + 'Delete') .onItemDelete((index: number) => {
this.arr.splice(index, 1) console.info(this.arr[index] + 'Delete')
console.info(JSON.stringify(this.arr)) this.arr.splice(index, 1)
this.editFlag = false console.info(JSON.stringify(this.arr))
return true this.editFlag = false
}).width('90%') return true
}.width('100%') }).width('90%')
Button('edit list') }.width('100%')
.onClick(() => { Button('edit list')
this.editMode = !this.editMode .onClick(() => {
}).margin({ top: 5, left: 20 }) this.editMode = !this.editMode
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) }).margin({ top: 5, left: 20 })
} }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
} }
\ No newline at end of file
/** // @ts-nocheck
* Copyright (c) 2021 Huawei Device Co., Ltd. /**
* Licensed under the Apache License, Version 2.0 (the "License"); * Copyright (c) 2021 Huawei Device Co., Ltd.
* you may not use this file except in compliance with the License. * Licensed under the Apache License, Version 2.0 (the "License");
* You may obtain a copy of the License at * you may not use this file except in compliance with the License.
* * You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0 *
* * http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software *
* distributed under the License is distributed on an "AS IS" BASIS, * Unless required by applicable law or agreed to in writing, software
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * distributed under the License is distributed on an "AS IS" BASIS,
* See the License for the specific language governing permissions and * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* limitations under the License. * See the License for the specific language governing permissions and
*/ * limitations under the License.
*/
import events_emitter from '@ohos.events.emitter'
import events_emitter from '@ohos.emitter'
@Entry
@Component @Entry
struct MarqueeExample { @Component
@State start: boolean = false struct MarqueeExample {
@State fromStart: boolean = true @State start: boolean = false
@State step: number = 50 @State fromStart: boolean = true
@State loop: number = 3 @State step: number = 50
@State src: string = "Running Marquee starts rolling" @State loop: number = 3
@State fontColor: Color = Color.Blue; @State src: string = "Running Marquee starts rolling"
@State fontSize: number = 50; @State fontColor: Color = Color.Blue;
@State onActionCalledThree: boolean = false; @State fontSize: number = 50;
@State onActionCalledThree: boolean = false;
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { build() {
Marquee({ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
start: this.start, Marquee({
step: this.step, start: this.start,
loop: this.loop, step: this.step,
fromStart: this.fromStart, loop: this.loop,
src: this.src fromStart: this.fromStart,
}) src: this.src
.key('marquee') })
.fontColor(this.fontColor) .key('marquee')
.colorBlend(Color.Green) .fontColor(this.fontColor)
.fontSize(this.fontSize) .colorBlend(Color.Green)
.allowScale(false) .fontSize(this.fontSize)
.fontWeight(FontWeight.Bold) .allowScale(false)
.backgroundColor(Color.Black) .fontWeight(FontWeight.Bold)
.margin({bottom:40}) .backgroundColor(Color.Black)
.onStart(() => { .margin({bottom:40})
console.log('Marquee animation complete onStart') .onStart(() => {
console.info('Onstart current action state is: ' + this.fontColor); console.log('Marquee animation complete onStart')
try { console.info('Onstart current action state is: ' + this.fontColor);
var backData = { try {
data: { var backData = {
"fontColor": this.fontColor, data: {
} "fontColor": this.fontColor,
} }
var backEvent = { }
eventId: 11, var backEvent = {
priority: events_emitter.EventPriority.LOW eventId: 127,
} priority: events_emitter.EventPriority.LOW
console.info("Onstart start to emit action state") }
events_emitter.emit(backEvent, backData) console.info("Onstart start to emit action state")
} catch (err) { events_emitter.emit(backEvent, backData)
console.info("Onstart emit action state err: " + JSON.stringify(err.message)) } catch (err) {
} console.info("Onstart emit action state err: " + JSON.stringify(err.message))
}) }
.onBounce(() => { })
console.log('Marquee animation complete onBounce') .onBounce(() => {
console.info('Onbounce current action state is: ' + this.fontSize); console.log('Marquee animation complete onBounce')
try { console.info('Onbounce current action state is: ' + this.fontSize);
var backData = { try {
data: { var backData = {
"fontSize": this.fontSize, data: {
} "fontSize": this.fontSize,
} }
var backEvent = { }
eventId: 15, var backEvent = {
priority: events_emitter.EventPriority.LOW eventId: 128,
} priority: events_emitter.EventPriority.LOW
console.info("Onbounce start to emit action state") }
events_emitter.emit(backEvent, backData) console.info("Onbounce start to emit action state")
} catch (err) { events_emitter.emit(backEvent, backData)
console.info("Onbounce emit action state err: " + JSON.stringify(err.message)) } catch (err) {
} console.info("Onbounce emit action state err: " + JSON.stringify(err.message))
}) }
.onFinish(() => { })
console.log('Marquee animation complete onFinish') .onFinish(() => {
this.onActionCalledThree = true; console.log('Marquee animation complete onFinish')
console.info('Onfinish current action state is: ' + this.onActionCalledThree); this.onActionCalledThree = true;
try { console.info('Onfinish current action state is: ' + this.onActionCalledThree);
var backData = { try {
data: { var backData = {
"ACTION": this.onActionCalledThree, data: {
} "ACTION": this.onActionCalledThree,
} }
var backEvent = { }
eventId: 16, var backEvent = {
priority: events_emitter.EventPriority.LOW eventId: 129,
} priority: events_emitter.EventPriority.LOW
console.info("Onfinish start to emit action state") }
events_emitter.emit(backEvent, backData) console.info("Onfinish start to emit action state")
} catch (err) { events_emitter.emit(backEvent, backData)
console.info("Onfinish emit action state err: " + JSON.stringify(err.message)) } catch (err) {
} console.info("Onfinish emit action state err: " + JSON.stringify(err.message))
}) }
Button('start') })
.key('button') Button('start')
.onClick(() => { .key('button')
this.start = true .onClick(() => {
try { this.start = true
var backData = { try {
data: { var backData = {
"start": this.start, data: {
} "start": this.start,
} }
var backEvent = { }
eventId: 10, var backEvent = {
priority: events_emitter.EventPriority.LOW eventId: 130,
} priority: events_emitter.EventPriority.LOW
console.info("start to emit action state") }
events_emitter.emit(backEvent, backData) console.info("start to emit action state")
} catch (err) { events_emitter.emit(backEvent, backData)
console.info("emit action state err: " + JSON.stringify(err.message)) } catch (err) {
} console.info("emit action state err: " + JSON.stringify(err.message))
}) }
.width(200) })
.height(60) .width(200)
.margin({bottom:20}) .height(60)
} .margin({bottom:20})
.width('100%') }
.height('100%') .width('100%')
} .height('100%')
}
} }
\ No newline at end of file
/** // @ts-nocheck
* Copyright (c) 2021 Huawei Device Co., Ltd. /**
* Licensed under the Apache License, Version 2.0 (the "License"); * Copyright (c) 2021 Huawei Device Co., Ltd.
* you may not use this file except in compliance with the License. * Licensed under the Apache License, Version 2.0 (the "License");
* You may obtain a copy of the License at * you may not use this file except in compliance with the License.
* * You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0 *
* * http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software *
* distributed under the License is distributed on an "AS IS" BASIS, * Unless required by applicable law or agreed to in writing, software
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * distributed under the License is distributed on an "AS IS" BASIS,
* See the License for the specific language governing permissions and * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* limitations under the License. * See the License for the specific language governing permissions and
*/ * limitations under the License.
*/
import events_emitter from '@ohos.events.emitter'
import events_emitter from '@ohos.emitter'
@Entry
@Component @Entry
struct OverlayExample { @Component
@State title: string = 'old title' struct OverlayExample {
@State x: number = 0 @State title: string = 'old title'
@State y: number = -15 @State x: number = 0
@State Alignment: Alignment = Alignment.Bottom @State y: number = -15
@State alignment: Alignment = Alignment.Bottom
onPageShow() {
console.info('[overlay] page show called '); onPageShow() {
var stateChangeEvent = { console.info('[overlay] page show called ');
eventId: 83, var stateChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 143,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(stateChangeEvent, this.stateChangCallBack); }
} events_emitter.on(stateChangeEvent, this.stateChangCallBack);
}
private stateChangCallBack = (eventData) => {
console.info("[stateChangCallBack] stateChangCallBack "); private stateChangCallBack = (eventData) => {
if (eventData != null) { console.info("[stateChangCallBack] stateChangCallBack ");
console.info("[stateChangCallBack] state change called: " + JSON.stringify(eventData)); if (eventData != null) {
if (eventData.data.title != null) { console.info("[stateChangCallBack] state change called: " + JSON.stringify(eventData));
this.title = eventData.data.title if (eventData.data.align != null) {
} this.alignment = eventData.data.align
if (eventData.data.x != null) { }
this.x = eventData.data.x if (eventData.data.title != null) {
} this.title = eventData.data.title
if (eventData.data.y != null) { }
this.y = eventData.data.y if (eventData.data.x != null) {
} this.x = eventData.data.x
if (eventData.data.align != null) { }
this.Alignment = eventData.data.align if (eventData.data.y != null) {
} this.y = eventData.data.y
} }
}
}
build() { }
Column() {
Column() { build() {
Text('floating layer') Column() {
.fontSize(12).fontColor(0xCCCCCC).maxLines(1) Column() {
Column() { Text('floating layer')
Image('/images/img.jpeg') .fontSize(12).fontColor(0xCCCCCC).maxLines(1)
.width(340).height(240) Column() {
.key('overlay') Image('/images/img.jpeg')
.overlay(this.title, .width(340).height(240)
{ align: this.Alignment, offset: { x: this.x, y: this.y } }) .key('overlay')
}.border({ color: Color.Black, width: 2 }) .overlay(this.title,
}.width('100%') { align: this.alignment, offset: { x: this.x, y: this.y } })
}.padding({ top: 20 }) }.border({ color: Color.Black, width: 2 })
} }.width('100%')
}.padding({ top: 20 })
}
} }
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@Entry
@Component
struct PinchGestureExample {
@State scale: number = 1
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('PinchGesture scale:' + this.scale)
}
.key('pinchGesture')
.height(100).width(200).padding(20).border({ width: 1 }).margin(80)
.scale({ x: this.scale, y: this.scale, z: this.scale })
.gesture(
PinchGesture()
.onActionStart((event: GestureEvent) => {
console.info('Pinch start')
})
.onActionUpdate((event: GestureEvent) => {
this.scale = event.scale
})
.onActionEnd(() => {
console.info('Pinch end')
})
)
}
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@Entry
@Component
struct RotationGestureExample {
@State angle: number = 0
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('RotationGesture angle:' + this.angle)
}
.key('rotationGesture')
.height(100).width(200).padding(20).border({ width:1 })
.margin(80).rotate({ x:1, y:2, z:3, angle: this.angle })
.gesture(
RotationGesture()
.onActionStart((event: GestureEvent) => {
console.log('Rotation start')
})
.onActionUpdate((event: GestureEvent) => {
this.angle = event.angle
})
.onActionEnd(() => {
console.log('Rotation end')
})
)
}
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter'
@Entry
@Component
struct StyleExample {
@State isEnable: boolean = true
@Styles pressedStyles() {
.backgroundColor("#ED6F21")
.borderRadius(10)
.borderStyle(BorderStyle.Dashed)
.borderWidth(2)
.borderColor("#33000000")
.width(120)
.height(30)
.opacity(1)
}
@Styles disabledStyles() {
.backgroundColor("#E5E5E5")
.borderRadius(10)
.borderStyle(BorderStyle.Solid)
.borderWidth(2)
.borderColor("#2a4c1919")
.width(90)
.height(25)
.opacity(1)
}
@Styles normalStyles() {
.backgroundColor("#0A59F7")
.borderRadius(10)
.borderStyle(BorderStyle.Solid)
.borderWidth(2)
.borderColor("#33000000")
.width(100)
.height(25)
.opacity(1)
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
Text("normal")
.fontSize(14)
.fontColor(Color.White)
.opacity(0.5)
.stateStyles({
normal: this.normalStyles,
})
.margin({ bottom: 20 })
.textAlign(TextAlign.Center)
Text("pressed")
.backgroundColor("#0A59F7")
.borderRadius(20)
.borderStyle(BorderStyle.Dotted)
.borderWidth(2)
.borderColor(Color.Red)
.width(100)
.height(25)
.opacity(1)
.fontSize(14)
.fontColor(Color.White)
.stateStyles({
pressed: this.pressedStyles,
})
.margin({ bottom: 20 })
.textAlign(TextAlign.Center)
Text(this.isEnable == true ? "effective" : "disabled")
.backgroundColor("#0A59F7")
.borderRadius(20)
.borderStyle(BorderStyle.Solid)
.borderWidth(2)
.borderColor(Color.Gray)
.width(100)
.height(25)
.opacity(1)
.fontSize(14)
.fontColor(Color.White)
.enabled(this.isEnable)
.stateStyles({
disabled: this.disabledStyles,
})
.textAlign(TextAlign.Center)
Text("control disabled")
.onClick(() => {
this.isEnable = !this.isEnable
console.log(`${this.isEnable}`)
})
}
.width(350).height(300)
}
}
\ No newline at end of file
/** // @ts-nocheck
* Copyright (c) 2021 Huawei Device Co., Ltd. /**
* Licensed under the Apache License, Version 2.0 (the "License"); * Copyright (c) 2021 Huawei Device Co., Ltd.
* you may not use this file except in compliance with the License. * Licensed under the Apache License, Version 2.0 (the "License");
* You may obtain a copy of the License at * you may not use this file except in compliance with the License.
* * You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0 *
* * http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software *
* distributed under the License is distributed on an "AS IS" BASIS, * Unless required by applicable law or agreed to in writing, software
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * distributed under the License is distributed on an "AS IS" BASIS,
* See the License for the specific language governing permissions and * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* limitations under the License. * See the License for the specific language governing permissions and
*/ * limitations under the License.
import events_emitter from '@ohos.events.emitter' */
@Entry import events_emitter from '@ohos.emitter'
@Component
struct StepperExample { @Entry
@State currentIndex: number = 0 @Component
@State firstState: ItemState = ItemState.Normal struct StepperExample {
@State secondState: ItemState = ItemState.Normal @State currentIndex: number = 0
@State disabled: ItemState = ItemState.Normal @State firstState: ItemState = ItemState.Normal
@State secondState: ItemState = ItemState.Normal
build() { @State disabled: ItemState = ItemState.Normal
Stepper({
index: this.currentIndex build() {
}) { Stepper({
StepperItem() { index: this.currentIndex
Text('Page One') }) {
.fontSize(35) StepperItem() {
.fontColor(Color.Blue) Text('Page One')
.width(200) .fontSize(35)
.lineHeight(50) .fontColor(Color.Blue)
.margin({top:250}) .width(200)
} .lineHeight(50)
.nextLabel('') .margin({top:250})
.position({x: '35%', y: 0}) }
.key('stepperItem1') .nextLabel('')
StepperItem() { .position({x: '35%', y: 0})
Text('Page Two') .key('stepperItem1')
.fontSize(35) StepperItem() {
.fontColor(Color.Blue) Text('Page Two')
.width(200) .fontSize(35)
.lineHeight(50) .fontColor(Color.Blue)
.margin({top:250}) .width(200)
.key('text1') .lineHeight(50)
.onClick(()=>{ .margin({top:250})
this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip .key('text1')
}) .onClick(()=>{
} this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
.nextLabel('Next') })
.prevLabel('Previous') }
.status(this.firstState) .nextLabel('Next')
.position({x: '35%', y: 0}) .prevLabel('Previous')
.key('stepperItem2') .status(this.firstState)
StepperItem() { .position({x: '35%', y: 0})
Text('Page Three') .key('stepperItem2')
.fontSize(35) StepperItem() {
.fontColor(Color.Blue) Text('Page Three')
.width(200) .fontSize(35)
.lineHeight(50) .fontColor(Color.Blue)
.margin({top:250}) .width(200)
.key('text2') .lineHeight(50)
.onClick(()=>{ .margin({top:250})
this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting .key('text2')
}) .onClick(()=>{
} this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
.position({x: '35%', y: 0}) })
.status(this.secondState) }
.key('stepperItem3') .position({x: '35%', y: 0})
StepperItem() { .status(this.secondState)
Text('Page four') .key('stepperItem3')
.fontSize(35) StepperItem() {
.fontColor(Color.Blue) Text('Page four')
.width(200) .fontSize(35)
.lineHeight(50) .fontColor(Color.Blue)
.margin({top:250}) .width(200)
} .lineHeight(50)
.position({x: '35%', y: 0}) .margin({top:250})
.nextLabel('Finish') }
.key('stepperItem4') .position({x: '35%', y: 0})
} .nextLabel('Finish')
.onFinish(() => { .key('stepperItem4')
console.log('onFinish') }
}) .onFinish(() => {
.onSkip(() => { console.log('onFinish')
console.log('onSkip') })
}) .onSkip(() => {
.onChange((prevIndex: number, index: number) => { console.log('onSkip')
this.currentIndex = index })
}) .onChange((prevIndex: number, index: number) => {
.align(Alignment.Center) this.currentIndex = index
.key('stepper') })
} .align(Alignment.Center)
.key('stepper')
onPageShow() { }
console.info('stepper page show called');
var stateChangeEvent = { onPageShow() {
eventId: 12, console.info('stepper page show called');
priority: events_emitter.EventPriority.LOW var stateChangeEvent = {
} eventId: 202,
events_emitter.on(stateChangeEvent, this.stateChangCallBack) priority: events_emitter.EventPriority.LOW
} }
events_emitter.on(stateChangeEvent, this.stateChangCallBack)
private stateChangCallBack = (eventData) => { }
console.info("stepper page stateChangCallBack" + JSON.stringify(eventData));
if (eventData != null) { private stateChangCallBack = (eventData) => {
console.info("stepper page state change called:" + JSON.stringify(eventData)); console.info("stepper page stateChangCallBack" + JSON.stringify(eventData));
if(eventData.data.currentIndex != null) { if (eventData != null) {
this.currentIndex = parseInt(eventData.data.currentIndex); console.info("stepper page state change called:" + JSON.stringify(eventData));
} if(eventData.data.currentIndex != null) {
if(eventData.data.disabled != null) { this.currentIndex = parseInt(eventData.data.currentIndex);
this.disabled = eventData.data.disabled; }
} if(eventData.data.disabled != null) {
} this.disabled = eventData.data.disabled;
} }
}
}
} }
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter'
@Entry
@Component
struct PanGestureExample {
@State offsetX: number = 0
@State offsetY: number = 0
@State direction: PanDirection = All
build() {
Flex({ direction: FlexDirection.Column, direction:this.direction, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
}
.key('swipeDirection')
.height(100).width(200).padding(20).border({ width: 1 }).margin(80)
.translate({ x: this.offsetX, y: this.offsetY, z: 5 })
.gesture(
PanGesture({})
.onActionStart((event: PanGestureEvent) => {
console.info('Pan start')
})
.onActionUpdate((event: PanGestureEvent) => {
this.offsetX = event.offsetX
this.offsetY = event.offsetY
})
.onActionEnd(() => {
console.info('Pan end')
})
)
}
onPageShow() {
console.info('panDirection page show called');
var stateChangeEvent = {
eventId: 167,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(stateChangeEvent, this.stateChangCallBack)
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("panDirection page state change called:" + JSON.stringify(eventData));
if (eventData.data.direction != null) {
this.direction = eventData.data.direction;
}
}
}
}
\ No newline at end of file
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import events_emitter from '@ohos.events.emitter'
import events_emitter from '@ohos.emitter'
class MyDataSource implements IDataSource {
private list: number[] = [] class MyDataSource implements IDataSource {
private listener: DataChangeListener private list: number[] = []
private listener: DataChangeListener
constructor(list: number[]) {
this.list = list constructor(list: number[]) {
} this.list = list
}
totalCount(): number {
return this.list.length totalCount(): number {
} return this.list.length
}
getData(index: number): any {
return this.list[index] getData(index: number): any {
} return this.list[index]
}
registerDataChangeListener(listener: DataChangeListener): void {
this.listener = listener registerDataChangeListener(listener: DataChangeListener): void {
} this.listener = listener
}
unregisterDataChangeListener() {
} unregisterDataChangeListener() {
} }
}
@Entry
@Component @Entry
struct SwiperExample { @Component
private swiperController: SwiperController = new SwiperController() struct SwiperExample {
private data: MyDataSource = new MyDataSource([]) private swiperController: SwiperController = new SwiperController()
@State index: number = 1 private data: MyDataSource = new MyDataSource([])
@State autoPlay: boolean = true @State index: number = 1
@State interval: number = 4000 @State displayCount: number = 3
@State indicator: boolean = true @State displayMode: number = SwiperDisplayMode.AutoLinear
@State loop: boolean = false @State edgeEffect: number = EdgeEffect.None
@State duration: number = 1000 @State autoPlay: boolean = true
@State vertical: boolean = false @State interval: number = 4000
@State itemSpace: number = 0 @State indicator: boolean = true
@State onActionCalledOne: boolean = false; @State loop: boolean = false
@State onActionCalledTwo: boolean = false; @State duration: number = 1000
@State onActionCalledThree: boolean = false; @State vertical: boolean = false
@State itemSpace: number = 0
private aboutToAppear(): void { @State onActionCalledOne: boolean = false;
let list = [] @State onActionCalledTwo: boolean = false;
for (var i = 1; i <= 10; i++) { @State onActionCalledThree: boolean = false;
list.push(i.toString());
} private aboutToAppear(): void {
this.data = new MyDataSource(list) let list = []
} for (var i = 1; i <= 10; i++) {
list.push(i.toString());
build() { }
Column({ space: 5 }) { this.data = new MyDataSource(list)
Swiper(this.swiperController) { }
LazyForEach(this.data, (item: string) => {
Text(item) build() {
.width('90%') Column({ space: 5 }) {
.height(160) Swiper(this.swiperController) {
.backgroundColor(0xAFEEEE) LazyForEach(this.data, (item: string) => {
.textAlign(TextAlign.Center) Text(item)
.fontSize(20) .width('90%')
}, item => item) .height(160)
} .backgroundColor(0xAFEEEE)
.cachedCount(2) .textAlign(TextAlign.Center)
.index(this.index) .fontSize(20)
.autoPlay(this.autoPlay) }, item => item)
.interval(this.interval) }
.indicator(this.indicator) .cachedCount(2)
.loop(this.loop) .index(this.index)
.duration(this.duration) .autoPlay(this.autoPlay)
.vertical(this.vertical) .interval(this.interval)
.itemSpace(this.itemSpace) .indicator(this.indicator)
.key('swiper') .loop(this.loop)
.onChange((index: number) => { .duration(this.duration)
console.info(index.toString()) .vertical(this.vertical)
this.onActionCalledThree = true; .itemSpace(this.itemSpace)
console.info('onChange current action state is: ' + this.onActionCalledThree); .displayMode(this.displayMode)
try { .displayCount(this.displayCount)
var backData = { .effectMode(this.edgeEffect)
data: { .indicatorStyle({ top: 20, right: 20,size:2,color: Color.Blue})
"ACTION": this.onActionCalledThree, .key('swiper')
} .onChange((index: number) => {
} console.info(index.toString())
var backEvent = { this.onActionCalledThree = true;
eventId: 20, console.info('onChange current action state is: ' + this.onActionCalledThree);
priority: events_emitter.EventPriority.LOW try {
} var backData = {
console.info("onChange start to emit action state") data: {
events_emitter.emit(backEvent, backData) "ACTION": this.onActionCalledThree,
} catch (err) { }
console.info("onChange emit action state err: " + JSON.stringify(err.message)) }
} var backEvent = {
}) eventId: 204,
priority: events_emitter.EventPriority.LOW
Flex({ justifyContent: FlexAlign.SpaceAround }) { }
Button('next') console.info("onChange start to emit action state")
.key('button1') events_emitter.emit(backEvent, backData)
.onClick(() => { } catch (err) {
this.swiperController.showNext(); console.info("onChange emit action state err: " + JSON.stringify(err.message))
this.onActionCalledOne = true; }
console.info('button1 current action state is: ' + this.onActionCalledOne); })
try {
var backData = { Flex({ justifyContent: FlexAlign.SpaceAround }) {
data: { Button('next')
"ACTION": this.onActionCalledOne, .key('button1')
} .onClick(() => {
} this.swiperController.showNext();
var backEvent = { this.onActionCalledOne = true;
eventId: 18, console.info('button1 current action state is: ' + this.onActionCalledOne);
priority: events_emitter.EventPriority.LOW try {
} var backData = {
console.info("button1 start to emit action state") data: {
events_emitter.emit(backEvent, backData) "ACTION": this.onActionCalledOne,
} catch (err) { }
console.info("button1 emit action state err: " + JSON.stringify(err.message)) }
} var backEvent = {
}) eventId: 205,
Button('preview') priority: events_emitter.EventPriority.LOW
.key('button2') }
.onClick(() => { console.info("button1 start to emit action state")
this.swiperController.showPrevious() events_emitter.emit(backEvent, backData)
this.onActionCalledTwo = true; } catch (err) {
console.info('button2 current action state is: ' + this.onActionCalledTwo); console.info("button1 emit action state err: " + JSON.stringify(err.message))
try { }
var backData = { })
data: { Button('preview')
"ACTION": this.onActionCalledTwo, .key('button2')
} .onClick(() => {
} this.swiperController.showPrevious()
var backEvent = { this.onActionCalledTwo = true;
eventId: 19, console.info('button2 current action state is: ' + this.onActionCalledTwo);
priority: events_emitter.EventPriority.LOW try {
} var backData = {
console.info("button2 start to emit action state") data: {
events_emitter.emit(backEvent, backData) "ACTION": this.onActionCalledTwo,
} catch (err) { }
console.info("button2 emit action state err: " + JSON.stringify(err.message)) }
} var backEvent = {
}) eventId: 206,
} priority: events_emitter.EventPriority.LOW
}.margin({ top: 5 }) }
} console.info("button2 start to emit action state")
events_emitter.emit(backEvent, backData)
onPageShow() { } catch (err) {
console.info('swiper page show called'); console.info("button2 emit action state err: " + JSON.stringify(err.message))
var stateChangeEvent = { }
eventId: 17, })
priority: events_emitter.EventPriority.LOW }
} }.margin({ top: 5 })
events_emitter.on(stateChangeEvent, this.stateChangCallBack) }
var stateChangeEventOne = { onPageShow() {
eventId: 55, console.info('swiper page show called');
priority: events_emitter.EventPriority.LOW var stateChangeEvent = {
} eventId: 207,
events_emitter.on(stateChangeEventOne, this.stateChangCallBack) priority: events_emitter.EventPriority.LOW
}
var stateChangeEventTwo = { events_emitter.on(stateChangeEvent, this.stateChangCallBack)
eventId: 56,
priority: events_emitter.EventPriority.LOW var stateChangeEventOne = {
} eventId: 208,
events_emitter.on(stateChangeEventTwo, this.stateChangCallBack) priority: events_emitter.EventPriority.LOW
}
var stateChangeEventTwo = { events_emitter.on(stateChangeEventOne, this.stateChangCallBack)
eventId: 57,
priority: events_emitter.EventPriority.LOW var stateChangeEventTwo = {
} eventId: 209,
events_emitter.on(stateChangeEventTwo, this.stateChangCallBack) priority: events_emitter.EventPriority.LOW
} }
events_emitter.on(stateChangeEventTwo, this.stateChangCallBack)
private stateChangCallBack = (eventData) => {
if (eventData != null) { var stateChangeEventTwo = {
console.info("swiper page state change called:" + JSON.stringify(eventData)); eventId: 210,
if (eventData.data.index != null) { priority: events_emitter.EventPriority.LOW
this.index = parseInt(eventData.data.index); }
} events_emitter.on(stateChangeEventTwo, this.stateChangCallBack)
if (eventData.data.autoPlay != null) { }
this.autoPlay = eventData.data.autoPlay;
} private stateChangCallBack = (eventData) => {
if (eventData.data.interval != null) { if (eventData != null) {
this.interval = parseInt(eventData.data.interval); console.info("swiper page state change called:" + JSON.stringify(eventData));
} if (eventData.data.index != null) {
if (eventData.data.indicator != null) { this.index = parseInt(eventData.data.index);
this.indicator = eventData.data.indicator; }
} if (eventData.data.autoPlay != null) {
if (eventData.data.loop != null) { this.autoPlay = eventData.data.autoPlay;
this.loop = eventData.data.loop; }
} if (eventData.data.interval != null) {
if (eventData.data.duration != null) { this.interval = parseInt(eventData.data.interval);
this.duration = parseInt(eventData.data.duration); }
} if (eventData.data.indicator != null) {
if (eventData.data.vertical != null) { this.indicator = eventData.data.indicator;
this.vertical = eventData.data.vertical; }
} if (eventData.data.loop != null) {
if (eventData.data.itemSpace != null) { this.loop = eventData.data.loop;
this.itemSpace = parseInt(eventData.data.itemSpace); }
} if (eventData.data.duration != null) {
} this.duration = parseInt(eventData.data.duration);
} }
if (eventData.data.vertical != null) {
this.vertical = eventData.data.vertical;
}
if (eventData.data.itemSpace != null) {
this.itemSpace = parseInt(eventData.data.itemSpace);
}
}
}
} }
\ No newline at end of file
// @ts-nocheck // @ts-nocheck
/** /**
* Copyright (c) 2021 Huawei Device Co., Ltd. * Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import events_emitter from '@ohos.events.emitter';
import events_emitter from '@ohos.emitter';
@Entry
@Component @Entry
struct TextStyle { @Component
@State fontColor: Color = Color.Red; struct TextStyle {
@State fontSize: string = 20; @State fontColor: Color = Color.Red;
@State fontStyle: FontStyle = FontStyle.Italic; @State fontSize: string = 20;
@State fontWeight: string = 700; @State fontStyle: FontStyle = FontStyle.Italic;
@State fontFamily: string = 'sans-serif'; @State fontWeight: string = 700;
@State fontFamily: string = 'sans-serif';
build() {
Column({ space: 20 }) { build() {
Text('default text').fontSize(20) Column({ space: 20 }) {
Text('default text').fontSize(20)
Text(`text font color ${this.fontColor}`)
.fontColor(this.fontColor) Text(`text font color ${this.fontColor}`)
.fontSize(20) .fontColor(this.fontColor)
.key('fontColor') .fontSize(20)
.key('fontColor')
Text(`text font size ${this.fontSize}`)
.fontSize(this.fontSize) Text(`text font size ${this.fontSize}`)
.key('fontSize') .fontSize(this.fontSize)
.key('fontSize')
Text(`text font style ${this.fontStyle}`)
.fontStyle(this.fontStyle) Text(`text font style ${this.fontStyle}`)
.fontSize(20) .fontStyle(this.fontStyle)
.key('fontStyle') .fontSize(20)
.key('fontStyle')
Text(`text fontWeight ${this.fontWeight}`)
.fontWeight(this.fontWeight) Text(`text fontWeight ${this.fontWeight}`)
.fontSize(20) .fontWeight(this.fontWeight)
.key('fontWeight') .fontSize(20)
.key('fontWeight')
Text(`text fontFamily ${this.fontFamily}`)
.fontFamily(this.fontFamily) Text(`text fontFamily ${this.fontFamily}`)
.fontSize(20) .fontFamily(this.fontFamily)
.key('fontFamily') .fontSize(20)
.key('fontFamily')
Text('red 20 Italic bold cursive text')
.fontColor(Color.Red) Text('red 20 Italic bold cursive text')
.fontSize(20) .fontColor(Color.Red)
.fontStyle(FontStyle.Italic) .fontSize(20)
.fontWeight(700) .fontStyle(FontStyle.Italic)
.fontFamily('cursive') .fontWeight(700)
.textAlign(TextAlign.Center) .fontFamily('cursive')
.width('90%') .textAlign(TextAlign.Center)
.width('90%')
Text('Orange 18 Normal source-sans-pro text')
.fontColor(Color.Orange) Text('Orange 18 Normal source-sans-pro text')
.fontSize(20) .fontColor(Color.Orange)
.fontStyle(FontStyle.Normal) .fontSize(20)
.fontWeight(400) .fontStyle(FontStyle.Normal)
.fontFamily('source-sans-pro,cursive,sans-serif') .fontWeight(400)
}.width('100%').margin({top: 20}) .fontFamily('source-sans-pro,cursive,sans-serif')
} }.width('100%').margin({top: 20})
onPageShow() { }
let fontColorChangeEvent = { onPageShow() {
eventId: 40, let fontColorChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 37,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(fontColorChangeEvent, this.textStyleChangCallBack); }
let fontSizeChangeEvent = { events_emitter.on(fontColorChangeEvent, this.textStyleChangCallBack);
eventId: 41, let fontSizeChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 38,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(fontSizeChangeEvent, this.textStyleChangCallBack); }
let fontStyleChangeEvent = { events_emitter.on(fontSizeChangeEvent, this.textStyleChangCallBack);
eventId: 42, let fontStyleChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 39,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(fontStyleChangeEvent, this.textStyleChangCallBack); }
let fontWeightChangeEvent = { events_emitter.on(fontStyleChangeEvent, this.textStyleChangCallBack);
eventId: 43, let fontWeightChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 40,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(fontWeightChangeEvent, this.textStyleChangCallBack); }
let fontFamilyChangeEvent = { events_emitter.on(fontWeightChangeEvent, this.textStyleChangCallBack);
eventId: 44, let fontFamilyChangeEvent = {
priority: events_emitter.EventPriority.LOW eventId: 41,
} priority: events_emitter.EventPriority.LOW
events_emitter.on(fontFamilyChangeEvent, this.textStyleChangCallBack); }
} events_emitter.on(fontFamilyChangeEvent, this.textStyleChangCallBack);
textStyleChangCallBack = (eventData) => { }
console.info("textStyle page stateChangCallBack" + JSON.stringify(eventData)); textStyleChangCallBack = (eventData) => {
if (eventData && eventData.data) { console.info("textStyle page stateChangCallBack" + JSON.stringify(eventData));
if (eventData.data.fontColor) { if (eventData && eventData.data) {
this.fontColor = eventData.data.fontColor; if (eventData.data.fontColor) {
} else if (eventData.data.fontSize) { this.fontColor = eventData.data.fontColor;
this.fontSize = eventData.data.fontSize; } else if (eventData.data.fontSize) {
} else if (eventData.data.fontWeight) { this.fontSize = eventData.data.fontSize;
this.fontWeight = eventData.data.fontWeight; } else if (eventData.data.fontWeight) {
} else if (eventData.data.fontFamily) { this.fontWeight = eventData.data.fontWeight;
this.fontFamily = eventData.data.fontFamily; } else if (eventData.data.fontFamily) {
} else { this.fontFamily = eventData.data.fontFamily;
this.fontStyle = eventData.data.fontStyle; } else {
} this.fontStyle = eventData.data.fontStyle;
} }
} }
}
} }
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
import router from '@system.router';
import Utils from '../Utils.ets';
export default function touchAbleJsunit() {
beforeEach(async function (done) {
console.info("touchAble beforeEach start");
let options = {
uri: 'pages/general-properties/touchAble',
}
try {
router.clear();
let pages = router.getState();
console.info("get touchAble state pages:" + JSON.stringify(pages));
if (!("touchAble" == pages.name)) {
console.info("get touchAble state pages.name:" + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push touchAble page result:" + JSON.stringify(result));
}
} catch (err) {
console.error("push touchAble page error:" + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("touchAble after each called");
});
it('testTouchAble001', 0, async function (done) {
await Utils.sleep(1000)
let strJson = getInspectorByKey('ellipse');
let obj = JSON.parse(strJson);
console.info("[testTouchAble001] component obj is: " + JSON.stringify(obj));
expect(obj.$attrs.touchable).assertEqual(false);
done();
});
}
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册