diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/README_zh.md b/code/UI/ArkTsComponentCollection/ComponentCollection/README_zh.md index 924d1b9c0..831a1f319 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/README_zh.md +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/README_zh.md @@ -173,6 +173,8 @@ entry/src/main/ets/ | | | | |---GaugeSample.ets // 仪表盘 | | | |---loadingProgressSample | | | | |---LoadingProgressSample.ets +| | | |---listSample // 列表 +| | | | |---ListSample.ets | | | |---marqueeSample | | | | |---MarqueeSample.ets // 跑马灯 | | | |---radioSample @@ -202,6 +204,8 @@ entry/src/main/ets/ | | | | |---NavigationSample.ets // 导航 | | | | |---NavigationSecondPage.ets | | | | |---NavigationThirdPage.ets +| | | |---navRouterSample +| | | | |---NavRouterSample.ets // 导航 | | | |---stepperAndStepperItemSample | | | | |---StepperAndStepperItemSample.ets // 步骤导航器 | | | |---tabContentSample @@ -368,6 +372,8 @@ entry/src/main/ets/ | | | | |---ScaleSample.ets // 缩放 | | | |---shapeCropSample | | | | |---ShapeCropSample.ets // 形状裁剪 +| | | |---safeAreaSample +| | | | |---SafeAreaSample.ets // 安全区域 | | | |---sizeSample | | | | |---SizeSample.ets // 尺寸 | | | |---transformSample diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/animations/TransitionAnimations/floatingSample/FloatingWindowSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/animations/TransitionAnimations/floatingSample/FloatingWindowSample.ets index 74bc8100b..294f83f7a 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/animations/TransitionAnimations/floatingSample/FloatingWindowSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/animations/TransitionAnimations/floatingSample/FloatingWindowSample.ets @@ -56,6 +56,8 @@ struct FloatingWindowSample { Column() { TitleBar({ title: $r('app.string.Floating_window') }) .id('target') + TextInput({ placeholder: $r('app.string.avoiding_input_method_testing') }) + .width('95%').height(50).enableKeyboardOnFocus(false).id('test_input') Row() { Row() { FloatingWindowComponent() diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/ComponentData.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/ComponentData.ets index b1fcc7d4b..b0d26d12c 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/ComponentData.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/ComponentData.ets @@ -151,6 +151,10 @@ const INFORMATION_PRESENTATION_AND_DYNAMIC_EFFECTS: ThirdLevelCategory = { title: $r('app.string.qrcode_title'), url: 'pages/components/informationPresentationAndDynamicEffects/qrCodeSample/QRCodeSample' + }, + { + title: $r('app.string.list'), + url: 'pages/components/informationPresentationAndDynamicEffects/listSample/ListSample' }, { title: $r('app.string.loading_progress'), @@ -329,6 +333,10 @@ const NAVIGATION: ThirdLevelCategory = image: $r('app.media.ic_navigation'), title: $r('app.string.navigation'), childNodes : [ + { + title: $r('app.string.navRouter_title'), + url: 'pages/components/navigation/navRouterSample/NavRouterSample' + }, { title: $r('app.string.navigation_title'), url: 'pages/components/navigation/navigationSample/NavigationSample' diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/auxiliary/refreshSample/RefreshSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/auxiliary/refreshSample/RefreshSample.ets index fbff8b918..d496e4e21 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/auxiliary/refreshSample/RefreshSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/auxiliary/refreshSample/RefreshSample.ets @@ -51,11 +51,22 @@ struct RefreshSample { @State mFriction: number = 62 private dataArray: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + @Builder refreshBuilder() { + Column() { + Text($r('app.string.auxiliary_refresh_refreshing')) + .fontSize(16) + } + .alignItems(HorizontalAlign.Center) + .justifyContent(FlexAlign.Center) + .padding(16) + .borderRadius(12) + } + build() { Column() { TitleBar({ title: $r('app.string.auxiliary_refresh') }) Column() { - Refresh({ refreshing: $$this.isRefreshing, offset: this.mOffset, friction: this.mFriction }) { + Refresh({ refreshing: $$this.isRefreshing, offset: this.mOffset, friction: this.mFriction, builder:this.refreshBuilder }) { Scroll() { Column() { ForEach(this.dataArray, (item) => { @@ -69,10 +80,11 @@ struct RefreshSample { Blank(6) }) - }.width('80%') + }.width('100%') }.width('100%') .height(300) } + .width('100%') .height(300) .onRefreshing(() => { setTimeout(() => { diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/buttonAndSelection/counterSample/CounterSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/buttonAndSelection/counterSample/CounterSample.ets index b631bf5bf..8024d9026 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/buttonAndSelection/counterSample/CounterSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/buttonAndSelection/counterSample/CounterSample.ets @@ -33,6 +33,9 @@ import { TitleBar } from '../../../../common/TitleBar' @Entry @Component struct CounterSample { + @State mEnableInc: boolean = true + @State mEnableDec: boolean = true + @State enableCount: number = 0 @State count: number = 0 @State imageCount: number = 0 private images: Resource[] = [$r('app.media.ic_button_circle_add'), $r('app.media.ic_blank_and_divider'), @@ -71,6 +74,39 @@ struct CounterSample { this.imageCount-- }) }.cardStyle() + + Text('EnableInc And EnableDec') + .leftTitleStyle() + Column() { + Row() { + Text('enableInc') + .fontSize(15) + Checkbox() + .id('inc') + .select(this.mEnableInc) + .onChange((value) => { + this.mEnableInc = value + }) + Text('enableDec') + .fontSize(15) + Checkbox() + .id('dec') + .select(this.mEnableDec) + .onChange((value) => { + this.mEnableDec = value + }) + }.alignSelf(ItemAlign.Start) + Counter() { + Text(this.enableCount.toString()) + }.onInc(() => { + this.enableCount++ + }) + .onDec(() => { + this.enableCount-- + }) + .enableDec(this.mEnableDec) + .enableInc(this.mEnableInc) + }.cardStyle() } .backgroundColor($r('app.color.background_light_gray')) .height('100%') diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/informationPresentationAndDynamicEffects/listSample/ListSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/informationPresentationAndDynamicEffects/listSample/ListSample.ets new file mode 100755 index 000000000..ea30ac14a --- /dev/null +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/informationPresentationAndDynamicEffects/listSample/ListSample.ets @@ -0,0 +1,87 @@ +/* + * Copyright (c) 2023 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 { TitleBar } from '../../../../common/TitleBar' + +@Extend(Text) function leftTitleStyle() { + .fontColor($r('app.color.font_color_shallow')) + .fontSize(18) + .height(22) + .alignSelf(ItemAlign.Start) + .margin({ left: 12, bottom: 8 }) +} + +@Extend(Column) function cardStyle() { + .backgroundColor(Color.White) + .borderRadius(24) + .width('100%') + .padding(12) + .margin({ bottom: 12 }) +} + +@Entry +@Component +struct ListSample { + @State arr: number[] = [0, 1, 2, 3, 4] + + @Builder itemEnd() { + Row() { + Button('Delete').margin('4vp') + Button('Set').margin('4vp') + }.padding('4vp').justifyContent(FlexAlign.SpaceEvenly) + } + + build() { + Column() { + TitleBar({ title: $r('app.string.list') }) + Text($r('app.string.delete_list_item')) + .leftTitleStyle() + Column() { + List({ space: 10 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text('item' + item) + .width('100%') + .height(100) + .fontSize(16) + .textAlign(TextAlign.Center) + .borderRadius(10) + .backgroundColor(0xFFFFFF) + } + .transition({ type: TransitionType.Delete, opacity: 0 }) + .swipeAction({ + end: { + useDefaultDeleteAnimation: true, + onDelete: () => { + animateTo({ duration: 1000 }, () => { + let index = this.arr.indexOf(item) + this.arr.splice(index, 1) + }) + }, + deleteAreaDistance: 80, + } + }) + }, item => item) + } + } + .cardStyle() + .width('100%') + } + .height('100%') + .width('100%') + .backgroundColor($r('app.color.background_light_gray')) + .padding({ left: 20, right: 20 }) + } +} \ No newline at end of file diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/navigation/navRouterSample/NavRouterSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/navigation/navRouterSample/NavRouterSample.ets new file mode 100755 index 000000000..6c7cf1121 --- /dev/null +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/navigation/navRouterSample/NavRouterSample.ets @@ -0,0 +1,72 @@ +/* + * Copyright (c) 2023 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 { TitleBar } from '../../../../common/TitleBar' +import { getStringData } from '../../../../data/ResourceDataHandle' + +@Entry +@Component +struct NavRouterSample { + private arr: number[] = [1, 2, 3]; + + build() { + Column() { + TitleBar({ title: $r('app.string.navRouter_title') }) + Navigation() { + + List({ space: 12 }) { + ForEach(this.arr, (item) => { + ListItem() { + NavRouter() { + Text(getStringData($r('app.string.nav_router')) + item) + .width("100%") + .height(72) + .backgroundColor('#FFFFFF') + .borderRadius(24) + .fontSize(16) + .fontWeight(500) + .textAlign(TextAlign.Center) + NavDestination() { + Text("NavDestinationContent" + item) + } + .title("NavDestinationTitle" + item) + } + } + .id('Navigation'+item) + }, item => item) + } + .width("90%") + .margin({ top: 12 }) + } + .title("主标题") + .mode(NavigationMode.Stack) + .menus([ + {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}}, + {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}, + {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}, + {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}, + {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}} + ]) + .toolBar({items: [ + {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}, + {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}, + {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}} + ]}) + } + .height('100%') + .width('100%') + .backgroundColor('#F1F3F5') + } +} \ No newline at end of file diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/scrollSample/ScrollSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/scrollSample/ScrollSample.ets index ffabcd781..16829b6bf 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/scrollSample/ScrollSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/scrollSample/ScrollSample.ets @@ -17,13 +17,14 @@ import { TitleBar } from '../../../../common/TitleBar' @Extend(Text) function leftTitleStyle() { .fontColor($r('app.color.sub_title_color')) - .fontSize(14) + .fontSize(18) .height(22) .alignSelf(ItemAlign.Start) - .margin({ left: 12, top: 12 }) + .margin({ left: 12, bottom: 8 }) } @Extend(Column) function cardStyle() { + .margin({ bottom: 12 }) .backgroundColor(Color.White) .borderRadius(24) .width('100%') @@ -53,36 +54,59 @@ struct ScrollSample { build() { Column() { TitleBar({ title: $r('app.string.scroll_name') }) - Text($r('app.string.scroll_horizontal')) - .leftTitleStyle() - Column() { - Scroll() { - Image($r('app.media.banner')) - .width('150%') - .height('100%') - .objectFit(ImageFit.Contain) - } - .scrollable(this.scroll_direction) - .width('100%') - .height(200) - }.cardStyle() - - Text($r('app.string.scroll_vertical')) - .leftTitleStyle() - Column() { - Scroll() { - Image($r('app.media.banner')) + Scroll() { + Column() { + Text($r('app.string.scroll_horizontal')) + .leftTitleStyle() + Column() { + Scroll() { + Image($r('app.media.banner')) + .width('150%') + .height('100%') + .objectFit(ImageFit.Contain) + } + .scrollable(this.scroll_direction) .width('100%') - .height('150%') - .objectFit(ImageFit.Contain) + .height(200) + }.cardStyle() + + Text($r('app.string.scroll_vertical')) + .leftTitleStyle() + Column() { + Scroll() { + Image($r('app.media.banner')) + .width('100%') + .height('150%') + .objectFit(ImageFit.Contain) + } + .scrollable(ScrollDirection.Vertical) + .width('100%') + .height(200) + }.cardStyle() + + Text($r('app.string.avoiding_input_method_testing')) + .leftTitleStyle() + Column() { + TextInput({ placeholder: $r('app.string.avoiding_input_method_testing') }) + .width('95%').height(50).enableKeyboardOnFocus(false).id('test_input') + Scroll() { + Image($r('app.media.banner')) + .width('100%') + .height('150%') + .objectFit(ImageFit.Contain) + } + .id('avoiding_input_scroll') + .scrollable(ScrollDirection.Vertical) + .width('100%') + .height(200) + }.cardStyle() + .margin({ bottom: 80 }) } - .scrollable(ScrollDirection.Vertical) - .width('100%') - .height(200) - }.cardStyle() - }.backgroundColor($r('app.color.background_light_gray')) - .width('100%') - .height('100%') - .padding({ left: 20, right: 20 }) + .constraintSize({ minHeight: '100%' }) + } + .backgroundColor($r('app.color.background_light_gray')) + .width('100%') + .padding({ left: 20, right: 20 }) + } } } \ No newline at end of file diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperControlPanel.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperControlPanel.ets index 90dff6f25..edefdcd02 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperControlPanel.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperControlPanel.ets @@ -24,6 +24,8 @@ export struct PropertiesControlPanel { @Link loop: boolean; @Link autoPlay: boolean; @Link interval: number; + @Link nextMarginLength: number; + @Link prevMarginLength: number; build() { Column() { @@ -60,6 +62,22 @@ export struct PropertiesControlPanel { testId:"swiper_005" }) + CommonItemSlider({ + changeValue: $nextMarginLength, + min: 0, + max: 50, + name: $r('app.string.swiper_next_margin'), + testId:"swiper_008" + }) + + CommonItemSlider({ + changeValue: $prevMarginLength, + min: 0, + max: 50, + name: $r('app.string.swiper_previous_margin'), + testId:"swiper_009" + }) + CommonItemSelect({ name: $r('app.string.swiper_properties_duration'), selects: ['400', '1000', '2000'], diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperSample.ets index d5fbc8b21..3e57c9c5b 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperSample.ets @@ -45,6 +45,8 @@ struct SwiperSample { @State loop: boolean = false; @State autoPlay: boolean = false; @State interval : number = 1000; + @State nextMarginLength: number = 0 + @State prevMarginLength: number = 0 private controller: SwiperController = new SwiperController(); private data: number[] = []; @@ -77,6 +79,8 @@ struct SwiperSample { } }) } + .nextMargin(this.nextMarginLength) + .prevMargin(this.prevMarginLength) .disableSwipe(this.isDisableSwipe) .itemSpace(this.itemSpace) .vertical(this.isVertical) @@ -122,7 +126,9 @@ struct SwiperSample { duration: $duration, loop: $loop, autoPlay: $autoPlay, - interval : $interval + interval : $interval, + nextMarginLength: $nextMarginLength, + prevMarginLength: $prevMarginLength }) } .backgroundStyle() diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/searchSample/SearchSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/searchSample/SearchSample.ets index 92846c49d..285bb0e04 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/searchSample/SearchSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/searchSample/SearchSample.ets @@ -47,7 +47,7 @@ struct SearchSample { Text('onCopy:' + this.copyValue).fontSize(18).margin(15) Text('onCut:' + this.cutValue).fontSize(18).margin(15) Text('onPaste:' + this.pasteValue).fontSize(18).margin(15) - Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller }) + Search({ value: this.changeValue, placeholder: $r('app.string.search_placeholder'), controller: this.controller }) .searchButton('SEARCH') .id('search_001') .width('95%') diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/spanSample/ChangePanel.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/spanSample/ChangePanel.ets index 6b910c18d..6f692e487 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/spanSample/ChangePanel.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/spanSample/ChangePanel.ets @@ -16,13 +16,13 @@ import { CommonItemSlider, CommonItemSelect, CommonItemColorSelect } from '../../../../common/AttributeModificationTool' import { selectData } from '../../ComponentData' import { getStringArrayData } from '../../../../data/ResourceDataHandle' -import { TestType } from '@ohos/hypium' @Component export struct ChangePanel { @Link letterSpacing: number @Link decoration: TextDecorationType @Link decorationColor: Color + @Link lineHeight: number build() { Column() { @@ -31,7 +31,15 @@ export struct ChangePanel { min: 0, max: 12, name: $r('app.string.span_letter_spacing'), - testId: `span_001`, + testId:'Slider1' + }) + + CommonItemSlider({ + changeValue: $lineHeight, + min: 0, + max: 100, + name: $r('app.string.span_line_height'), + testId:'Slider2' }) CommonItemSelect({ @@ -51,14 +59,12 @@ export struct ChangePanel { default: this.decoration = TextDecorationType.None } - }, - testId: `test_itemSelect` + } }) CommonItemColorSelect({ name: $r('app.string.span_decoration_color'), - selectColor: $decorationColor, - testId: `test_colorSelect` + selectColor: $decorationColor }) } } diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/spanSample/SpanSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/spanSample/SpanSample.ets index 54ee5ffdb..723982336 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/spanSample/SpanSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/spanSample/SpanSample.ets @@ -32,6 +32,7 @@ struct SpanSample { @State decoration: TextDecorationType = TextDecorationType.None @State textCase: TextCase = TextCase.Normal @State decorationColor: Color = Color.Red + @State lineHeight: number = 3 build() { Column() { @@ -59,25 +60,47 @@ struct SpanSample { Column() { Text() { Span($r('app.string.span_text_decoration')) - .fontSize(20) + .font({ + size: 20 + }) + .height(50) + .lineHeight(this.lineHeight) .decoration({ type: this.decoration, // Decoration type color: this.decorationColor // Line color }) Span($r('app.string.span_text_spacing')) - .fontSize(20) + .font({ + size: 20 + }) + .lineHeight(this.lineHeight) .letterSpacing(this.letterSpacing) // Letter spacing } - .height(50) - + .height(60) + .fontSize(50) ChangePanel({ letterSpacing: $letterSpacing, decoration: $decoration, - decorationColor: $decorationColor + decorationColor: $decorationColor, + lineHeight: $lineHeight }) } .backgroundStyle() + + IntroductionTitle({ introduction: $r('app.string.span_inherits_text_attribute') }) + Column() { + Text() { + Span($r('app.string.span_does_not_inherit_text_attribute')) + .fontSize(20) + .height(50) + + Span($r('app.string.span_inherits_text_attribute')) + } + .height(70) + .fontSize(10) + } + .backgroundStyle() .margin({ bottom: 80 }) } .constraintSize({ minHeight: '100%' }) // Let the minHeight of the component cover screen at least diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textAreaSample/TextAreaSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textAreaSample/TextAreaSample.ets index bfcd8b6e3..99df28d27 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textAreaSample/TextAreaSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textAreaSample/TextAreaSample.ets @@ -17,9 +17,10 @@ import { IntroductionTitle } from '../../../../common/IntroductionTitle'; import ShowToast from '../../../../util/ShowToast'; import { TitleBar } from '../../../../common/TitleBar'; import { LEFT_PADDING, RIGHT_PADDING } from '../../ComponentData'; -import {textAreaControlPanel} from './ChangePanel'; +import { textAreaControlPanel } from './ChangePanel'; +import Logger from '../../../../util/Logger' -@Extend(Column) function cardStyle(){ +@Extend(Column) function cardStyle() { .borderRadius(24) .backgroundColor($r('app.color.white')) .width('100%') @@ -29,29 +30,33 @@ import {textAreaControlPanel} from './ChangePanel'; @Entry @Component struct TextAreaSample { + @State startSelect: number = 0 + @State endSelect: number = 0 + @State maxSelect: number = 0 + @State selects: string[] = ['0'] + private select: number = 1 @State textAreaSet: string = ''; @State placeholderColor: Color = Color.Blue; @State textAlign: TextAlign = TextAlign.Start; - @State caretColor:Color = Color.Blue; + @State caretColor: Color = Color.Blue; @State copyOptions: CopyOptions = CopyOptions.None; controller: TextAreaController = new TextAreaController(); - build() { - Column(){ - TitleBar({title:$r('app.string.textarea_title')}) - Scroll(){ + Column() { + TitleBar({ title: $r('app.string.textarea_title') }) + Scroll() { Column() { - IntroductionTitle({introduction:$r('app.string.textarea_show')}) - Column(){ + IntroductionTitle({ introduction: $r('app.string.textarea_show') }) + Column() { TextArea({ - text:this.textAreaSet, + text: this.textAreaSet, placeholder: 'This textArea can contain more than one line, please input your word.', - controller:this.controller + controller: this.controller }) .id(`textarea_001`) .placeholderColor(this.placeholderColor) - .placeholderFont({size: 16,weight:400}) + .placeholderFont({ size: 16, weight: 400 }) .textAlign(this.textAlign) .caretColor(this.caretColor) .copyOption(this.copyOptions) @@ -60,23 +65,71 @@ struct TextAreaSample { .margin(20) .fontSize(16) .enableKeyboardOnFocus(false) - .onChange(()=>{ + .onChange((value: string) => { ShowToast.shortToast('The input have changed.') + this.textAreaSet = value + this.maxSelect = value.length + for (let i = 0;i < this.maxSelect; i++) { + this.selects[i] = i.toString() + } }) - .onCopy(()=>{ + .onCopy(() => { ShowToast.shortToast('copy') }) - .onCut(()=>{ + .onCut(() => { ShowToast.shortToast('cut') }) - .onPaste(()=>{ + .onPaste(() => { ShowToast.shortToast('paste') }) }.cardStyle() - IntroductionTitle({introduction:$r('app.string.textarea_control')}) - Column(){ - textAreaControlPanel({placeholderColor:$placeholderColor,textAlign:$textAlign,caretColor:$caretColor,copyOption:$copyOptions}) + + IntroductionTitle({ introduction: $r('app.string.textarea_control') }) + Column() { + textAreaControlPanel({ + placeholderColor: $placeholderColor, + textAlign: $textAlign, + caretColor: $caretColor, + copyOption: $copyOptions + }) + }.cardStyle() + + IntroductionTitle({ introduction: $r('app.string.text_area_set_text_selection') }) + Column() { + Row() { + Text($r('app.string.text_input_set_text_selection_start_select')) + Column() { + TextPicker({ range: this.selects, selected: this.select }) + .onChange((value: string, index: number) => { + this.startSelect = parseInt(value) + Logger.info(`Picker item changed, value: ${value}, index: ${index}`) + }) + } + .height(90) + .width(100) + + Text($r('app.string.text_input_set_text_selection_end_select')) + Column() { + TextPicker({ range: this.selects, selected: this.select }) + .onChange((value: string, index: number) => { + this.endSelect = parseInt(value) + Logger.info(`Picker item changed, value: ${value}, index: ${index}`) + }) + } + .id('end_select') + .height(90) + .width(100) + + Button($r('app.string.text_area_set_text_selection')) + .id('button_to_select') + .onClick(() => { + this.controller.setTextSelection(this.startSelect, this.endSelect) + Logger.info(`startSelect: ${this.startSelect}, endSelect: ${this.endSelect}`) + }) + } + .justifyContent(FlexAlign.SpaceAround) + .width('100%') }.cardStyle() } .width('100%') diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textInputSample/TextInputSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textInputSample/TextInputSample.ets index d760a4670..3c241045d 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textInputSample/TextInputSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textInputSample/TextInputSample.ets @@ -16,6 +16,7 @@ import { CommonItemSelect } from '../../../../common/AttributeModificationTool'; import { IntroductionTitle } from '../../../../common/IntroductionTitle'; import ShowToast from '../../../../util/ShowToast'; +import Logger from '../../../../util/Logger'; import { TitleBar } from '../../../../common/TitleBar'; @Extend(Column) function backgroundStyle() { @@ -35,9 +36,16 @@ struct TextInputSample { @State inputType: InputType = InputType.Normal @State inputContent: string = '' @State typePlaceholder: Resource = $r('app.string.text_input_normal_type') + @State inputSelectContent: string = '' + @State startSelect: number = 0 + @State endSelect: number = 0 + @State maxSelect: number = 0 + @State selects: string[] = ['0'] + private select: number = 1 private maxLength: number = 12 private context: any = getContext(this) private inputController: TextInputController = new TextInputController() + private inputSelectController: TextInputController = new TextInputController() build() { Column() { @@ -189,6 +197,53 @@ struct TextInputSample { } }) } + IntroductionTitle({ introduction: $r('app.string.text_input_set_text_selection') }) + Column() { + TextInput({ controller: this.inputSelectController }) + .enableKeyboardOnFocus(false) + .id('test_input_to_select') + .onChange((value: string) => { + this.inputSelectContent = value + this.maxSelect = value.length + for (let i = 0;i < this.maxSelect; i++) { + this.selects[i] = i.toString() + } + }) + Row() { + Text($r('app.string.text_input_set_text_selection_start_select')) + Column() { + TextPicker({ range: this.selects, selected: this.select }) + .onChange((value: string, index: number) => { + this.startSelect = parseInt(value) + Logger.info(`Picker item changed, value: ${value}, index: ${index}`) + }) + } + .height(90) + .width(100) + + Text($r('app.string.text_input_set_text_selection_end_select')) + Column() { + TextPicker({ range: this.selects, selected: this.select }) + .onChange((value: string, index: number) => { + this.endSelect = parseInt(value) + Logger.info(`Picker item changed, value: ${value}, index: ${index}`) + }) + .id('end_select') + } + .height(90) + .width(100) + + Button($r('app.string.text_area_set_text_selection')) + .id('button_to_select') + .onClick(() => { + this.inputSelectController.setTextSelection(this.startSelect, this.endSelect) + Logger.info(`startSelect: ${this.startSelect}, endSelect: ${this.endSelect}`) + }) + } + .justifyContent(FlexAlign.SpaceAround) + .width('100%') + } + .backgroundStyle() .margin({ bottom: 70 }) } .constraintSize({ minHeight: '100%' }) // Let the minHeight of the component cover screen at least diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textSample/ChangePanel.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textSample/ChangePanel.ets index e3357dcf8..be6a76ccd 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textSample/ChangePanel.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textSample/ChangePanel.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import { CommonItemSlider, CommonItemSelect, CommonItemColorSelect } from '../../../../common/AttributeModificationTool'; +import { CommonItemSlider, CommonItemSelect, CommonItemColorSelect } from '../../../../common/AttributeModificationTool' @Component export struct ChangeTextCase { @@ -25,8 +25,8 @@ export struct ChangeTextCase { testId: 'select5', name: $r('app.string.text_text_case'), selects: [$r('app.string.text_text_case_normal'), - $r('app.string.text_text_case_uppercase'), - $r('app.string.text_text_case_lowercase')], + $r('app.string.text_text_case_uppercase'), + $r('app.string.text_text_case_lowercase')], callback: (index) => { switch (index) { case 1: @@ -75,8 +75,8 @@ export struct ChangeTextAttribute { testId: 'select1', name: $r('app.string.text_text_align_type'), selects: [$r('app.string.text_text_align_start'), - $r('app.string.text_text_align_center'), - $r('app.string.text_text_align_end')], + $r('app.string.text_text_align_center'), + $r('app.string.text_text_align_end')], callback: (index) => { switch (index) { case 1: @@ -95,8 +95,8 @@ export struct ChangeTextAttribute { testId: 'select2', name: $r('app.string.text_overflow'), selects: [$r('app.string.text_none'), - $r('app.string.text_text_over_flow_clip'), - $r('app.string.text_text_over_flow_ellipsis')], + $r('app.string.text_text_over_flow_clip'), + $r('app.string.text_text_over_flow_ellipsis')], callback: (index) => { switch (index) { case 1: @@ -119,9 +119,9 @@ export struct ChangeTextAttribute { testId: 'select3', name: $r('app.string.text_decoration_type'), selects: [$r('app.string.text_none'), - $r('app.string.text_decoration_type_line_through'), - $r('app.string.text_decoration_type_over_line'), - $r('app.string.text_decoration_type_under_line')], + $r('app.string.text_decoration_type_line_through'), + $r('app.string.text_decoration_type_over_line'), + $r('app.string.text_decoration_type_under_line')], callback: (index) => { switch (index) { case 1: diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textSample/TextSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textSample/TextSample.ets index 691092c1b..1869acdc9 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textSample/TextSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textSample/TextSample.ets @@ -13,8 +13,9 @@ * limitations under the License. */ -import { ChangeTextCase, ChangeTextAttribute } from './ChangePanel'; -import { TitleBar } from '../../../../common/TitleBar'; +import measure from '@ohos.measure' +import { ChangeTextCase, ChangeTextAttribute } from './ChangePanel' +import { TitleBar } from '../../../../common/TitleBar' @Extend(Column) function backgroundStyle() { .size({ width: '100%' }) @@ -31,12 +32,16 @@ struct TextSample { @State lineHeight: number = 23 @State textMaxLines: number = -1 @State letterSpacing: number = 2 - @State fontColor: Color = Color.Blue + @State fontColor: string = '#FF000000' @State textCase: TextCase = TextCase.Normal @State textAlign: TextAlign = TextAlign.Start @State textOverFlow: TextOverflow = TextOverflow.None @State styleForDecorative: TextDecorationType = TextDecorationType.None @State textContent: Resource = $r('app.string.text_content') + textSize : SizeOptions = measure.measureTextSize({ + textContent: $r('app.string.text_content'), + }) + build() { Column() { @@ -66,6 +71,33 @@ struct TextSample { textOverFlow: $textOverFlow, styleForDecorative: $styleForDecorative, }) + + Row(){ + Text($r('app.string.text_width')) + Blank() + Text(this.textSize.width.toString() + ' px') + .width(150) + .fontSize(20) + .textAlign(TextAlign.Center) + + } + .size({ width: '100%', height: 42 }) + .padding({ left: 0 , right: 0 }) + .borderRadius(0 ) + .backgroundColor( Color.Transparent) + + Row(){ + Text($r('app.string.text_height')) + Blank() + Text(this.textSize.height.toString() + ' px') + .width(150) + .fontSize(20) + .textAlign(TextAlign.Center) + } + .size({ width: '100%', height: 42 }) + .padding({ left: 0 , right: 0 }) + .borderRadius(0 ) + .backgroundColor( Color.Transparent) } .backgroundStyle() diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/actionSheetDialogSample/ActionSheetDialogSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/actionSheetDialogSample/ActionSheetDialogSample.ets index 6a99ad90f..e17abc4f1 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/actionSheetDialogSample/ActionSheetDialogSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/actionSheetDialogSample/ActionSheetDialogSample.ets @@ -24,6 +24,15 @@ import { TitleBar } from '../../../../common/TitleBar'; .justifyContent(FlexAlign.SpaceBetween) } +@Extend(Column) function columnStyle() { + .width('100%') + .borderRadius(24) + .margin({ top: 8, bottom: 8 }) + .justifyContent(FlexAlign.SpaceBetween) + .backgroundColor(Color.White) + .padding(15) +} + @Extend(Button) function buttonStyle() { .margin(8) .fontSize(16) @@ -34,6 +43,8 @@ import { TitleBar } from '../../../../common/TitleBar'; @Entry @Component struct ListDialogSample { + private mTextInputController: TextInputController = new TextInputController() + build() { Column() { TitleBar({ title: $r('app.string.action_sheet_dialog') }) @@ -384,7 +395,65 @@ struct ListDialogSample { .id('sheet_click_contentButton') } .rowStyle() + + IntroductionTitle({ introduction: $r('app.string.avoiding_input_method_testing') }) + Column() { + Row() { + TextInput({ + controller: this.mTextInputController, + placeholder: $r('app.string.avoiding_input_method_testing') + }) + .layoutWeight(1).height(50).id('test_input') + }.rowStyle() + + Row() { + Button($r('app.string.alert_dialog_bottom')) + .id('btn_test_input') + .buttonStyle() + .onClick(() => { + this.mTextInputController.setTextSelection(1, 2) + ActionSheet.show( + { + title: $r('app.string.alert_dialog_prompt'), + message: $r('app.string.alert_dialog_bottom'), + confirm: { + value: $r('app.string.alert_dialog_confirm'), + action: () => { + ShowToast.shortToast($r('app.string.alert_dialog_bottom')); + } + }, + sheets: [ + { + title: $r('app.string.text_picker_text_apple'), + action: () => { + ShowToast.shortToast($r('app.string.text_picker_text_apple')); + } + }, + { + title: $r('app.string.text_picker_text_banana'), + action: () => { + ShowToast.shortToast($r('app.string.text_picker_text_banana')); + } + }, + { + title: $r('app.string.text_picker_text_peach'), + action: () => { + ShowToast.shortToast($r('app.string.text_picker_text_peach')); + } + } + ], + cancel: () => { + ShowToast.shortToast($r('app.string.alert_dialog_cancel')); + }, + alignment: DialogAlignment.Bottom + } + ); + }) + .id('sheet_bottomButton') + }.rowStyle() + }.columnStyle().margin({ bottom: 80 }) } + .padding(12) .constraintSize({ minHeight: '100%' }) } } diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/alertDialogSample/AlertDialogSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/alertDialogSample/AlertDialogSample.ets index c767dd2fe..a656b2693 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/alertDialogSample/AlertDialogSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/alertDialogSample/AlertDialogSample.ets @@ -24,6 +24,15 @@ import { TitleBar } from '../../../../common/TitleBar' .justifyContent(FlexAlign.SpaceBetween) } +@Extend(Column) function columnStyle() { + .width('100%') + .borderRadius(24) + .margin({ top: 8, bottom: 8 }) + .justifyContent(FlexAlign.SpaceBetween) + .backgroundColor(Color.White) + .padding(15) +} + @Extend(Button) function buttonStyle() { .margin(8) .fontSize(16) @@ -36,6 +45,8 @@ import { TitleBar } from '../../../../common/TitleBar' @Entry @Component struct WarningDialogSample { + private mTextInputController: TextInputController = new TextInputController() + build() { Column() { TitleBar({ title: $r('app.string.alert_dialog') }) @@ -249,7 +260,7 @@ struct WarningDialogSample { cancel: () => { ShowToast.shortToast($r('app.string.alert_dialog_cancel')) }, - offset: { dx: 20, dy: 30 } + offset: { dx: 20, dy: 150 } } ) }).id('test_lowRightButton') @@ -323,7 +334,44 @@ struct WarningDialogSample { }).id('test_4GridButton') } .rowStyle() + + IntroductionTitle({ introduction: $r('app.string.avoiding_input_method_testing') }) + Column() { + Row() { + TextInput({ + controller: this.mTextInputController, + placeholder: $r('app.string.avoiding_input_method_testing') + }) + .layoutWeight(1).height(50).id('test_input') + }.rowStyle() + + Row() { + Button($r('app.string.alert_dialog_bottom')) + .buttonStyle() + .onClick(() => { + this.mTextInputController.setTextSelection(1, 2) + AlertDialog.show( + { + title: $r('app.string.alert_dialog_prompt'), + message: $r('app.string.alert_dialog_bottom'), + confirm: { + value: $r('app.string.alert_dialog_confirm'), + backgroundColor: $r('app.color.background_grey'), + action: () => { + ShowToast.shortToast($r('app.string.alert_dialog_bottom')) + } + }, + cancel: () => { + ShowToast.shortToast($r('app.string.alert_dialog_cancel')) + }, + alignment: DialogAlignment.Bottom + } + ) + }).id('test_bottomButton') + }.rowStyle() + }.columnStyle().margin({ bottom: 80 }) } + .padding(12) .constraintSize({ minHeight: '100%' }) } } diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/UniversialData.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/UniversialData.ets index 794171615..e66c9d1cd 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/UniversialData.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/UniversialData.ets @@ -17,6 +17,11 @@ import { SecondLevelCategory, ThirdLevelCategory } from '../../model/Categorical const GRAPHIC_TRANSFORMATION: ThirdLevelCategory[] = [ + { + image: $r('app.media.ic_prop_background'), + title: $r('app.string.safe_area'), + url: 'pages/universal/properties/safeAreaSample/SafeAreaSample' + }, { image: $r('app.media.ic_prop_background'), title: $r('app.string.prop_foreground'), @@ -257,7 +262,7 @@ export let visibileTypes: { value: Resource }[] = export let placementsNameData = ['TopLeft', 'Top', 'TopRight', 'RightTop', 'Right', 'RightBottom', 'LeftTop', 'Left', 'LeftBottom', 'BottomLeft', 'Bottom', 'BottomRight'] export let hitTestModeNameData = ['Default', 'Block', 'Transparent', 'None'] export let hoverEffectNameData = ['None', 'Highlight', 'Auto', 'Scale'] - +export let pointerStyleNameData = ['DEFAULT', 'EAST', 'WEST', 'SOUTH','NORTH','WEST_EAST','NORTH_SOUTH','NORTH_EAST','NORTH_WEST','SOUTH_EAST','SOUTH_WEST','NORTH_EAST_SOUTH_WEST','NORTH_WEST_SOUTH_EAST','CROSS','CURSOR_COPY','CURSOR_FORBID','COLOR_SUCKER','HAND_GRABBING','HAND_OPEN','HAND_POINTING','HELP','MOVE','RESIZE_LEFT_RIGHT','RESIZE_UP_DOWN','SCREENSHOT_CHOOSE','SCREENSHOT_CURSOR','TEXT_CURSOR','ZOOM_IN','ZOOM_OUT','MIDDLE_BTN_EAST','MIDDLE_BTN_WEST','MIDDLE_BTN_SOUTH','MIDDLE_BTN_NORTH','MIDDLE_BTN_NORTH_SOUTH','MIDDLE_BTN_NORTH_EAST','MIDDLE_BTN_NORTH_WEST','MIDDLE_BTN_SOUTH_EAST','MIDDLE_BTN_SOUTH_WEST','MIDDLE_BTN_NORTH_SOUTH_WEST_EAST'] export let selectImageSizeData: Resource[] = [$r('app.string.background_image_size_cover'), $r('app.string.background_image_size_contain')] diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/gridSettingsSample/GridSettingsSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/gridSettingsSample/GridSettingsSample.ets index 3cfe7f11e..35beaf563 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/gridSettingsSample/GridSettingsSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/gridSettingsSample/GridSettingsSample.ets @@ -15,6 +15,7 @@ import { IntroductionTitle } from '../../../../common/IntroductionTitle'; import { TitleBar } from '../../../../common/TitleBar'; +import Logger from '../../../../util/Logger'; @Extend(Row) function rowStyle() { .borderRadius(24) @@ -22,99 +23,142 @@ import { TitleBar } from '../../../../common/TitleBar'; .backgroundColor(Color.White) .margin({ left: 12, right: 12 }) } +@Extend(Column) function columnStyle() { + .borderRadius(24) + .width('100%') + .backgroundColor(Color.White) + .margin({ left: 12, right: 12 }) +} @Entry @Component struct GridSettingsSample { + @State Number: String[] = ['0', '1', '2', '3'] + build() { Column() { TitleBar({ title: $r('app.string.grid_settings') }) - IntroductionTitle({ introduction: $r('app.string.grid_settings_useSize') }) - Column() { - GridContainer() { - Row() { - Row() { - Text($r('app.string.mouse_event_mouseBtn_left')) - .fontSize(16) - } - .useSizeType({ - xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 }, - md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 } - }) - .height('100%') - .backgroundColor(0x66bbb2cb) + Scroll() { + Column() { + IntroductionTitle({ introduction: $r('app.string.grid_settings_useSize') }) + Column() { + GridContainer() { + Row() { + Row() { + Text($r('app.string.mouse_event_mouseBtn_left')) + .fontSize(16) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 }, + md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 } + }) + .height('100%') + .backgroundColor(0x66bbb2cb) - Row() { - Text($r('app.string.location_settings_center')) - .fontSize(16) - } - .useSizeType({ - xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 }, - md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 } - }) - .height('100%') - .backgroundColor(0x66b6c5d1) + Row() { + Text($r('app.string.location_settings_center')) + .fontSize(16) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 }, + md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 } + }) + .height('100%') + .backgroundColor(0x66b6c5d1) - Row() { - Text($r('app.string.mouse_event_mouseBtn_right')) - .fontSize(16) + Row() { + Text($r('app.string.mouse_event_mouseBtn_right')) + .fontSize(16) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 }, + md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 } + }) + .height('100%') + .backgroundColor(0x66bbb2cb) + } + .height(180) + .rowStyle() } - .useSizeType({ - xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 }, - md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 } - }) - .height('100%') - .backgroundColor(0x66bbb2cb) + .height(200) } - .height(180) - .rowStyle() - } - .height(200) - } - .width('100%') + .width('100%') - IntroductionTitle({ introduction: $r('app.string.grid_settings_gridSpan') }) - Column() { - GridContainer() { - Row() { - Row() { - Text($r('app.string.mouse_event_mouseBtn_left')) - .fontSize(16) - } - .gridSpan(1) - .height('100%') - .backgroundColor(0x66bbb2cb) + IntroductionTitle({ introduction: $r('app.string.grid_settings_gridSpan') }) + Column() { + GridContainer() { + Row() { + Row() { + Text($r('app.string.mouse_event_mouseBtn_left')) + .fontSize(16) + } + .gridSpan(1) + .height('100%') + .backgroundColor(0x66bbb2cb) - Row() { - Text($r('app.string.location_settings_center')) - .fontSize(16) - } - .useSizeType({ - xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 }, - md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 } - }) - .height('100%') - .gridSpan(2) - .gridOffset(1) - .backgroundColor(0x66b6c5d1) + Row() { + Text($r('app.string.location_settings_center')) + .fontSize(16) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 }, + md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 } + }) + .height('100%') + .gridSpan(2) + .gridOffset(1) + .backgroundColor(0x66b6c5d1) - Row() { - Text($r('app.string.mouse_event_mouseBtn_right')) - .fontSize(16) + Row() { + Text($r('app.string.mouse_event_mouseBtn_right')) + .fontSize(16) + } + .gridSpan(1) + .gridOffset(3) + .height('100%') + .backgroundColor(0x66bbb2cb) + } + .height(180) + .rowStyle() } - .gridSpan(1) - .gridOffset(3) - .height('100%') - .backgroundColor(0x66bbb2cb) + .height(200) } - .height(180) - .rowStyle() + .width('100%') + + IntroductionTitle({ introduction: $r('app.string.grid_edgeEffect_spring') }) + Column() { + Grid() { + ForEach(this.Number, (day: string) => { + ForEach(this.Number, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0x66bbb2cb) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, day => day) + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .edgeEffect(EdgeEffect.Spring) + .onScrollIndex((first: number) => { + Logger.info(first.toString()) + }) + .width('90%') + .backgroundColor(0x66b6c5d1) + .height(300) + .scrollBar(BarState.On) + } + .columnStyle() } - .height(200) + .constraintSize({ minHeight: '100%' }) + .padding(12) } - .width('100%') } - .height('100%') .width('100%') .backgroundColor($r('app.color.background_shallow_grey')) } diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/interactionSample/InteractionSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/interactionSample/InteractionSample.ets index 2d89bd995..1d1431d98 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/interactionSample/InteractionSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/interactionSample/InteractionSample.ets @@ -13,11 +13,15 @@ * limitations under the License. */ -import { TitleBar } from '../../../../common/TitleBar' +import pointer from '@ohos.multimodalInput.pointer' import promptAction from '@ohos.prompt' import prompt from '@ohos.prompt' +import window from '@ohos.window' +import { TitleBar } from '../../../../common/TitleBar' import { getStringData } from '../../../../data//ResourceDataHandle' -import { placementsNameData, hitTestModeNameData, hoverEffectNameData } from '../../UniversialData' +import { placementsNameData, hitTestModeNameData, hoverEffectNameData, pointerStyleNameData } from '../../UniversialData' +import Logger from '../../../../util/Logger' +import measure from '@ohos.measure' @Extend(Text) function leftTitleStyle() { .fontColor($r('app.color.sub_title_color')) @@ -50,6 +54,7 @@ import { placementsNameData, hitTestModeNameData, hoverEffectNameData } from '.. @Entry @Component struct Interaction { + @State isMask: boolean = false @State buttonIsDisabled: boolean = false @State listIsDisabled: boolean = false @State alertText: string = '' @@ -65,27 +70,32 @@ struct Interaction { @State mComponentDisabled: boolean = false @State mComponentFocused: boolean = false @State mTabIndex: number = 0 - @State mHoverEffect: HoverEffect = HoverEffect.None; + @State mHoverEffect: HoverEffect = HoverEffect.None + @State mPointerStyle: pointer.PointerStyle = pointer.PointerStyle.DEFAULT private mTouchableTestResult: string = '' private mToastTimer = null private mMenuLists = [ { value: getStringData($r('app.string.components_interaction_menuone')), + icon: $r('app.media.ic_other'), action: () => { } }, { value: getStringData($r('app.string.components_interaction_menutwo')), + icon: $r('app.media.ic_other'), action: () => { } }, { value: getStringData($r('app.string.components_interaction_menuthree')), + icon: $r('app.media.ic_other'), action: () => { } }, { value: getStringData($r('app.string.components_interaction_menufour')), + icon: $r('app.media.ic_other'), action: () => { } } @@ -126,27 +136,46 @@ struct Interaction { Row({ space: 20 }) { Image($r("app.media.icon")).width(24).height(24) Text('Content').fontSize(20).fontColor(Color.White) - }.width(200).height(80).padding(10) + }.width(140).height(40).padding(10) } + @Builder menuBuilder() { + Menu() { + MenuItem({ startIcon: $r('app.media.ic_other'), content: $r('app.string.components_interaction_menuone') }) + MenuItemGroup({ header: $r('app.string.components_interaction_menutwo') }) { + MenuItem({ + startIcon: $r('app.media.ic_other'), + content: $r('app.string.components_interaction_menuthree') + }) + MenuItem({ + startIcon: $r('app.media.ic_other'), + content: $r('app.string.components_interaction_menufour') + }) + } + } + } + private context: any = getContext(this) private placementsNameArray = placementsNameData private hitTestModeNameArray = hitTestModeNameData private hoverEffectNameArray = hoverEffectNameData + private pointerStyleNameArray = pointerStyleNameData @Builder tabbarTitle(name: string | Resource, index: number) { - Stack() { + Column() { Text(name) .fontSize(22) .fontColor(this.mTabIndex === index ? $r('app.color.title_colorone') : $r('app.color.title_colortwo')) + .margin({ bottom: 5 }) if (this.mTabIndex === index) { Row() + .width(measure.measureTextSize({textContent:name}).width) .backgroundColor($r('app.color.title_colorone')) - .width('100%') .height(2) - .position({ y: 48 }) } - }.width(48) + } + .margin(8) + .constraintSize({ minWidth: 32 }) .height(56) } @@ -283,6 +312,13 @@ struct Interaction { .onChange((value) => { this.mPlacementOnTop = value }) + Text($r('app.string.interaction_mask')) + .fontSize(15) + Checkbox() + .select(this.isMask) + .onChange((value) => { + this.isMask = value + }) }.alignSelf(ItemAlign.Start) Text($r('app.string.interaction_arrowoffset')) @@ -319,7 +355,8 @@ struct Interaction { action: () => { this.handlePopup = false } - } + }, + mask: this.isMask }).id('test_popButton') }.cardStyle() @@ -343,6 +380,7 @@ struct Interaction { }.width('100%') Button($r('app.string.interaction_showcustompopup')) + .margin({ bottom: 30 }) .onClick(() => { this.handleCustomPopup = true; }) @@ -524,27 +562,93 @@ struct Interaction { TabContent() { Column() { - Blank() - Row() { - Blank() - ForEach([1, 2, 3, 4, 5], (item) => { + Scroll() { + Column() { + Text($r('app.string.bind_menu_customBuilder')) + .leftTitleStyle() Column() { - Image($r('app.media.ic_other')) - .width(30) - .height(30) - Text($r('app.string.option')) - .fontSize(15) - } - .bindMenu(this.mMenuLists) + Text($r('app.string.click_on_any_action_below')) + .leftTitleStyle() + Row() { + Blank() + ForEach([1, 2, 3, 4, 5], (item) => { + Column() { + Image($r('app.media.ic_other')) + .width(30) + .height(30) + Text($r('app.string.option')) + .fontSize(15) + } + .id('menuBuilder' + item) + .bindMenu(this.menuBuilder) - Blank() - }) - }.width('100%') + Blank() + }) + }.width('100%') + + Blank() + }.cardStyle().height(250) + + Text($r('app.string.bind_menu_content')) + .leftTitleStyle() + Column() { + Text($r('app.string.click_on_any_action_below')) + .leftTitleStyle() + Row() { + Blank() + ForEach([1, 2, 3, 4, 5], (item) => { + Column() { + Image($r('app.media.ic_other')) + .width(30) + .height(30) + Text($r('app.string.option')) + .fontSize(15) + } + .id('mMenuLists' + item) + .bindMenu(this.mMenuLists) + + Blank() + }) + }.width('100%') + + Blank() + }.cardStyle().height(250) + + Text($r('app.string.bind_content_menu')) + .leftTitleStyle() + Column() { + Text($r('app.string.long_press_any_action_below')) + .leftTitleStyle() + Row() { + Blank() + ForEach([1, 2, 3, 4, 5], (item) => { + Column() { + Image($r('app.media.ic_other')) + .width(30) + .height(30) + Text($r('app.string.option')) + .fontSize(15) + } + .id('contextMenu' + item) + .bindContextMenu( + this.menuBuilder, + ResponseType.LongPress, + { + offset: { x: 0, y: 0 } + } + ) + Blank() + }) + }.width('100%') + + Blank() + }.cardStyle().height(250).margin({ bottom: 70 }) + } + } }.height('100%') .width('100%') .padding(20) }.tabBar(this.tabbarTitle($r('app.string.menu'), 5)) - .height('100%') TabContent() { Column() { @@ -584,10 +688,77 @@ struct Interaction { }.width('100%') .padding(12) }.tabBar(this.tabbarTitle($r('app.string.multiState'), 6)) - }.layoutWeight(1) + + TabContent() { + Scroll() { + Column() { + Text($r('app.string.multi_short_key')) + .leftTitleStyle() + Column() { + Text($r('app.string.on_short_key')) + .leftTitleStyle() + Button($r('app.string.multi_short_key')) + .onClick(() => { + prompt.showToast({ + message: getStringData($r('app.string.short_key_pressed')), + duration: 1000, + }); + }) + .keyboardShortcut('a', [ModifierKey.CTRL]) + }.cardStyle() + + Text($r('app.string.set_mouse_style')) + .leftTitleStyle() + Column() { + Flex({ wrap: FlexWrap.Wrap }) { + ForEach(this.pointerStyleNameArray, (item: string) => { + Row() { + Radio({ value: item, group: 'pointerStyle' }) + .id(item) + .checked(this.mPointerStyle === pointer.PointerStyle[item]) + .onChange((isChecked: boolean) => { + if (isChecked) { + this.mPointerStyle = pointer.PointerStyle[item]; + try { + let promise = window.getLastWindow(this.context); + promise.then((win)=> { + let windowId = win.getWindowProperties().id; + Logger.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(win)); + if (windowId < 0) { + Logger.info(`Invalid windowId`); + return; + } + try { + pointer.setPointerStyle(windowId, this.mPointerStyle, error => { + Logger.info(`Set pointer style success`); + }); + } catch (error) { + Logger.info(`Set pointer style failed, error: ${JSON.stringify(error, [`code`, `message`])}`); + } + }).catch((err)=>{ + Logger.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err)); + }); + } catch (exception) { + Logger.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception)); + } + } + }) + Text(item) + .fontSize(10) + }.width('50%') + }) + }.width('100%') + }.cardStyle() + }.width('100%') + .padding(12) + } + }.tabBar(this.tabbarTitle($r('app.string.multimode_input'), 7)) + } + .barOverlap(true) .onChange((index) => { this.mTabIndex = index }) + .barOverlap(true) .barMode(BarMode.Scrollable) } .height('100%') diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/restoreIdSample/RestoreIdSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/restoreIdSample/RestoreIdSample.ets index 71a9b67bf..f93236ff6 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/restoreIdSample/RestoreIdSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/restoreIdSample/RestoreIdSample.ets @@ -13,8 +13,10 @@ * limitations under the License. */ +import { IntroductionTitle } from '../../../../common/IntroductionTitle'; import { TitleBar } from '../../../../common/TitleBar'; import { getStringData } from '../../../../data/ResourceDataHandle'; +import Logger from '../../../../util/Logger'; @Extend(Button) function buttonStyle() { .margin(8) @@ -23,9 +25,22 @@ import { getStringData } from '../../../../data/ResourceDataHandle'; .margin({ left: 24, right: 24, top: 12 }) } +@Extend(Column) function cardStyle() { + .backgroundColor(Color.White) + .borderRadius(24) + .width('100%') + .padding(15) + .margin({ left: 12, right: 12, bottom: 12 }) +} + @Entry @Component struct RestoreIdExample { + @State outSetValueTwo: number = 40 + @State fontColor: string = '#182431' + @State selectedFontColor: string = '#007DFF' + @State currentIndex: number = 0 + private controller: TabsController = new TabsController() private apple: string = getStringData($r('app.string.text_picker_text_apple')); private orange: string = getStringData($r('app.string.text_picker_text_orange')); private peach: string = getStringData($r('app.string.text_picker_text_peach')); @@ -33,20 +48,160 @@ struct RestoreIdExample { private banana: string = getStringData($r('app.string.text_picker_text_banana')); private fruits: string[] = [this.apple, this.orange, this.peach, this.grape, this.banana]; + @Builder TabBuilder(index: number, name: string) { + Column() { + Text(name) + .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) + .fontSize(16) + .fontWeight(this.currentIndex === index ? 500 : 400) + .lineHeight(22) + .margin({ top: 17, bottom: 7 }) + Divider() + .strokeWidth(2) + .color('#007DFF') + .opacity(this.currentIndex === index ? 1 : 0) + }.width('100%') + } + build() { + Column() { TitleBar({ title: $r('app.string.restore_id') }) - List({ space: 8 }) { - ForEach(this.fruits, (item) => { - ListItem() { - Button(item) - .buttonStyle() - } - }, item => item) + Scroll() { + Column() { + IntroductionTitle({ introduction: $r('app.string.list') }) + Column() { + List({ space: 8 }) { + ForEach(this.fruits, (item) => { + ListItem() { + Button(item) + .buttonStyle() + } + }, item => item) + } + .alignListItem(ListItemAlign.Center) + .width('100%') + .restoreId(1) + }.cardStyle() + + IntroductionTitle({ introduction: $r('app.string.checkbox') }) + Column() { + Checkbox() + .select(true) + .selectedColor(0xed6f21) + .restoreId(2) + }.cardStyle() + + IntroductionTitle({ introduction: $r('app.string.radio_title') }) + Column() { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .checked(true) + .restoreId(3) + }.cardStyle() + + IntroductionTitle({ introduction: $r('app.string.toggle_title') }) + Column() { + Toggle({ type: ToggleType.Switch, isOn: false }) + .selectedColor('#007DFF') + .switchPointColor('#FFFFFF') + .restoreId(4) + }.cardStyle() + + IntroductionTitle({ introduction: $r('app.string.swiper_name') }) + Column() { + Swiper() { + ForEach(['1', '2', '3'], (item: string) => { + Text(item) + .width('90%') + .height(160) + .backgroundColor(0xAFEEEE) + .textAlign(TextAlign.Center) + .fontSize(30) + }, item => item) + } + .cachedCount(2) + .index(1) + .autoPlay(true) + .interval(4000) + .indicator(true) + .loop(true) + .duration(1000) + .itemSpace(0) + .curve(Curve.Linear) + .restoreId(5) + }.cardStyle() + + IntroductionTitle({ introduction: $r('app.string.tabs_name') }) + Column() { + Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + }.tabBar(this.TabBuilder(0, 'green')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#007DFF') + }.tabBar(this.TabBuilder(1, 'blue')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#FFBF00') + }.tabBar(this.TabBuilder(2, 'yellow')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#E67C92') + }.tabBar(this.TabBuilder(3, 'pink')) + } + .vertical(false) + .barMode(BarMode.Fixed) + .barWidth(360) + .barHeight(56) + .animationDuration(400) + .onChange((index: number) => { + this.currentIndex = index + }) + .width(360) + .height(296) + .margin({ top: 52 }) + .backgroundColor('#F1F3F5') + .restoreId(6) + }.cardStyle() + + IntroductionTitle({ introduction: $r('app.string.tabs_name') }) + Column() { + Slider({ + value: this.outSetValueTwo, + step: 10, + style: SliderStyle.OutSet + }) + .showSteps(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.outSetValueTwo = value + Logger.info('value:' + value + 'mode:' + mode.toString()) + }) + .restoreId(7) + Text(this.outSetValueTwo.toFixed(0)).fontSize(12) + }.cardStyle() + + IntroductionTitle({ introduction: $r('app.string.select_name') }) + Column() { + Select([{ value: 'aaa', icon: $r('app.media.ic_select_global') }, + { value: 'bbb', icon: $r('app.media.ic_select_global') }, + { value: 'ccc', icon: $r('app.media.ic_select_global') }, + { value: 'ddd', icon: $r('app.media.ic_select_global') }]) + .selected(2) + .value('TTTTT') + .font({ size: 16, weight: 500 }) + .fontColor('#182431') + .selectedOptionFont({ size: 16, weight: 400 }) + .optionFont({ size: 16, weight: 400 }) + .onSelect((index: number) => { + Logger.info('Select:' + index) + }) + .restoreId(8) + }.cardStyle().margin({ bottom: 80 }) + } + .padding(12) + .constraintSize({ minHeight: '100%' }) } - .alignListItem(ListItemAlign.Center) - .width('100%') - .restoreId(1) } .height('100%') .width('100%') diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/safeAreaSample/ChangePanel.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/safeAreaSample/ChangePanel.ets new file mode 100755 index 000000000..71898c4d4 --- /dev/null +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/safeAreaSample/ChangePanel.ets @@ -0,0 +1,166 @@ +/* + * Copyright (c) 2022-2023 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 { getStringData } from '../../../../data//ResourceDataHandle' +import Logger from '../../../../util/Logger' + +@Component +export struct ChangePanel { + @Link mSafeAreaType: SafeAreaType[] + @Link mSafeAreaEdge: SafeAreaEdge[] + + build() { + Row() { + Column() { + Row() { + CheckboxGroup({ group: getStringData($r('app.string.safe_area_type')) }) + .selectedColor(0xed6f21) + .onChange((itemName: CheckboxGroupResult) => { + this.mSafeAreaType = [] + for (let i = 0;i < itemName.name.length; i++) { + if (itemName.name[i] == getStringData($r('app.string.safe_area_type_system'))) { + this.mSafeAreaType.push(SafeAreaType.SYSTEM) + } + else if (itemName.name[i] == getStringData($r('app.string.safe_area_type_cutout'))) { + this.mSafeAreaType.push(SafeAreaType.CUTOUT) + } + else if (itemName.name[i] == getStringData($r('app.string.safe_area_type_keyboard'))) { + this.mSafeAreaType.push(SafeAreaType.KEYBOARD) + } + } + + Logger.info(`checkbox group content ${JSON.stringify(this.mSafeAreaType)}`) + }).id('test_selectAll') + Text($r('app.string.checkbox_select_all')).fontSize(20) + }.width('100%') + + Row() { + Checkbox({ + name: getStringData($r('app.string.safe_area_type_system')), + group: getStringData($r('app.string.safe_area_type')) + }) + .id('SYSTEM') + .selectedColor($r('app.color.select_option_font_color')) + .onChange((value: boolean) => { + Logger.info(`Checkbox1 change is ${value}`) + }).margin({ left: 30 }) + Text($r('app.string.safe_area_type_system')).fontSize(20) + }.width('100%') + + Row() { + Checkbox({ + name: getStringData($r('app.string.safe_area_type_cutout')), + group: getStringData($r('app.string.safe_area_type')) + }) + .select(true) + .selectedColor($r('app.color.select_option_font_color')) + .onChange((value: boolean) => { + Logger.info(`Checkbox2 change is ${value}`) + }).margin({ left: 30 }) + Text($r('app.string.safe_area_type_cutout')).fontSize(20) + }.width('100%') + + Row() { + Checkbox({ + name: getStringData($r('app.string.safe_area_type_keyboard')), + group: getStringData($r('app.string.safe_area_type')) + }) + .selectedColor($r('app.color.select_option_font_color')) + .onChange((value: boolean) => { + Logger.info(`Checkbox3 change is ${value}`) + }).margin({ left: 30 }) + Text($r('app.string.safe_area_type_keyboard')).fontSize(20) + }.width('100%') + } + .layoutWeight(1) + + Column() { + Row() { + CheckboxGroup({ group: getStringData($r('app.string.safe_area_edge')) }) + .selectedColor(0xed6f21) + .onChange((itemName: CheckboxGroupResult) => { + this.mSafeAreaEdge = [] + for (let i = 0;i < itemName.name.length; i++) { + if (itemName.name[i] == getStringData($r('app.string.safe_area_edge_bottom'))) { + this.mSafeAreaEdge.push(SafeAreaEdge.BOTTOM) + } + else if (itemName.name[i] == getStringData($r('app.string.safe_area_edge_top'))) { + this.mSafeAreaEdge.push(SafeAreaEdge.TOP) + } + else if (itemName.name[i] == getStringData($r('app.string.safe_area_edge_start'))) { + this.mSafeAreaEdge.push(SafeAreaEdge.START) + } + else if (itemName.name[i] == getStringData($r('app.string.safe_area_edge_end'))) { + this.mSafeAreaEdge.push(SafeAreaEdge.END) + } + } + Logger.info(`checkbox group content ${JSON.stringify(itemName)}`) + }).id('test_selectAll') + Text($r('app.string.checkbox_select_all')).fontSize(20) + }.width('100%') + + Row() { + Checkbox({ + name: getStringData($r('app.string.safe_area_edge_top')), + group: getStringData($r('app.string.safe_area_edge')) + }) + .select(true) + .selectedColor($r('app.color.select_option_font_color')) + .onChange((value: boolean) => { + Logger.info(`Checkbox1 change is ${value}`) + }).margin({ left: 30 }) + Text($r('app.string.safe_area_edge_top')).fontSize(20) + }.width('100%') + + Row() { + Checkbox({ + name: getStringData($r('app.string.safe_area_edge_bottom')), + group: getStringData($r('app.string.safe_area_edge')) + }) + .select(true) + .selectedColor($r('app.color.select_option_font_color')) + .onChange((value: boolean) => { + Logger.info(`Checkbox2 change is ${value}`) + }).margin({ left: 30 }) + Text($r('app.string.safe_area_edge_bottom')).fontSize(20) + }.width('100%') + + Row() { + Checkbox({ + name: getStringData($r('app.string.safe_area_edge_start')), + group: getStringData($r('app.string.safe_area_edge')) + }) + .selectedColor($r('app.color.select_option_font_color')) + .onChange((value: boolean) => { + Logger.info(`Checkbox3 change is ${value}`) + }).margin({ left: 30 }) + Text($r('app.string.safe_area_edge_start')).fontSize(20) + }.width('100%') + + Row() { + Checkbox({ + name: getStringData($r('app.string.safe_area_edge_end')), + group: getStringData($r('app.string.safe_area_edge')) + }) + .selectedColor($r('app.color.select_option_font_color')) + .onChange((value: boolean) => { + Logger.info(`Checkbox3 change is ${value}`) + }).margin({ left: 30 }) + Text($r('app.string.safe_area_edge_end')).fontSize(20) + }.width('100%') + } + .layoutWeight(1) + } + } +} \ No newline at end of file diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/safeAreaSample/SafeAreaSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/safeAreaSample/SafeAreaSample.ets new file mode 100755 index 000000000..77336e0a0 --- /dev/null +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/safeAreaSample/SafeAreaSample.ets @@ -0,0 +1,67 @@ +/* + * Copyright (c) 2023 Hunan OpenValley Digital Industry Development 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 { ChangePanel } from './ChangePanel' +import { IntroductionTitle } from '../../../../common/IntroductionTitle' +import { TitleBar } from '../../../../common/TitleBar' + +@Extend(Column) function columnStyle() { + .width('100%') + .padding(16) + .borderRadius(24) + .backgroundColor(Color.White) +} + +@Entry +@Component +struct SafeAreaSample { + @State mSafeAreaType: SafeAreaType[] = [SafeAreaType.CUTOUT] + @State mSafeAreaEdge: SafeAreaEdge[] = [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM] + + build() { + Column() { + TitleBar({ title: $r('app.string.safe_area') }) + .backgroundColor($r('app.color.background_shallow_grey')) + Stack() { + Row() { + TextInput({ placeholder: $r('app.string.save_area_input_text') }) + .placeholderFont({ size: 14, weight: 400 }) + .width(320) + .height(40) + .offset({ y: 120 }) + .fontSize(14) + .fontColor(Color.Black) + .backgroundColor(Color.White) + .enableKeyboardOnFocus(false) + }.height('100%').alignItems(VerticalAlign.Top) + + Column() { + Column() { + IntroductionTitle({ introduction: $r('app.string.safe_area_type_and_safe_area_edge') }) + ChangePanel({ + mSafeAreaType: $mSafeAreaType, + mSafeAreaEdge: $mSafeAreaEdge + }) + }.columnStyle().alignItems(HorizontalAlign.Center) + }.padding(12).width('100%') + } + } + .width('100%') + .height('100%') + .backgroundImage($r('app.media.img_test_1')) + .backgroundImageSize(ImageSize.Cover) + .expandSafeArea(this.mSafeAreaType, this.mSafeAreaEdge) + } +} \ No newline at end of file diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/sizeSample/SizeSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/sizeSample/SizeSample.ets index f7c698366..bc7f32e31 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/sizeSample/SizeSample.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/sizeSample/SizeSample.ets @@ -16,11 +16,12 @@ import { IntroductionTitle } from '../../../../common/IntroductionTitle' import { TitleBar } from '../../../../common/TitleBar' -@Extend(Row) function rowStyle () { +@Extend(Row) function rowStyle() { + .width('100%') .padding(12) .borderRadius(24) .backgroundColor(Color.White) - .margin({ left: 12, right: 12 }) + .margin({ bottom: 12 }) .justifyContent(FlexAlign.SpaceBetween) } @@ -45,6 +46,18 @@ struct Size { .justifyContent(FlexAlign.Center) .backgroundColor($r('app.color.background_green')) + Row() { + Text($r('app.string.size_width_fixed_60vw')) + .fontSize(18) + .fontColor(Color.White) + } + .width('60vw') + .height(100) + .margin({ left: 20 }) + .borderRadius(5) + .justifyContent(FlexAlign.Center) + .backgroundColor($r('app.color.background_green')) + Row() { Text($r('app.string.size_width_percent')) .fontSize(18) @@ -75,6 +88,17 @@ struct Size { .justifyContent(FlexAlign.Center) .backgroundColor($r('app.color.background_blue')) + Row() { + Text($r('app.string.size_height_fixed_60vh')) + .fontSize(18) + .fontColor(Color.White) + } + .height('60vh') + .borderRadius(5) + .margin({ left: 20 }) + .justifyContent(FlexAlign.Center) + .backgroundColor($r('app.color.background_blue')) + Row() { Text($r('app.string.size_height_percent')) .fontSize(18) @@ -92,7 +116,21 @@ struct Size { .backgroundColor($r('app.color.background_blue')) } .rowStyle() + + Row() { + Row() { + Text($r('app.string.size_height_fixed_calc')) + .fontSize(18) + .fontColor(Color.White) + } + .height('calc(200vp - 100vp)') + .borderRadius(5) + .justifyContent(FlexAlign.Center) + .backgroundColor($r('app.color.background_blue')) + } + .rowStyle() } + .margin({ left: 12, right: 12 }) .constraintSize({ minHeight: '100%' }) } } diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/element/string.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/element/string.json index 1540af622..586de82f0 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/element/string.json +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/element/string.json @@ -36,6 +36,7 @@ "name": "prop_background", "value": "Background" }, + { "name": "prop_foreground", "value": "Foreground" @@ -981,6 +982,15 @@ "name": "qrcode_enter_content", "value": "Enter to change QR code" }, + // Search + { + "name": "search_placeholder", + "value": "Type to search..." + }, + { + "name": "search_name", + "value": "search" + }, // Radio { "name": "radio_title", @@ -1035,6 +1045,55 @@ "name": "rotate_image_angle", "value": "Rotate 15°" }, + // SaveArea + { + "name": "safe_area_type_and_safe_area_edge", + "value": "SafeAreaType And SafeAreaEdge" + }, + { + "name": "safe_area", + "value": "SafeArea" + }, + { + "name": "save_area_input_text", + "value": "input your word ..." + }, + { + "name": "safe_area_type", + "value": "SafeAreaType" + }, + { + "name": "safe_area_edge", + "value": "SafeAreaEdge" + }, + { + "name": "safe_area_edge_top", + "value": "TOP" + }, + { + "name": "safe_area_edge_bottom", + "value": "BOTTOM" + }, + { + "name": "safe_area_edge_start", + "value": "START" + }, + { + "name": "safe_area_edge_end", + "value": "END" + }, + { + "name": "safe_area_type_system", + "value": "SYSTEM" + }, + { + "name": "safe_area_type_cutout", + "value": "CUTOUT" + }, + { + "name": "safe_area_type_keyboard", + "value": "KEYBOARD" + }, // Select { "name": "select_title", @@ -1134,10 +1193,18 @@ "name": "size_width_percent", "value": "width is 60%" }, + { + "name": "size_width_fixed_60vw", + "value": "Width is 60vw" + }, { "name": "size_height", "value": "Height" }, + { + "name": "size_height_fixed_60vh", + "value": "Width is 60vh" + }, { "name": "size_height_fixed_100vp", "value": "Height is 100vp" @@ -1146,6 +1213,10 @@ "name": "size_height_percent", "value": "Height is 60%" }, + { + "name": "size_height_fixed_calc", + "value": "Height is calc(200vp-100vp)" + }, // Slider { "name": "slider_title", @@ -1248,6 +1319,10 @@ "name": "span_letter_spacing", "value": "LetterSpacing" }, + { + "name": "span_line_height", + "value": "LineHeight" + }, { "name": "span_decoration_type", "value": "Decoration type" @@ -1260,6 +1335,14 @@ "name": "span_text_spacing", "value": " LetterSpacing test text" }, + { + "name": "span_inherits_text_attribute", + "value": " Span inherits text attribute" + }, + { + "name": "span_does_not_inherit_text_attribute", + "value": " Span does not inherits text attribute" + }, { "name": "span_upper_lower", "value": "Upper or lower case" @@ -1358,6 +1441,14 @@ "name": "text_content_en", "value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. It is also in this way that our generation has been tempered in struggles and terrible trials, learning not to succumb to life." }, + { + "name": "text_width", + "value": "Text width" + }, + { + "name": "text_height", + "value": "Text height" + }, { "name": "text_content_en_first", "value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. " @@ -1446,7 +1537,32 @@ "name": "text_text_case_lowercase", "value": "Lowercase" }, + // TextArea + { + "name": "text_area_set_text_selection", + "value": "Set Text Selection" + }, + { + "name": "text_area_set_text_selection_start_select_error", + "value": "Set Text Selection Start Select Error" + }, + { + "name": "text_area_set_text_selection_end_select_error", + "value": "Set Text Selection End Select Error" + }, + { + "name": "text_input_set_text_selection_start_select", + "value": "Start Select:" + }, + { + "name": "text_input_set_text_selection_end_select", + "value": "End Select:" + }, // TextInput + { + "name": "avoiding_input_method_testing", + "value": "Avoiding Input Method Testing" + }, { "name": "text_input_title", "value": "TextInput" @@ -1515,6 +1631,10 @@ "name": "text_input_only_input_english", "value": "Only english letters can be entered" }, + { + "name": "text_input_set_text_selection", + "value": "Set Text Selection" + }, { "name": "text_input_caret_position", "value": "Caret position" @@ -1927,6 +2047,26 @@ "name": "hovereffect", "value": "Hover" }, + { + "name": "bind_menu_customBuilder", + "value": "Bind menu customBuilder" + }, + { + "name": "bind_content_menu", + "value": "Bind content menu" + }, + { + "name": "click_on_any_action_below", + "value": "Click on any action below" + }, + { + "name": "long_press_any_action_below", + "value": "Long press any action below" + }, + { + "name": "bind_menu_content", + "value": "Bind menu content" + }, { "name": "menu", "value": "Menu" @@ -1935,6 +2075,26 @@ "name": "multiState", "value": "MultiState" }, + { + "name": "multi_short_key", + "value": "multi short key" + }, + { + "name": "set_mouse_style", + "value": "Set mouse style" + }, + { + "name": "multimode_input", + "value": "multimode input" + }, + { + "name": "short_key_pressed", + "value": "Short key pressed" + }, + { + "name": "on_short_key", + "value": "Simultaneously press the shortcut key ctrl+a to trigger the following button click event" + }, { "name": "alert", "value": "Alert" @@ -2034,6 +2194,10 @@ "name": "auxiliary_refresh", "value": "Refresh" }, + { + "name": "auxiliary_refresh_refreshing", + "value": "Refreshing" + }, { "name": "auxiliary_refresh_offset", "value": "offset:" @@ -2178,6 +2342,10 @@ "name": "checkbox_checkboxgroup", "value": "Checkbox && CheckboxGroup" }, + { + "name": "checkbox", + "value": "Checkbox" + }, { "name": "checkbox_title", "value": "Checkbox" @@ -2246,6 +2414,34 @@ "name": "swiper_name", "value": "Swiper" }, + { + "name": "nav_router", + "value": "NavRouter" + }, + { + "name": "tabs_name", + "value": "Tabs" + }, + { + "name": "select_name", + "value": "Select" + }, + { + "name": "slider_name", + "value": "Slider" + }, + { + "name": "swiper_set_next_margin_and_previous_margin", + "value": "set next margin and previous margin" + }, + { + "name": "swiper_next_margin", + "value": "next margin" + }, + { + "name": "swiper_previous_margin", + "value": "previous margin" + }, { "name": "alphabetindexer_an", "value": "An" @@ -2406,6 +2602,10 @@ "name": "checkbox_select_all", "value": "Select All" }, + { + "name": "delete_list_item", + "value": "Delete listItem" + }, { "name": "normal_display", "value": "Display" @@ -2478,6 +2678,10 @@ "name": "interaction_arrowoffset", "value": "Change arrowOffset:" }, + { + "name": "interaction_mask", + "value": "isMask:" + }, // ComponentTransitionSample { "name": "component_transition", @@ -3066,6 +3270,10 @@ "name": "grid_settings_gridSpan", "value": "GridSpan gridOffset" }, + { + "name": "grid_edgeEffect_spring", + "value": "Grid edgeEffect spring" + }, { "name": "focus_control", "value": "焦点控制" @@ -4404,6 +4612,10 @@ "value": "Previous page" }, // Navigation + { + "name": "navRouter_title", + "value": "NavRouter" + }, { "name": "navigation_title", "value": "Navigation" diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/profile/main_pages.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/profile/main_pages.json index 08396525e..e77f83bb7 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/profile/main_pages.json +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/profile/main_pages.json @@ -70,10 +70,12 @@ "pages/universal/properties/displaySample/DisplaySample", "pages/universal/properties/interactionSample/InteractionSample", "pages/universal/properties/effectsSample/EffectsSample", + "pages/universal/properties/safeAreaSample/SafeAreaSample", "pages/components/auxiliary/scrollbarSample/ScrollBarSample", "pages/components/auxiliary/refreshSample/RefreshSample", "pages/components/auxiliary/panelSample/PanelSample", "pages/components/auxiliary/alphabetIndexerSample/AlphabetIndexerSample", + "pages/components/informationPresentationAndDynamicEffects/listSample/ListSample", "pages/components/informationPresentationAndDynamicEffects/loadingProgressSample/LoadingProgressSample", "pages/components/informationPresentationAndDynamicEffects/marqueeSample/MarqueeSample", "pages/components/informationPresentationAndDynamicEffects/textTimerSample/TextTimerSample", @@ -128,6 +130,7 @@ "pages/components/listAndGrid/gridSample/GridSample", "pages/components/listAndGrid/gridItemSample/GridItemSample", "pages/components/scrollAndSwipe/swiperSample/SwiperSample", + "pages/components/navigation/navRouterSample/NavRouterSample", "pages/components/navigation/navigationSample/NavigationSample", "pages/components/navigation/navigationSample/NavigationSecondPage", "pages/components/navigation/navigationSample/NavigationThirdPage", diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/en/element/string.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/en/element/string.json index daf5b6983..7fb21cbad 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/en/element/string.json +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/en/element/string.json @@ -36,6 +36,10 @@ "name": "prop_background", "value": "Background" }, + { + "name": "safe_area", + "value": "SafeArea" + }, { "name": "prop_foreground", "value": "Foreground" @@ -866,6 +870,15 @@ "name": "qrcode_enter_content", "value": "Enter to change QR code" }, + // Search + { + "name": "search_placeholder", + "value": "Type to search..." + }, + { + "name": "search_name", + "value": "search" + }, // Radio { "name": "radio_title", @@ -1015,10 +1028,18 @@ "name": "size_width_percent", "value": "width is 60%" }, + { + "name": "size_width_fixed_60vw", + "value": "Width is 60vw" + }, { "name": "size_height", "value": "Height" }, + { + "name": "size_height_fixed_60vh", + "value": "Width is 60vh" + }, { "name": "size_height_fixed_100vp", "value": "Height is 100vp" @@ -1027,6 +1048,10 @@ "name": "size_height_percent", "value": "Height is 60%" }, + { + "name": "size_height_fixed_calc", + "value": "Height is calc(200vp-100vp)" + }, // Slider { "name": "slider_title", @@ -1129,6 +1154,10 @@ "name": "span_letter_spacing", "value": "LetterSpacing" }, + { + "name": "span_line_height", + "value": "LineHeight" + }, { "name": "span_decoration_type", "value": "Decoration type" @@ -1141,6 +1170,14 @@ "name": "span_text_spacing", "value": " LetterSpacing test text" }, + { + "name": "span_inherits_text_attribute", + "value": " Span inherits text attribute" + }, + { + "name": "span_does_not_inherit_text_attribute", + "value": " Span does not inherits text attribute" + }, { "name": "span_upper_lower", "value": "Upper or lower case" @@ -1231,6 +1268,14 @@ "name": "text_title", "value": "Text" }, + { + "name": "text_width", + "value": "Text width" + }, + { + "name": "text_height", + "value": "Text height" + }, { "name": "text_content", "value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. It is also in this way that our generation has been tempered in struggles and terrible trials, learning not to succumb to life." @@ -1315,7 +1360,32 @@ "name": "text_text_case_lowercase", "value": "Lowercase" }, + // TextArea + { + "name": "text_area_set_text_selection", + "value": "Set Text Selection" + }, + { + "name": "text_area_set_text_selection_start_select_error", + "value": "Set Text Selection Start Select Error" + }, + { + "name": "text_area_set_text_selection_end_select_error", + "value": "Set Text Selection End Select Error" + }, + { + "name": "text_input_set_text_selection_start_select", + "value": "Start Select:" + }, + { + "name": "text_input_set_text_selection_end_select", + "value": "End Select:" + }, // TextInput + { + "name": "avoiding_input_method_testing", + "value": "Avoiding Input Method Testing" + }, { "name": "text_input_title", "value": "TextInput" @@ -1388,6 +1458,10 @@ "name": "text_input_caret_position", "value": "Caret position" }, + { + "name": "text_input_set_text_selection", + "value": "Set Text Selection" + }, { "name": "text_input_max_length", "value": "Limit the input character length" @@ -1470,6 +1544,10 @@ "name": "toggle_type_switch", "value": "Switch" }, + { + "name": "checkbox", + "value": "Checkbox" + }, { "name": "toggle_type_checkbox", "value": "Check box" @@ -1799,6 +1877,26 @@ "name": "hovereffect", "value": "Hover" }, + { + "name": "bind_menu_customBuilder", + "value": "Bind menu customBuilder" + }, + { + "name": "bind_content_menu", + "value": "Bind content menu" + }, + { + "name": "click_on_any_action_below", + "value": "Click on any action below" + }, + { + "name": "long_press_any_action_below", + "value": "Long press any action below" + }, + { + "name": "bind_menu_content", + "value": "Bind menu content" + }, { "name": "menu", "value": "Menu" @@ -1807,6 +1905,26 @@ "name": "multiState", "value": "MultiState" }, + { + "name": "multi_short_key", + "value": "multi short key" + }, + { + "name": "set_mouse_style", + "value": "Set mouse style" + }, + { + "name": "multimode_input", + "value": "multimode input" + }, + { + "name": "short_key_pressed", + "value": "Short key pressed" + }, + { + "name": "on_short_key", + "value": "Simultaneously press the shortcut key ctrl+a to trigger the following button click event" + }, { "name": "alert", "value": "Alert" @@ -2532,6 +2650,10 @@ "name": "pinch_scale", "value": "PinchGesture scale:\n" }, + { + "name": "interaction_mask", + "value": "isMask:" + }, { "name": "rotation_description", "value": "Rotate the black box with two fingers" diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/zh/element/string.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/zh/element/string.json index 3d84982cd..11c6a1b09 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/zh/element/string.json +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/zh/element/string.json @@ -818,6 +818,15 @@ "name": "qrcode_enter_content", "value": "改变二维码内容" }, + // Search + { + "name": "search_placeholder", + "value": "输入搜索..." + }, + { + "name": "search_name", + "value": "search 搜索" + }, // Radio { "name": "radio_title", @@ -872,6 +881,23 @@ "name": "rotate_image_angle", "value": "旋转15°" }, + // SaveArea + { + "name": "safe_area_type_and_safe_area_edge", + "value": "扩展安全区域的类型和方向" + }, + { + "name": "safe_area", + "value": "SafeArea 安全区域" + }, + { + "name": "safe_area_type", + "value": "扩展类型" + }, + { + "name": "safe_area_edge", + "value": "扩展方向" + }, // Select { "name": "select_title", @@ -971,10 +997,18 @@ "name": "size_width_percent", "value": "宽度为60%" }, + { + "name": "size_width_fixed_60vw", + "value": "宽度为60vw" + }, { "name": "size_height", "value": "高度" }, + { + "name": "size_height_fixed_60vh", + "value": "高度为60vh" + }, { "name": "size_height_fixed_100vp", "value": "高度为100vp" @@ -983,6 +1017,10 @@ "name": "size_height_percent", "value": "高度为60%" }, + { + "name": "size_height_fixed_calc", + "value": "高度为calc(200vp-100vp)" + }, // Slider { "name": "slider_title", @@ -1085,6 +1123,10 @@ "name": "span_letter_spacing", "value": "字符间距" }, + { + "name": "span_line_height", + "value": "跨度线高度" + }, { "name": "span_decoration_type", "value": "装饰线类型" @@ -1097,6 +1139,14 @@ "name": "span_text_spacing", "value": " 字符间距示例文本" }, + { + "name": "span_inherits_text_attribute", + "value": " Span继承text样式" + }, + { + "name": "span_does_not_inherit_text_attribute", + "value": " Span不继承text样式" + }, { "name": "span_upper_lower", "value": "配置不同文本属性" @@ -1175,6 +1225,14 @@ "name": "text_content", "value": "钢是在烈火和急剧冷却里锻炼出来的，所以才能坚硬和什么也不怕。我们的一代也是这样的在斗争中和可怕的考验中锻炼出来的，学习了不在生活面前屈服。" }, + { + "name": "text_width", + "value": "Text 宽" + }, + { + "name": "text_height", + "value": "Text 高" + }, { "name": "text_text_align_center", "value": "居中" @@ -1255,7 +1313,32 @@ "name": "text_text_case_lowercase", "value": "小写" }, + // TextArea + { + "name": "text_area_set_text_selection", + "value": "文本选择" + }, + { + "name": "text_area_set_text_selection_start_select_error", + "value": "起始位输入错误" + }, + { + "name": "text_area_set_text_selection_end_select_error", + "value": "结束位输入错误" + }, + { + "name": "text_input_set_text_selection_start_select", + "value": "起始位:" + }, + { + "name": "text_input_set_text_selection_end_select", + "value": "结束位:" + }, // TextInput + { + "name": "avoiding_input_method_testing", + "value": "避让输入法测试" + }, { "name": "text_input_title", "value": "TextInput 文本输入" @@ -1328,6 +1411,10 @@ "name": "text_input_caret_position", "value": "光标位置" }, + { + "name": "text_input_set_text_selection", + "value": "文本选择" + }, { "name": "text_input_max_length", "value": "限制输入字符长度" @@ -1648,6 +1735,26 @@ "name": "hovereffect", "value": "悬停" }, + { + "name": "bind_menu_customBuilder", + "value": "绑定自定义菜单" + }, + { + "name": "bind_content_menu", + "value": "绑定上下文菜单" + }, + { + "name": "click_on_any_action_below", + "value": "点击下方任一操作" + }, + { + "name": "long_press_any_action_below", + "value": "长按下方任一操作" + }, + { + "name": "bind_menu_content", + "value": "绑定接口菜单" + }, { "name": "menu", "value": "菜单" @@ -1656,6 +1763,26 @@ "name": "multiState", "value": "多态" }, + { + "name": "multi_short_key", + "value": "快捷键" + }, + { + "name": "set_mouse_style", + "value": "设置鼠标样式" + }, + { + "name": "multimode_input", + "value": "多模输入" + }, + { + "name": "short_key_pressed", + "value": "快捷键已按下" + }, + { + "name": "on_short_key", + "value": "同时按下快捷键ctrl+a，触发以下按钮点击事件" + }, { "name": "alert", "value": "告警弹窗" @@ -1742,6 +1869,10 @@ "name": "auxiliary_refresh", "value": "下拉刷新" }, + { + "name": "auxiliary_refresh_refreshing", + "value": "刷新中" + }, { "name": "auxiliary_panel", "value": "Panel 弹出面板" @@ -1777,6 +1908,10 @@ "name": "data_panel", "value": "DataPanel 数据面板" }, + { + "name": "checkbox", + "value": "checkbox 勾选框" + }, { "name": "checkbox_checkboxgroup", "value": "勾选框" @@ -1813,6 +1948,34 @@ "name": "swiper_name", "value": "Swiper 翻页" }, + { + "name": "nav_router", + "value": "点击跳转路由页面" + }, + { + "name": "tabs_name", + "value": "Tabs 页签" + }, + { + "name": "slider_name", + "value": "Slider 滚动条" + }, + { + "name": "select_name", + "value": "Select 选择器" + }, + { + "name": "swiper_set_next_margin_and_previous_margin", + "value": "设置前后页边距" + }, + { + "name": "swiper_next_margin", + "value": "上一页边距" + }, + { + "name": "swiper_previous_margin", + "value": "下一页边距" + }, { "name": "alphabetindexer_an", "value": "安" @@ -1933,6 +2096,10 @@ "name": "checkbox_select_all", "value": "全选" }, + { + "name": "delete_list_item", + "value": "左划删除 listItem" + }, { "name": "normal_display", "value": "效果展示" @@ -2001,6 +2168,10 @@ "name": "interaction_placementontop", "value": "显示位置:" }, + { + "name": "interaction_mask", + "value": "屏蔽周边事件:" + }, { "name": "interaction_arrowoffset", "value": "调整箭头:" @@ -2625,6 +2796,10 @@ "name": "grid_settings_gridSpan", "value": "GridSpan gridOffset" }, + { + "name": "grid_edgeEffect_spring", + "value": "Grid edgeEffect spring" + }, { "name": "focus_control", "value": "焦点控制" @@ -3806,6 +3981,10 @@ "value": "上一页" }, // Navigation + { + "name": "navRouter_title", + "value": "NavRouter" + }, { "name": "navigation_title", "value": "Navigation" diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/ets/test/Ability.test.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/ets/test/Ability.test.ets index f362026d7..0384b8a48 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/ets/test/Ability.test.ets +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/ets/test/Ability.test.ets @@ -51,6 +51,14 @@ async function drawSliderWithId(text: string){ let rect = await slider_01.getBoundsCenter(); await driver.drag(rect.x - 100, rect.y, rect.x + 100, rect.y, 800) } +// 通过 ID 滑动 +async function drawPickerWithId(text: string){ + let atom = text; + await driver.assertComponentExist(ON.id(atom)); + let slider_01 = await driver.findComponent(ON.id(atom)); + let rect = await slider_01.getBoundsCenter(); + await driver.drag(rect.x, rect.y - 50, rect.x, rect.y + 50, 800) +} // 通过text验证有没有这个组件 有的话点击一下 async function checkButtonAndClickWithText(text: string) { let atom = text; @@ -228,7 +236,6 @@ export default function abilityTest() { Logger.info(BUNDLE + testName + ' end'); }); - /** * 按钮与选择 */ @@ -304,7 +311,6 @@ export default function abilityTest() { Logger.info(BUNDLE + testName + ' end'); }) - /** * DatePicker 时间选择器 */ @@ -422,7 +428,7 @@ export default function abilityTest() { Logger.info(BUNDLE + testName + ' end'); }) - /** + /** * Select 选择菜单 */ it(BUNDLE + 'SelectFunction_001', 0, async function () { @@ -652,6 +658,13 @@ export default function abilityTest() { await driver.delayMs(DELAY_TIME); + // 点击加使能按钮 + let inc = await driver.findComponent(ON.id('inc')); + await inc.click(); + // 点击减使能按钮 + let dec = await driver.findComponent(ON.id('dec')); + await dec.click(); + let backBtn = await driver.findComponent(ON.id('backBtn')); // 返回 await backBtn.click(); @@ -725,11 +738,61 @@ export default function abilityTest() { await driver.drag(110, 900, 110, 800, 800); await driver.delayMs(DELAY_TIME); + // 输入法避让测试 + let input = await driver.findComponent(ON.id('test_input')); + await input.click(); + // 滑动slider调整 固定坐标只支持RK3568，其他设备需要调整 + await driver.drag(110, 4000, 110, 200, 800); + await driver.delayMs(500); + // 收起输入法 + await input.inputText('test'); + let backBtn = await driver.findComponent(ON.id('backBtn')); // 返回 await backBtn.click(); await driver.delayMs(500); + Logger.info(BUNDLE + testName + ' end'); + }) + + + /** + * Swiper 翻页 + */ + it(BUNDLE + 'SwiperFunction_001', 0, async function () { + let testName = 'SwiperFunction'; + Logger.info(BUNDLE + testName + ' begin ------------------------------'); + await driver.delayMs(DELAY_TIME); + let atom = await manager.getStringValue($r('app.string.swiper_name')); + let button = await driver.findComponent(ON.text(atom)); + if (!button) { + // 如果没展开 就展开 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.scroll_swiper'))); + } + await checkButtonAndClickWithText(atom); + await driver.delayMs(DELAY_TIME); + + await checkButtonAndClickWithTextByResource($r('app.string.swiper_controller_next')); + await checkButtonAndClickWithTextByResource($r('app.string.swiper_controller_previous')); + await checkButtonAndClickWithID(`swiper_001`); + await checkButtonAndClickWithID(`swiper_002`); + await checkButtonAndClickWithTextByResource($r('app.string.swiper_controller_next')); + await checkButtonAndClickWithID(`swiper_003`); + await checkButtonAndClickWithID(`swiper_004`); + await drawSliderWithId(`swiper_005`); + await drawSliderWithId(`swiper_008`); + await drawSliderWithId(`swiper_009`); + await checkButtonAndClickWithID(`swiper_006`); + await checkButtonAndClickWithText(`1000`); + // 滑到底端 + await driver.drag(110, 752, 110, 500, 800); + await checkButtonAndClickWithID(`swiper_007`); + await checkButtonAndClickWithText(`2000`); + + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); // 关闭展开 await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.scroll_swiper'))); @@ -1008,6 +1071,9 @@ export default function abilityTest() { let driver: Driver = Driver.create(); await driver.delayMs(DELAY_TIME); + // 从下往上滑动列表 + await driver.drag(200, 500, 200, 200, 800) + await driver.delayMs(DELAY_TIME); // 进入DataPanel 数据面板 let atom = await manager.getStringValue($r('app.string.data_panel')); @@ -1241,11 +1307,10 @@ export default function abilityTest() { } await checkButtonAndClickWithText(atom); - // 字符间距 + // 调节间距和高度 + await drawSliderWithId('Slider1'); await driver.delayMs(DELAY_TIME); - // 滑动slider调整 固定坐标只支持RK3568，其他设备需要调整 - await driver.drag(212, 606, 400, 606, 800); - await driver.drag(800, 606, 100, 606, 800); + await drawSliderWithId('Slider2'); await driver.delayMs(DELAY_TIME); // 展开装饰线类型 @@ -1289,7 +1354,15 @@ export default function abilityTest() { // 输入文本 let input = await driver.findComponent(ON.id('test_input')); - await input.inputText('test'); + await input.inputText('testtesttesttest'); + // 上下滑动选择器 + await drawPickerWithId('end_select'); + // 点击文本选择按钮 + let select = await driver.findComponent(ON.id('button_to_select')); + await select.click(); + await driver.delayMs(500); + // 收起输入法 + await select.inputText('test'); // 返回 let backBtn = await driver.findComponent(ON.id('backBtn')); @@ -1361,6 +1434,10 @@ export default function abilityTest() { let driver: Driver = Driver.create(); await driver.delayMs(DELAY_TIME); + // 从下往上滑动列表 + await driver.drag(200, 500, 200, 200, 800) + await driver.delayMs(DELAY_TIME); + // 进入RichText 富文本 let atom = await manager.getStringValue($r('app.string.rich_text')); let button = await driver.findComponent(ON.text(atom)); @@ -1381,6 +1458,121 @@ export default function abilityTest() { Logger.info(BUNDLE + testName + ' end'); }) + /** + *TextArea 多行文本输入框 + */ + it(BUNDLE + 'TextareaFunction_001', 0, async function () { + let testName = 'TextareaFunction'; + Logger.info(BUNDLE + testName + ' begin'); + await driver.delayMs(DELAY_TIME); + let list = await driver.findComponent(ON.id('list_001')); + let on = ON.text(await manager.getStringValue($r('app.string.text_and_input'))); + await list.scrollSearch(on); + let atom = await manager.getStringValue($r('app.string.textarea_title')); + let button = await driver.findComponent(ON.text(atom)); + await driver.delayMs(DELAY_TIME); + if (!button) { + // 如果没展开 就展开 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_and_input'))); + if (!await driver.findComponent(ON.text(atom))) { + await driver.drag(200, 200, 200, 100, 800); + } + } + await checkButtonAndClickWithText(atom); + await driver.delayMs(DELAY_TIME); + // 输入文本 + let input = await driver.findComponent(ON.id('textarea_001')); + await input.inputText('testtesttesttest'); + await checkButtonAndClickWithID('textarea_select_001'); + await checkButtonAndClickWithText('End') + await checkButtonAndClickWithID('textarea_select_002'); + await checkButtonAndClickWithText('In App') + await checkButtonAndClickWithID('textarea_color_001'); + await checkButtonAndClickWithText('Pink') + await checkButtonAndClickWithID('textarea_color_002'); + await checkButtonAndClickWithText('Blue') + await driver.delayMs(DELAY_TIME); + // 上下滑动选择器 + await drawPickerWithId('end_select'); + // 点击文本选择按钮 + let select = await driver.findComponent(ON.id('button_to_select')); + await select.click(); + await driver.delayMs(500); + + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); + + Logger.info(BUNDLE + testName + ' end'); + }) + /** + *PatternLock 图案密码锁 + */ + it(BUNDLE + 'PatternLockFunction_001', 0, async function () { + let testName = 'PatternLockFunction'; + Logger.info(BUNDLE + testName + ' begin'); + await driver.delayMs(DELAY_TIME); + let atom = await manager.getStringValue($r('app.string.patternLock_title')); + let button = await driver.findComponent(ON.text(atom)); + await driver.delayMs(DELAY_TIME); + if (!button) { + // 如果没展开 就展开 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_and_input'))); + } + await checkButtonAndClickWithText(atom); + await driver.delayMs(DELAY_TIME); + await drawSliderWithId('patternLock_slider_001') + await drawSliderWithId('patternLock_slider_002') + await drawSliderWithId('patternLock_slider_003') + await checkButtonAndClickWithID('patternLock_color_001'); + await checkButtonAndClickWithText('Pink') + await checkButtonAndClickWithID('patternLock_color_002'); + await checkButtonAndClickWithText('Blue') + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); + await driver.drag(200, 200, 200, 100, 800); + Logger.info(BUNDLE + testName + ' end'); + }) + + /** + *Search 搜索框 + */ + it(BUNDLE + 'SearchFunction_001', 0, async function () { + let testName = 'SearchFunction'; + Logger.info(BUNDLE + testName + ' begin'); + await driver.delayMs(DELAY_TIME); + let atom = await manager.getStringValue($r('app.string.search_title')); + let button = await driver.findComponent(ON.text(atom)); + await driver.delayMs(DELAY_TIME); + if (!button) { + // 如果没展开 就展开 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_and_input'))); + } + // 从下往上滑动列表 + await driver.drag(200, 500, 200, 200, 800); + await driver.delayMs(DELAY_TIME); + await checkButtonAndClickWithText(atom); + await driver.delayMs(DELAY_TIME); + let input = await driver.findComponent(ON.id('search_001')); + await input.inputText('test'); + await checkButtonAndClickWithID('search_select_001'); + await checkButtonAndClickWithText('End') + await checkButtonAndClickWithID('search_select_002'); + await checkButtonAndClickWithText('In App') + await checkButtonAndClickWithID('search_color_001'); + await checkButtonAndClickWithText('Pink') + await driver.delayMs(DELAY_TIME); + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_and_input'))); + Logger.info(BUNDLE + testName + ' end'); + }) + /** * Badge 标记 */ @@ -1561,44 +1753,6 @@ export default function abilityTest() { Logger.info(BUNDLE + testName + ' end'); }) - /** - * Swiper 翻页 - */ - it(BUNDLE + 'SwiperFunction_001', 0, async function () { - let testName = 'SwiperFunction'; - Logger.info(BUNDLE + testName + ' begin ------------------------------'); - await driver.delayMs(DELAY_TIME); - let atom = await manager.getStringValue($r('app.string.swiper_name')); - let button = await driver.findComponent(ON.text(atom)); - if (!button) { - // 如果没展开 就展开 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.scroll_swiper'))); - } - await checkButtonAndClickWithText(atom); - await driver.delayMs(DELAY_TIME); - - await checkButtonAndClickWithTextByResource($r('app.string.swiper_controller_next')); - await checkButtonAndClickWithTextByResource($r('app.string.swiper_controller_previous')); - await checkButtonAndClickWithID(`swiper_001`); - await checkButtonAndClickWithID(`swiper_002`); - await checkButtonAndClickWithTextByResource($r('app.string.swiper_controller_next')); - await checkButtonAndClickWithID(`swiper_003`); - await checkButtonAndClickWithID(`swiper_004`); - await drawSliderWithId(`swiper_005`); - await checkButtonAndClickWithID(`swiper_006`); - await checkButtonAndClickWithText(`1000`) - await checkButtonAndClickWithID(`swiper_007`); - await checkButtonAndClickWithText(`2000`) - - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.scroll_swiper'))); - - Logger.info(BUNDLE + testName + ' end'); - }) - /** * Row */ @@ -1972,6 +2126,34 @@ export default function abilityTest() { Logger.info(BUNDLE + testName + ' end'); }) + /** + * NavRouter + */ + it(BUNDLE + 'NavRouterFunction_001', 0, async function () { + let testName = 'NavRouterFunction'; + Logger.info(BUNDLE + testName + ' begin ------------------------------'); + await driver.delayMs(DELAY_TIME); + // 滑到底端 + await driver.drag(110, 752, 110, 500, 800); + let atom = await manager.getStringValue($r('app.string.navRouter_title')); + let button = await driver.findComponent(ON.text(atom)); + if (!button) { + // 如果没展开 就展开 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.navigation'))); + } + await checkButtonAndClickWithText(atom); + let navigation = await driver.findComponent(ON.id('Navigation1')); + await navigation.click(); + await driver.delayMs(DELAY_TIME); + + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); + + Logger.info(BUNDLE + testName + ' end'); + }) + /** * Navigation */ @@ -2091,109 +2273,6 @@ export default function abilityTest() { Logger.info(BUNDLE + testName + ' end'); }) - /** - *TextArea 多行文本输入框 - */ - it(BUNDLE + 'TextareaFunction_001', 0, async function () { - let testName = 'TextareaFunction'; - Logger.info(BUNDLE + testName + ' begin'); - await driver.delayMs(DELAY_TIME); - let list = await driver.findComponent(ON.id('list_001')); - let on = ON.text(await manager.getStringValue($r('app.string.text_and_input'))); - await list.scrollSearch(on); - let atom = await manager.getStringValue($r('app.string.textarea_title')); - let button = await driver.findComponent(ON.text(atom)); - await driver.delayMs(DELAY_TIME); - if (!button) { - // 如果没展开 就展开 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_and_input'))); - if (!await driver.findComponent(ON.text(atom))) { - await driver.drag(200, 200, 200, 100, 800); - } - } - await checkButtonAndClickWithText(atom); - await driver.delayMs(DELAY_TIME); - // 输入文本 - let input = await driver.findComponent(ON.id('textarea_001')); - await input.inputText('test'); - await checkButtonAndClickWithID('textarea_select_001'); - await checkButtonAndClickWithText('End') - await checkButtonAndClickWithID('textarea_select_002'); - await checkButtonAndClickWithText('In App') - await checkButtonAndClickWithID('textarea_color_001'); - await checkButtonAndClickWithText('Pink') - await checkButtonAndClickWithID('textarea_color_002'); - await checkButtonAndClickWithText('Blue') - await driver.delayMs(DELAY_TIME); - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); - - Logger.info(BUNDLE + testName + ' end'); - }) - /** - *PatternLock 图案密码锁 - */ - it(BUNDLE + 'PatternLockFunction_001', 0, async function () { - let testName = 'PatternLockFunction'; - Logger.info(BUNDLE + testName + ' begin'); - await driver.delayMs(DELAY_TIME); - let atom = await manager.getStringValue($r('app.string.patternLock_title')); - let button = await driver.findComponent(ON.text(atom)); - await driver.delayMs(DELAY_TIME); - if (!button) { - // 如果没展开 就展开 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_and_input'))); - } - await checkButtonAndClickWithText(atom); - await driver.delayMs(DELAY_TIME); - await drawSliderWithId('patternLock_slider_001') - await drawSliderWithId('patternLock_slider_002') - await drawSliderWithId('patternLock_slider_003') - await checkButtonAndClickWithID('patternLock_color_001'); - await checkButtonAndClickWithText('Pink') - await checkButtonAndClickWithID('patternLock_color_002'); - await checkButtonAndClickWithText('Blue') - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); - await driver.drag(200, 200, 200, 100, 800); - Logger.info(BUNDLE + testName + ' end'); - }) - /** - *Search 搜索框 - */ - it(BUNDLE + 'SearchFunction_001', 0, async function () { - let testName = 'SearchFunction'; - Logger.info(BUNDLE + testName + ' begin'); - await driver.delayMs(DELAY_TIME); - let atom = await manager.getStringValue($r('app.string.search_title')); - let button = await driver.findComponent(ON.text(atom)); - await driver.delayMs(DELAY_TIME); - if (!button) { - // 如果没展开 就展开 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_and_input'))); - } - await checkButtonAndClickWithText(atom); - await driver.delayMs(DELAY_TIME); - let input = await driver.findComponent(ON.id('search_001')); - await input.inputText('test'); - await checkButtonAndClickWithID('search_select_001'); - await checkButtonAndClickWithText('End') - await checkButtonAndClickWithID('search_select_002'); - await checkButtonAndClickWithText('In App') - await checkButtonAndClickWithID('search_color_001'); - await checkButtonAndClickWithText('Pink') - await driver.delayMs(DELAY_TIME); - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_and_input'))); - Logger.info(BUNDLE + testName + ' end'); - }) /** *Image 图片 */ @@ -3042,12 +3121,36 @@ export default function abilityTest() { Logger.info(BUNDLE + testName + ' end'); }); + /** + * safeArea 安全区域 + */ + it(BUNDLE + 'SafeAreaFunction_001', 0, async function () { + let testName = 'SafeAreaFunction'; + Logger.info(BUNDLE + testName + ' begin'); + // 进入页面 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.safe_area'))); + // 点击system + let select = await driver.findComponent(ON.id('SYSTEM')); + await select.click(); + // 再次点击system + await select.click(); + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); + + Logger.info(BUNDLE + testName + ' end'); + }); + /** * foreground 前景 */ it(BUNDLE + 'ForegroundFunction_001', 0, async function () { let testName = 'ForegroundFunction'; Logger.info(BUNDLE + testName + ' begin'); + // 从下往上滑动列表 + await driver.drag(200, 700, 200, 200, 800) + await driver.delayMs(DELAY_TIME); // 进入页面 await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.prop_foreground'))); @@ -3069,9 +3172,7 @@ export default function abilityTest() { it(BUNDLE + 'BackgroundFunction_001', 0, async function () { let testName = 'BackgroundFunction'; Logger.info(BUNDLE + testName + ' begin'); - // 从下往上滑动列表 - await driver.drag(200, 700, 200, 200, 800) - await driver.delayMs(DELAY_TIME); + // 进入页面 await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.prop_background'))); // 正常显示 @@ -3381,10 +3482,32 @@ export default function abilityTest() { // 进入菜单 await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.menu'))); + // 点击自定义菜单 + let menu = await checkButtonAndClickWithID('menuBuilder1'); + + // 点击接口菜单 + menu = await checkButtonAndClickWithID('mMenuLists1'); + + // 从下往上滑动 + await driver.drag(200, 750, 200, 150, 800); + + // 长按上下文菜单 + menu = await checkButtonAndLongClickWithID('contextMenu1'); + + // 取消菜单显示 + await driver.click(400, 500); + // 进入多态 await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.multiState'))); // 组件禁用 await checkButtonAndLongClickWithID('test_checkbox'); + // 进入多模输入 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.multimode_input'))); + // 模拟按键：ctr+a + await driver.triggerCombineKeys(2072, 2017); + // 更换鼠标样式 + let btn = await driver.findComponent(ON.id('WEST')); + await btn.click(); // 返回 let backBtn = await driver.findComponent(ON.id('backBtn')); @@ -3472,6 +3595,7 @@ export default function abilityTest() { Logger.info(BUNDLE + testName + ' end'); }); + /** * location 位置设置 */ @@ -3512,6 +3636,7 @@ export default function abilityTest() { Logger.info(BUNDLE + testName + ' end'); }); + /** * flex布局 */ @@ -3572,6 +3697,8 @@ export default function abilityTest() { // 进入页面 await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.grid_settings'))); // 正常显示 + // 滑动grid查看效果 + await driver.drag(212, 1000, 212, 800, 800); // 返回 let backBtn = await driver.findComponent(ON.id('backBtn')); await backBtn.click(); @@ -3890,9 +4017,15 @@ export default function abilityTest() { // 进入页面 await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.Floating_window'))); - // 拖动悬浮窗 await checkAndDragById('floatingWindowComponent', 'target'); + // 输入法避让测试 + let input = await driver.findComponent(ON.id('test_input')); + await input.click(); + // 拖动悬浮窗 + await checkAndDragById('floatingWindowComponent', 'target'); + // 收起输入法 + await input.inputText('test'); // 返回 let backBtn = await driver.findComponent(ON.id('backBtn')); @@ -4131,366 +4264,393 @@ export default function abilityTest() { await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.transition_animation'))); await driver.delayMs(500); Logger.info(BUNDLE + testName + ' end'); - }) + }) - /** - * Interpolation Calculation 插值计算 - */ - it(BUNDLE + 'InterpolationFunction_001', 0, async function () { - let testName = 'InterpolationFunction'; - Logger.info(BUNDLE + testName + ' begin'); + /** + * Interpolation Calculation 插值计算 + */ + it(BUNDLE + 'InterpolationFunction_001', 0, async function () { + let testName = 'InterpolationFunction'; + Logger.info(BUNDLE + testName + ' begin'); - // 进入页面 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.interpolation_calculation'))); + // 进入页面 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.interpolation_calculation'))); - // 点击Go! - await checkButtonAndClickWithID('test_goButton'); - await driver.delayMs(DELAY_TIME); + // 点击Go! + await checkButtonAndClickWithID('test_goButton'); + await driver.delayMs(DELAY_TIME); - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); - Logger.info(BUNDLE + testName + ' end'); + Logger.info(BUNDLE + testName + ' end'); - }) + }) - /** - * AnimateTo 显示动画 - */ - it(BUNDLE + 'AnimateToFunction_001', 0, async function () { - let testName = 'AnimateToFunction'; - Logger.info(BUNDLE + testName + ' begin'); - // 进入页面 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.animate_to'))); - // 改变大小 - await checkButtonAndClickWithID('animate_btn_delay'); - await driver.delayMs(DELAY_TIME); - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); - Logger.info(BUNDLE + testName + ' end'); - }) + /** + * AnimateTo 显示动画 + */ + it(BUNDLE + 'AnimateToFunction_001', 0, async function () { + let testName = 'AnimateToFunction'; + Logger.info(BUNDLE + testName + ' begin'); + // 进入页面 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.animate_to'))); + // 改变大小 + await checkButtonAndClickWithID('animate_btn_delay'); + await driver.delayMs(DELAY_TIME); + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); + Logger.info(BUNDLE + testName + ' end'); + }) - /** - * Animation 属性动画 - */ - it(BUNDLE + 'AnimateToFunction_001', 0, async function () { - let testName = 'AnimateToFunction'; - Logger.info(BUNDLE + testName + ' begin'); - // 进入页面 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.attribute_animation'))); - // 改变大小 - await checkButtonAndClickWithID('animation_btn_delay'); - await driver.delayMs(DELAY_TIME); - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); - Logger.info(BUNDLE + testName + 'end'); - }) + /** + * Animation 属性动画 + */ + it(BUNDLE + 'AnimateToFunction_001', 0, async function () { + let testName = 'AnimateToFunction'; + Logger.info(BUNDLE + testName + ' begin'); + // 进入页面 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.attribute_animation'))); + // 改变大小 + await checkButtonAndClickWithID('animation_btn_delay'); + await driver.delayMs(DELAY_TIME); + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); + Logger.info(BUNDLE + testName + 'end'); + }) - /** - * TarBar 全局方法 - */ - it(BUNDLE + 'TarBarGlobalFunction_001', 0, async function () { - let testName = 'TarBarGlobalFunction'; - Logger.info(BUNDLE + testName + ' begin'); + /** + * TarBar 全局方法 + */ + it(BUNDLE + 'TarBarGlobalFunction_001', 0, async function () { + let testName = 'TarBarGlobalFunction'; + Logger.info(BUNDLE + testName + ' begin'); - let driver: Driver = Driver.create(); - await driver.delayMs(DELAY_TIME); + let driver: Driver = Driver.create(); + await driver.delayMs(DELAY_TIME); - // 切换到全局 - let testAtomName = 'switch to global' - await driver.assertComponentExist(ON.id('tabBar3')); - let bar = await driver.findComponent(ON.id('tabBar3')); - await bar.click(); - await driver.delayMs(DELAY_TIME); - Logger.info(BUNDLE + testName + testAtomName); + // 切换到全局 + let testAtomName = 'switch to global' + await driver.assertComponentExist(ON.id('tabBar3')); + let bar = await driver.findComponent(ON.id('tabBar3')); + await bar.click(); + await driver.delayMs(DELAY_TIME); + Logger.info(BUNDLE + testName + testAtomName); - Logger.info(BUNDLE + testName + ' end'); - }) + Logger.info(BUNDLE + testName + ' end'); + }) + // + /** + * AlertDialog 警告弹窗 + */ + it(BUNDLE + 'AlertDialogFunction_001', 0, async function () { + let testName = 'AlertDialogFunction'; + Logger.info(BUNDLE + testName + ' begin'); - /** - * AlertDialog 警告弹窗 - */ - it(BUNDLE + 'AlertDialogFunction_001', 0, async function () { - let testName = 'AlertDialogFunction'; - Logger.info(BUNDLE + testName + ' begin'); + let button = await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.alert_dialog')))); + if (!button) { + // 如果没展开 就展开 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.popup_window'))); + } - let button = await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.alert_dialog')))); - if (!button) { - // 如果没展开 就展开 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.popup_window'))); - } + // 进入页面 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog'))); - // 进入页面 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog'))); + // 点击单按钮弹窗并确认 + await checkButtonAndClickWithID('test_oneButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击双按钮弹窗并确认 + await checkButtonAndClickWithID('test_twoButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击单按钮弹窗并确认 - await checkButtonAndClickWithID('test_oneButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击双按钮弹窗并确认 - await checkButtonAndClickWithID('test_twoButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击垂直顶部弹窗并确认 + await checkButtonAndClickWithID('test_topButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击垂直居中弹窗并确认 + await checkButtonAndClickWithID('test_centerButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击垂直底部弹窗并确认 + await checkButtonAndClickWithID('test_bottomButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击垂直顶部弹窗并确认 - await checkButtonAndClickWithID('test_topButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击垂直居中弹窗并确认 - await checkButtonAndClickWithID('test_centerButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击垂直底部弹窗并确认 - await checkButtonAndClickWithID('test_bottomButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击可关闭弹窗并确认 + await checkButtonAndClickWithID('test_closeableButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击不可关闭弹窗并确认 + await checkButtonAndClickWithID('test_noCloseButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击可关闭弹窗并确认 - await checkButtonAndClickWithID('test_closeableButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击不可关闭弹窗并确认 - await checkButtonAndClickWithID('test_noCloseButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击左上偏移弹窗并确认 + await checkButtonAndClickWithID('test_upperLeftButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击右下偏移弹窗并确认 + await checkButtonAndClickWithID('test_lowRightButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击左上偏移弹窗并确认 - await checkButtonAndClickWithID('test_upperLeftButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击右下偏移弹窗并确认 - await checkButtonAndClickWithID('test_lowRightButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击2栅格弹窗并确认 + await checkButtonAndClickWithID('test_2GridButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击3栅格弹窗并确认 + await checkButtonAndClickWithID('test_3GridButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击4栅格弹窗并确认 + await checkButtonAndClickWithID('test_4GridButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 往下滑动 + await driver.drag(200, 600, 200, 400, 800); + // 输入法避让测试 + let input = await driver.findComponent(ON.id('test_input')); + await input.click(); + // 点击弹窗 + await driver.click(300, 600); + await driver.delayMs(1000); + // 点击确认 + await driver.click(300, 600); + await driver.delayMs(1000); + // 收起输入法 + await input.inputText('test'); - // 点击2栅格弹窗并确认 - await checkButtonAndClickWithID('test_2GridButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击3栅格弹窗并确认 - await checkButtonAndClickWithID('test_3GridButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击4栅格弹窗并确认 - await checkButtonAndClickWithID('test_4GridButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); + Logger.info(BUNDLE + testName + ' end'); - Logger.info(BUNDLE + testName + ' end'); + }) - }) + /** + * CustomDialog 自定义弹窗 + */ + it(BUNDLE + 'CustomDialogFunction_001', 0, async function () { + let testName = 'CustomDialogFunction'; + Logger.info(BUNDLE + testName + ' begin'); - /** - * CustomDialog 自定义弹窗 - */ - it(BUNDLE + 'CustomDialogFunction_001', 0, async function () { - let testName = 'CustomDialogFunction'; - Logger.info(BUNDLE + testName + ' begin'); + let button = await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.custom_dialog')))); + if (!button) { + // 如果没展开 就展开 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.dialog'))); + } - let button = await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.custom_dialog')))); - if (!button) { - // 如果没展开 就展开 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.dialog'))); - } + // 进入页面 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.custom_dialog'))); - // 进入页面 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.custom_dialog'))); + // 点击单按钮弹窗并确认 + await checkButtonAndClickWithID('test_dialogButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.custom_dialog_start'))); - // 点击单按钮弹窗并确认 - await checkButtonAndClickWithID('test_dialogButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.custom_dialog_start'))); + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); + Logger.info(BUNDLE + testName + ' end'); - Logger.info(BUNDLE + testName + ' end'); + }) - }) + /** + * DatePickerDialog 日期选择弹窗 + */ + it(BUNDLE + 'DatePickerDialogFunction_001', 0, async function () { + let testName = 'DatePickerDialogFunction'; + Logger.info(BUNDLE + testName + ' begin'); - /** - * DatePickerDialog 日期选择弹窗 - */ - it(BUNDLE + 'DatePickerDialogFunction_001', 0, async function () { - let testName = 'DatePickerDialogFunction'; - Logger.info(BUNDLE + testName + ' begin'); + let button = await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.date_picker_dialog')))); + if (!button) { + // 如果没展开 就展开 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.dialog'))); + } - let button = await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.date_picker_dialog')))); - if (!button) { - // 如果没展开 就展开 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.dialog'))); - } + // 进入页面 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.date_picker_dialog'))); - // 进入页面 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.date_picker_dialog'))); + // 展开农历日期 + await checkButtonAndClickWithID('test_lunar'); + // 滚动日期 可能是年-2020 + await driver.delayMs(DELAY_TIME); + // 滑动slider调整 固定坐标只支持RK3568，其他设备需要调整 + await driver.drag(100, 1017, 100, 1117, 800); + await driver.delayMs(DELAY_TIME); + //确定 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.button_confirm'))); - // 展开农历日期 - await checkButtonAndClickWithID('test_lunar'); - // 滚动日期 可能是年-2020 - await driver.delayMs(DELAY_TIME); - // 滑动slider调整 固定坐标只支持RK3568，其他设备需要调整 - await driver.drag(100, 1017, 100, 1117, 800); - await driver.delayMs(DELAY_TIME); - //确定 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.button_confirm'))); + // 展开公历日期 + await checkButtonAndClickWithID('test_gregorian'); + // 滚动日期 可能是年-2024 + await driver.delayMs(DELAY_TIME); + // 滑动slider调整 固定坐标只支持RK3568，其他设备需要调整 + await driver.drag(100, 1087, 100, 1017, 800); + await driver.delayMs(DELAY_TIME); + // 确定 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.button_confirm'))); - // 展开公历日期 - await checkButtonAndClickWithID('test_gregorian'); - // 滚动日期 可能是年-2024 - await driver.delayMs(DELAY_TIME); - // 滑动slider调整 固定坐标只支持RK3568，其他设备需要调整 - await driver.drag(100, 1087, 100, 1017, 800); - await driver.delayMs(DELAY_TIME); - // 确定 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.button_confirm'))); + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); + Logger.info(BUNDLE + testName + ' end'); - Logger.info(BUNDLE + testName + ' end'); + }) - }) + /** + * TimePickerDialog 时间选择弹窗 + */ + it(BUNDLE + 'TimePickerDialogFunction_001', 0, async function () { + let testName = 'TimePickerDialogFunction'; + Logger.info(BUNDLE + testName + ' begin'); - /** - * TimePickerDialog 时间选择弹窗 - */ - it(BUNDLE + 'TimePickerDialogFunction_001', 0, async function () { - let testName = 'TimePickerDialogFunction'; - Logger.info(BUNDLE + testName + ' begin'); + let button = await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.time_picker_dialog')))); + if (!button) { + // 如果没展开 就展开 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.dialog'))); + } - let button = await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.time_picker_dialog')))); - if (!button) { - // 如果没展开 就展开 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.dialog'))); - } + // 进入页面 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.time_picker_dialog'))); - // 进入页面 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.time_picker_dialog'))); + // 展开24小时 + await checkButtonAndClickWithID('test_24hour'); + // 滚动小时 + await driver.delayMs(DELAY_TIME); + // 滑动slider调整 固定坐标只支持RK3568，其他设备需要调整 + await driver.drag(200, 1017, 200, 1117, 800); + await driver.delayMs(DELAY_TIME); + // 确定 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.button_confirm'))); - // 展开24小时 - await checkButtonAndClickWithID('test_24hour'); - // 滚动小时 - await driver.delayMs(DELAY_TIME); - // 滑动slider调整 固定坐标只支持RK3568，其他设备需要调整 - await driver.drag(200, 1017, 200, 1117, 800); - await driver.delayMs(DELAY_TIME); - // 确定 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.button_confirm'))); + // 展开12小时 + await checkButtonAndClickWithID('test_12hour'); + // 滚动小时 + await driver.delayMs(DELAY_TIME); + // 滑动slider调整 固定坐标只支持RK3568，其他设备需要调整 + await driver.drag(200, 1117, 200, 1017, 800); + await driver.delayMs(DELAY_TIME); + // 确定 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.button_confirm'))); - // 展开12小时 - await checkButtonAndClickWithID('test_12hour'); - // 滚动小时 - await driver.delayMs(DELAY_TIME); - // 滑动slider调整 固定坐标只支持RK3568，其他设备需要调整 - await driver.drag(200, 1117, 200, 1017, 800); - await driver.delayMs(DELAY_TIME); - // 确定 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.button_confirm'))); + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); + Logger.info(BUNDLE + testName + ' end'); - Logger.info(BUNDLE + testName + ' end'); + }) - }) - /** - * ActionSheetDialogSample 列表选择弹窗 - */ - it(BUNDLE + 'ActionSheetDialogSampleFunction_001', 0, async function () { - let testName = 'ActionSheetDialogSampleFunction'; - Logger.info(BUNDLE + testName + 'begin'); + /** + * ActionSheetDialogSample 列表选择弹窗 + */ + it(BUNDLE + 'ActionSheetDialogSampleFunction_001', 0, async function () { + let testName = 'ActionSheetDialogSampleFunction'; + Logger.info(BUNDLE + testName + 'begin'); - let button = await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.action_sheet_dialog')))); - if (!button) { - // 如果没展开 就展开 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.dialog'))); - } - // 进入页面 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.action_sheet_dialog'))); - // 点击垂直顶部弹窗并确认 - await checkButtonAndClickWithID('sheet_topButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击垂直居中弹窗并确认 - await checkButtonAndClickWithID('sheet_centerButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击垂直底部弹窗并确认 - await checkButtonAndClickWithID('sheet_bottomButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击可关闭弹窗并确认 - await checkButtonAndClickWithID('sheet_closeableButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击不可关闭弹窗并确认 - await checkButtonAndClickWithID('sheet_noCloseButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击左上偏移弹窗并确认 - await checkButtonAndClickWithID('sheet_upperLeftButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击右下偏移弹窗并确认 - await checkButtonAndClickWithID('sheet_lowRightButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 点击内容并确认 - await checkButtonAndClickWithID('sheet_click_contentButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); - Logger.info(BUNDLE + testName + 'end'); - }) + let button = await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.action_sheet_dialog')))); + if (!button) { + // 如果没展开 就展开 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.dialog'))); + } + // 进入页面 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.action_sheet_dialog'))); + // 点击垂直顶部弹窗并确认 + await checkButtonAndClickWithID('sheet_topButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击垂直居中弹窗并确认 + await checkButtonAndClickWithID('sheet_centerButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击垂直底部弹窗并确认 + await checkButtonAndClickWithID('sheet_bottomButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击可关闭弹窗并确认 + await checkButtonAndClickWithID('sheet_closeableButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击不可关闭弹窗并确认 + await checkButtonAndClickWithID('sheet_noCloseButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击左上偏移弹窗并确认 + await checkButtonAndClickWithID('sheet_upperLeftButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击右下偏移弹窗并确认 + await checkButtonAndClickWithID('sheet_lowRightButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); + // 点击内容并确认 + await checkButtonAndClickWithID('sheet_click_contentButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_confirm'))); - /** - * TextPickerDialog 文本滑动选择弹窗 - */ - it(BUNDLE + 'TextPickerDialogFunction_001', 0, async function () { - let testName = 'TextPickerDialogFunction'; - Logger.info(BUNDLE + testName + 'begin'); - await driver.delayMs(DELAY_TIME); - let button = await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.text_picker_dialog')))); - if (!button) { - // 如果没展开 就展开 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.dialog'))); - } - // 进入页面 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_picker_dialog'))); - // 点击文字 - await checkButtonAndClickWithID('text_pickerButton'); - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_cancel'))); - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(500); - Logger.info(BUNDLE + testName + 'end'); - }) + // 输入法避让测试 + let input = await driver.findComponent(ON.id('test_input')); + await input.click(); + // 点击弹窗 + await driver.click(300, 600); + await driver.delayMs(1000); + // 点击确认 + await driver.click(300, 600); + await driver.delayMs(1000); + // 收起输入法 + await input.inputText('test'); - /** - * BindContextMenuDialog 菜单弹窗 - */ - it(BUNDLE + 'BindContextMenuDialogFunction_001', 0, async function () { - let testName = 'BindContextMenuDialogFunction'; - Logger.info(BUNDLE + testName + 'begin'); - await driver.delayMs(DELAY_TIME); - await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.global_menu')))); - // 进入页面 - await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.global_menu'))); - // 长按 - await driver.delayMs(1000); - await driver.assertComponentExist(ON.id('long_pressButton')); - let longPress = await driver.findComponent(ON.id('long_pressButton')); - await longPress.longClick() - await driver.delayMs(1000); - // 点击屏幕 - await driver.click(200, 300); - // 返回 - let backBtn = await driver.findComponent(ON.id('backBtn')); - await backBtn.click(); - await driver.delayMs(1000); - Logger.info(BUNDLE + testName + 'end'); - }) - Logger.info("Sample_ComponentCollection test end"); + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); + Logger.info(BUNDLE + testName + 'end'); + }) + + /** + * TextPickerDialog 文本滑动选择弹窗 + */ + it(BUNDLE + 'TextPickerDialogFunction_001', 0, async function () { + let testName = 'TextPickerDialogFunction'; + Logger.info(BUNDLE + testName + 'begin'); + await driver.delayMs(DELAY_TIME); + let button = await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.text_picker_dialog')))); + if (!button) { + // 如果没展开 就展开 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.dialog'))); + } + // 进入页面 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_picker_dialog'))); + // 点击文字 + await checkButtonAndClickWithID('text_pickerButton'); + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.alert_dialog_cancel'))); + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(500); + Logger.info(BUNDLE + testName + 'end'); + }) + + /** + * BindContextMenuDialog 菜单弹窗 + */ + it(BUNDLE + 'BindContextMenuDialogFunction_001', 0, async function () { + let testName = 'BindContextMenuDialogFunction'; + Logger.info(BUNDLE + testName + 'begin'); + await driver.delayMs(DELAY_TIME); + await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.global_menu')))); + // 进入页面 + await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.global_menu'))); + // 长按 + await driver.delayMs(1000); + await driver.assertComponentExist(ON.id('long_pressButton')); + let longPress = await driver.findComponent(ON.id('long_pressButton')); + await longPress.longClick() + await driver.delayMs(1000); + // 点击屏幕 + await driver.click(200, 300); + // 返回 + let backBtn = await driver.findComponent(ON.id('backBtn')); + await backBtn.click(); + await driver.delayMs(1000); + Logger.info(BUNDLE + testName + 'end'); + }) + Logger.info("Sample_ComponentCollection test end"); }) }) } diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/base/element/string.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/base/element/string.json index 3a2e4fe4b..1ad4d784c 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/base/element/string.json +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/base/element/string.json @@ -3156,6 +3156,14 @@ "name": "navigation", "value": "导航" }, + { + "name": "navRouter_title", + "value": "NavRouter" + }, + { + "name": "multimode_input", + "value": "multimode input" + }, { "name": "navigation_title", "value": "Navigation" @@ -3598,6 +3606,10 @@ { "name": "particle_spawn_stop", "value": "Stop" + }, + { + "name": "safe_area", + "value": "SafeArea" } ] } \ No newline at end of file diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/en/element/string.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/en/element/string.json index f71644d18..68c1bc401 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/en/element/string.json +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/en/element/string.json @@ -2470,6 +2470,10 @@ { "name": "particle_spawn_stop", "value": "Stop" + }, + { + "name": "safe_area", + "value": "SafeArea" } ] } \ No newline at end of file diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/zh/element/string.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/zh/element/string.json index d520df000..775c267dc 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/zh/element/string.json +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/zh/element/string.json @@ -1907,6 +1907,14 @@ "name": "navigation", "value": "导航" }, + { + "name": "navRouter_title", + "value": "NavRouter" + }, + { + "name": "multimode_input", + "value": "多模输入" + }, { "name": "navigation_title", "value": "Navigation" @@ -2155,6 +2163,10 @@ { "name": "particle_spawn_stop", "value": "停止" + }, + { + "name": "safe_area", + "value": "SafeArea 安全区域" } ] } \ No newline at end of file diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/ohosTest.md b/code/UI/ArkTsComponentCollection/ComponentCollection/ohosTest.md index ca4015700..a083ce4e5 100644 --- a/code/UI/ArkTsComponentCollection/ComponentCollection/ohosTest.md +++ b/code/UI/ArkTsComponentCollection/ComponentCollection/ohosTest.md @@ -14,10 +14,12 @@ | 验证Toggle 切换按钮 | 展开按钮与选择，进入Toggle 切换按钮 | 依次点击Toggle 切换按钮 | 正确响应点击事件 | 是 | Pass | | 验证勾选框 | 展开按钮与选择，进入勾选框 | 依次点击勾选框 | 正确选中勾选框 | 是 | Pass | | 验证TimePicker 时间选择器 | 展开按钮与选择，进入TimePicker 时间选择器 | 打开MilitaryTime | 时间选择器变化 | 是 | Pass | -| 验证Rating 评分条 | 展开按钮与选择，进入Rating 评分条 | 更改样式并打分 | 显示打分中间值，正确显示样式 | 是 | Pass | +| 验证Counter 计数器 | 展开按钮与选择，进入Counter 计数器 | 点击enableInc和enableDec使能按钮查看计数器效果 | 计数器加减按钮被禁用 | 是 | Pass | +| 验证Rating 评分条 | 展开按钮与选择，进入Rating 评分条 | 更改样式并打分 | 显示打分中间值，正确显示样式 | 是 | Pass | | 验证Scroll 滚动 | 展开滚动与滑动，进入Scroll 滚动 | 左右滑动，上下滑动 | 滚动条正确滑动 | 是 | Pass | | 验证QRCode 二维码 | 展开信息展示与动效，进入QRCode 二维码 | 改变二维码内容，改变颜色 | 正确改变二维码图片，改变颜色 | 是 | Pass | -| 验证LoadingProgress | 展开信息展示与动效，进入LoadingProgress | 更改LoadingProgress的颜色 | 正确更改相应的颜色 | 是 | Pass | +| 验证List | 展开信息展示与动效，进入List | 长按任一ListItem左划 | 呈现正确效果删除该ListItem | 是 | Pass | +| 验证LoadingProgress | 展开信息展示与动效，进入LoadingProgress | 更改LoadingProgress的颜色 | 正确更改相应的颜色 | 是 | Pass | | 验证Marquee 跑马灯 | 展开信息展示与动效，进入Marquee 跑马灯 | 更改Marquee样式，依次开始，停止跑马灯 | 正确反馈状态，依次运行，停止跑马灯 | 是 | Pass | | 验证TextTimer 文字计时器 | 展开信息展示与动效，进入TextTimer 文字计时器 | 依次开始、暂停、重置、更换时间格式 | 正确运行状态 | 是 | Pass | | 验证TextClock 文字时钟 | 展开信息展示与动效，进入TextClock 文字时钟 | 依次点击开始、暂停、更改时钟样式 | 正确运行状态并改变样式 | 是 | Pass | @@ -28,8 +30,8 @@ | 验证Tab 模糊切换 | 展开信息展示与动效，进入Tab 模糊切换 | 点击Tab 进行模糊切换 | Tab 模糊切换成功 | 是 | Pass | | 验证ImageFit 切换 | 展开信息展示与动效，进入ImageFit 切换 | 依次点击Radius按钮进行ImageFit模式切换 | ImageFit 模式切换成功 | 是 | Pass | | 验证Particle粒子效果 | 展开信息展示与动效，进入Particle粒子效果 | 点击Particle粒子效果生成按钮 | Particle粒子效果生成成功 | 是 | Pass | -| 验证Span 行内文本 | 展开文本与输入，进入Span 行内文本 | 依次调整字符间距，装饰线类型，颜色 | 依次改变对于属性 | 是 | Pass | -| 验证TextInput 文本输入 | 展开文本与输入，进入TextInput 文本输入 | 在输入框输入文本 | 正确显示输入文本 | 是 | Pass | +| 验证Span 行内文本 | 展开文本与输入，进入Span 行内文本 | 依次调整字符间距，装饰线类型，跨度线高度，颜色 | 依次改变对于属性 | 是 | Pass | +| 验证TextInput 文本输入 | 展开文本与输入，进入TextInput 文本输入 | 在输入框输入文本，可否选择对应文本段选中并高亮 | 正确显示输入文本 | 是 | Pass | | 验证Text 文本 | 展开文本与输入，进入Text 文本 | 依次更改字符间距，行高，对其类型，超长文本显示方式，装饰线，字体颜色，大小写 | 依次更改对应属性 | 是 | Pass | | 验证RichText 富文本 | 展开文本与输入，进入RichText 富文本 | | 正确显示富文本 | 是 | Pass | | 验证ScrollBar 滚动条 | 展开辅助，进入ScrollBar 滚动条 | 依次纵向滚动，横向滚动 | 正确滚动 | 是 | Pass | @@ -42,6 +44,7 @@ | 验证触摸事件 | | 拖动区域(100, 300, 300, 280) | 正确响应拖动 | 是 | Pass | | 验证拖拽事件 | | 依次拖拽应用图标、GridItem、ListItem、Hyperlink、Text、Image、Video、FormComponent | 正确响应拖动 | 是 | Pass | | 验证组件区域变化事件 | | 调整宽度，高度 | 正确约束小球运动范围 | 是 | Pass | +| 验证SafeArea 安全区域 | 进入SafeArea 安全区域 | 调整安全区域扩展的类型和方向 | 正确显示效果 | 是 | Pass | | 验证foreground 前景 | | 进入foreground 前景 | 正确显示背景 | 是 | Pass | | 验证background 背景 | | 进入background 背景 | 正确显示背景 | 是 | Pass | | 验证border 边框 | | 进入border 边框页面 | 正确显示边框 | 是 | Pass | @@ -51,8 +54,8 @@ | 验证translate 平移 | 展开图形变化 | 调整图片平移和容器平移的X轴、y轴 | 正确响应调整 | 是 | Pass | | 验证显示 | | 依次测试Z序，浮层，显隐，透明，测试响应属性 | 正确显示组件，并按调整改变 | 是 | Pass | | 验证图像效果 | | 依次测试图像模糊，阴影，特效显示效果 | 正确显示效果 | 是 | Pass | -| 验证互动 | | 依次测试禁用、弹窗、点击、热区、悬停、菜单、多态 | 正确显示组件，并按调整改变 | 是 | Pass | -| 验证TarBar 进入动画 | 在通用页面 | 点击下方tab动画 | 跳转到动画页面 | 是 | Pass | +| 验证互动 | | 依次测试禁用、弹窗、点击、热区、悬停、菜单、多态 、多模输入 | 正确显示组件，并按调整改变 | 是 | Pass | +| 验证TarBar 进入动画 | 在通用页面 | 点击下方tab动画 | 跳转到动画页面 | 是 | Pass | | 验证pageTransition 页面间转场 | 展开转场动画，进入pageTransition 页面间转场 | 依次测试顶部进场/底部退场，左侧进场/右侧退场，缩放进场/退场等 | 正确展示动画 | 是 | Pass | | 验证sharedTransition 共享元素转场 | 展开转场动画，进入sharedTransition 页面间转场 | 点击一个元素转场，3秒后点击返回 | 正确展示动画并返回 | 是 | Pass | | 验证sharedTransition 共享元素转场 | 展开转场动画，进入sharedTransition 页面间转场 | 点击一个元素转场，3秒后点击返回 | 正确展示动画并返回 | 是 | Pass | @@ -77,7 +80,7 @@ | 验证flex 布局 | | 进入flex 布局 | 正确显示效果 | 是 | Pass | | 验证图片边框设置 | | 进入图片边框设 | 正确显示效果 | 是 | Pass | | 验证形状裁剪 | | 进入形状裁剪 | 正确显示效果 | 是 | Pass | -| 验证栅格设置 | | 进入栅格设置 | 正确显示效果 | 是 | Pass | +| 验证栅格设置 | 进入栅格设置 | 滑动Gird组件到底部查看回弹效果 | 正确显示效果 | 是 | Pass | | 验证焦点控制 | | 按压外接键盘Tab键，select选择水果后点击聚焦 | 正确显示效果 | 是 | Pass | | 验证组件标识 | | 任意点击按钮 | 正确显示效果 | 是 | Pass | | 验证组件背景模糊 | | 进入组件背景模糊 | 正确显示效果 | 是 | Pass | @@ -101,8 +104,8 @@ | 验证ActionSheetDialogSample 列表选择弹框 | 展开弹窗，ActionSheetDialogSample 列表选择弹框 | 依次点击弹窗位置、是否关闭弹窗、偏移量、选项内容 | 正确展示响应弹窗 | 是 | Pass | | 验证TextPickerDialogSample 文本滑动选择器弹框 | 展开弹窗，TextPickerDialogSample 文本滑动选择器弹框 | 点击文字，滑动列表后点确定 | 正确展示响应弹窗 | 是 | Pass | | 验证MenuSample 菜单 | 展开弹窗，MenuSample 菜单 | 鼠标右键点击、手指触摸长按 | 正确展示响应弹窗 | 是 | Pass | -| 验证Swiper组件 | 展开滚动与滑动，进入swiper翻页 | 依次点击下一页、上一页、是否被禁用左右滑动切换功能、是否能纵向滑动、是否首尾循环、是否开启自动循环播放、滑动页面间隙、滑动切换的动画时长、自动播放的时间间隔 | 正确显示效果 | 是 | Pass | -| 验证TextArea组件 | 展开文本与输入，进入TextArea多行文本输入框 | 依次点击水平对齐、可否复制、placeholder文本颜色、输入框光标颜色 | 正确显示效果 | 是 | Pass | +| 验证Swiper组件 | 展开滚动与滑动，进入swiper翻页 | 依次点击下一页、上一页、是否被禁用左右滑动切换功能、是否能纵向滑动、是否首尾循环、是否开启自动循环播放、滑动页面间隙、滑动切换的动画时长、自动播放的时间间隔、上下页边距 | 正确显示效果 | 是 | Pass | +| 验证TextArea组件 | 展开文本与输入，进入TextArea多行文本输入框 | 依次点击水平对齐、可否复制、placeholder文本颜色、输入框光标颜色、可否选择对应文本段选中并高亮 | 正确显示效果 | 是 | Pass | | 验证PatternLock组件 | 展开文本与输入，进入PatternLock图案密码锁 | 依次滑动宫格宽高、圆点半径、连线宽度以及点击圆点未选中状态颜色、圆点激活状态颜色 | 正确显示效果 | 是 | Pass | | 验证Search组件 | 展开文本与输入，进入Search搜索框 | 依次点击水平对齐、可否复制、搜索框本文颜色 | 正确显示效果 | 是 | Pass | | 验证Row组件 | 展开行列与分栏，进入Row水平布局 | 依次滑动元素间距以及点击交叉轴对齐样式、主轴对齐样式 | 正确显示效果 | 是 | Pass |