From 33b4ea60305c2c9a881eb3b8e3f313294ddab7cb Mon Sep 17 00:00:00 2001 From: jinzhao Date: Thu, 23 Jan 2025 17:48:44 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4TextInput=20CalendarPicker=20?= =?UTF-8?q?DatePicker=20TextPicker=20TimePicker=E7=BB=84=E4=BB=B6=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jinzhao --- .../pages/CalendarPicker/calendarPicker01.ets | 46 ++++++ .../ets/pages/DatePicker/datePicker01.ets | 60 ++++++++ .../entry/src/main/ets/pages/IndexJ.ets | 70 ++++++++- .../TextInput/textInput01_withoutSubnode.ets | 49 +++++++ .../pages/TextInput/textInput02_counter.ets | 56 ++++++++ .../TextInput/textInput03_cancelButton.ets | 79 ++++++++++ .../ets/pages/TextInput/textInput04_error.ets | 63 ++++++++ .../pages/TextInput/textInput05_password.ets | 81 +++++++++++ .../ets/pages/TextInput/textInput06_unit.ets | 90 ++++++++++++ .../ets/pages/TextPicker/textPicker01.ets | 136 ++++++++++++++++++ .../ets/pages/TimePicker/timePicker01.ets | 74 ++++++++++ .../main/resources/base/element/strarray.json | 21 +++ .../main/resources/base/media/ImageOne.png | Bin 0 -> 564 bytes .../main/resources/base/media/ImageTwo.png | Bin 0 -> 582 bytes .../resources/base/profile/main_pages.json | 12 +- 15 files changed, 835 insertions(+), 2 deletions(-) create mode 100644 function/arkui/inspector_test/entry/src/main/ets/pages/CalendarPicker/calendarPicker01.ets create mode 100644 function/arkui/inspector_test/entry/src/main/ets/pages/DatePicker/datePicker01.ets create mode 100644 function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput01_withoutSubnode.ets create mode 100644 function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput02_counter.ets create mode 100644 function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput03_cancelButton.ets create mode 100644 function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput04_error.ets create mode 100644 function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput05_password.ets create mode 100644 function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput06_unit.ets create mode 100644 function/arkui/inspector_test/entry/src/main/ets/pages/TextPicker/textPicker01.ets create mode 100644 function/arkui/inspector_test/entry/src/main/ets/pages/TimePicker/timePicker01.ets create mode 100644 function/arkui/inspector_test/entry/src/main/resources/base/element/strarray.json create mode 100644 function/arkui/inspector_test/entry/src/main/resources/base/media/ImageOne.png create mode 100644 function/arkui/inspector_test/entry/src/main/resources/base/media/ImageTwo.png diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/CalendarPicker/calendarPicker01.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/CalendarPicker/calendarPicker01.ets new file mode 100644 index 00000000..051f98b6 --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/CalendarPicker/calendarPicker01.ets @@ -0,0 +1,46 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong 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. + */ + +@Entry +@Component +struct CalendarPickerExample { + private selectedDate: Date = new Date('2024-03-05') + @State idOrKeyArray: Array> = [ + ['', ''], + ['jz_calendarPicker_id', ''], + ['', 'jz_calendarPicker_key'], + ['jz_calendarPicker_id', 'jz_calendarPicker_key'], + ]; + + build() { + Column() { + Text('CalendarPicker') + .fontSize(18) + Column() { + ForEach(this.idOrKeyArray, (item: Array) => { + CalendarPicker({ hintRadius: 10, selected: this.selectedDate }) + .edgeAlign(CalendarAlign.START) + .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } }) + .margin(10) + .onChange((value) => { + console.info("CalendarPicker onChange:" + JSON.stringify(value)) + }) + .id(item[0]) + .key(item[1]) + }) + }.alignItems(HorizontalAlign.End).width("100%") + }.width('100%').margin({ top: 350 }) + } +} diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/DatePicker/datePicker01.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/DatePicker/datePicker01.ets new file mode 100644 index 00000000..7d91919f --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/DatePicker/datePicker01.ets @@ -0,0 +1,60 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong 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. + */ + +@Entry +@Component +struct DatePickerExample { + @State isLunar: boolean = false + private selectedDate: Date = new Date('2021-08-08') + @State idOrKeyArray: Array> = [ + ['', ''], + ['jz_datePicker_id', ''], + ['', 'jz_datePicker_key'], + ['jz_datePicker_id', 'jz_datePicker_key'], + ]; + + build() { + Scroll(){ + Column() { + Text('DatePicker') + .fontSize(18) + .margin({bottom: 24}) + + Button('切换公历农历') + .margin({ top: 30, bottom: 30 }) + .onClick(() => { + this.isLunar = !this.isLunar + }) + ForEach(this.idOrKeyArray, (item: Array) => { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + selected: this.selectedDate + }) + .disappearTextStyle({color: Color.Gray, font: {size: '16fp', weight: FontWeight.Bold}}) + .textStyle({color: '#ff182431', font: {size: '18fp', weight: FontWeight.Normal}}) + .selectedTextStyle({color: '#ff0000FF', font: {size: '26fp', weight: FontWeight.Regular, family: "HarmonyOS Sans", style: FontStyle.Normal}}) + .lunar(this.isLunar) + .onDateChange((value: Date) => { + this.selectedDate = value + console.info('select current date is: ' + value.toString()) + }) + .id(item[0]) + .key(item[1]) + }) + }.width('100%') + } + } +} diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/IndexJ.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/IndexJ.ets index f5b6b784..5fa11ff6 100644 --- a/function/arkui/inspector_test/entry/src/main/ets/pages/IndexJ.ets +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/IndexJ.ets @@ -11,4 +11,72 @@ * 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. - */ \ No newline at end of file + */ + +import router from '@ohos.router' + +@Entry +@Component +struct IndexJ { + @State arrLeft: Array = [ + 'CalendarPicker/calendarPicker01', + 'DatePicker/datePicker01', + 'TextPicker/textPicker01', + 'TimePicker/timePicker01' + ]; + + @State arrRight: Array = [ + 'TextInput/textInput01_withoutSubnode', + "TextInput/textInput02_counter", + "TextInput/textInput03_cancelButton", + "TextInput/textInput04_error", + "TextInput/textInput05_password", + "TextInput/textInput06_unit", + ]; + + build() { + Column(){ + Row() { + Scroll() { + Column() { + ForEach(this.arrLeft, (item: string) => { + Button(item) + .margin({top:5}) + .onClick(() => { + router.pushUrl({ + url: `pages/${item}`, + params: '' + }) + }) + }) + } + }.width("50%") + + Scroll() { + Column() { + ForEach(this.arrRight, (item: string) => { + Button(item) + .margin({top:5}) + .onClick(() => { + router.pushUrl({ + url: `pages/${item}`, + params: '' + }) + }) + }) + } + }.width("50%") + } + + Button('Back') + .onClick(()=> { + router.pushUrl({ + url: 'pages/Index', + params: '' + }) + }) + } + .width('100%') + .height('100%') + } +} \ No newline at end of file diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput01_withoutSubnode.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput01_withoutSubnode.ets new file mode 100644 index 00000000..e6add907 --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput01_withoutSubnode.ets @@ -0,0 +1,49 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong 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. + */ + +@Entry +@Component +struct TextInput01 { + + @State idOrKeyArray: Array> = [ + ['', ''], + ['jz_textInput_withoutSubnode_id', ''], + ['', 'jz_textInput_withoutSubnode_key'], + ['jz_textInput_withoutSubnode_id', 'jz_textInput_withoutSubnode_key'], + ]; + + build() { + Scroll() { + Column() { + Text('TextInput without subnode') + .fontSize(18) + .margin({bottom: 24}) + + ForEach(this.idOrKeyArray, (item: Array) => { + TextInput({ placeholder: 'TEST' }) + .width('95%') + .height(40) + .margin(20) + .type(InputType.Normal) + .showUnderline(true) + .showCounter(false) + .showError() + .id(item[0]) + .key(item[1]) + }) + }.width('100%') + } + } +} diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput02_counter.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput02_counter.ets new file mode 100644 index 00000000..27a2e9f6 --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput02_counter.ets @@ -0,0 +1,56 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong 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. + */ + +@Entry +@Component +struct TextInput02 { + @State text: string = 'test_text' + controller: TextInputController = new TextInputController() + + @State idOrKeyArray: Array> = [ + ['', ''], + ['jz_textInput_counter_id', ''], + ['', 'jz_textInput_counter_key'], + ['jz_textInput_counter_id', 'jz_textInput_counter_key'], + ]; + + + build() { + Scroll() { + Column() { + Text('TextInput with counter') + .fontSize(18) + .margin({bottom: 24}) + + ForEach(this.idOrKeyArray, (item: Array) => { + // 设置计数器 + TextInput({ text: this.text, controller: this.controller }) + .placeholderFont({ size: 16, weight: 400 }) + .width(336) + .height(56) + .maxLength(6) + .showUnderline(true) + .showCounter(true, { thresholdPercentage: 50, highlightBorder: true }) + .onChange((value: string) => { + this.text = value + }) + .id(item[0]) + .key(item[1]) + }) + + }.width('100%') + } + } +} diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput03_cancelButton.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput03_cancelButton.ets new file mode 100644 index 00000000..5069163d --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput03_cancelButton.ets @@ -0,0 +1,79 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong 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. + */ + +@Entry +@Component +struct TextInput03 { + @State cancelButtonStyle: CancelButtonStyle = CancelButtonStyle.CONSTANT + controller: TextInputController = new TextInputController() + @State idOrKeyArray: Array> = [ + ['', ''], + ['jz_textInput_cancelButton_id', ''], + ['', 'jz_textInput_cancelButton_key'], + ['jz_textInput_cancelButton_id', 'jz_textInput_cancelButton_key'], + ]; + + build() { + Scroll() { + Column() { + Text('TextInput with cancelButton') + .fontSize(18) + .margin({bottom: 24}) + + // 设置右侧清除按钮样式 + Row() { + Button('CONSTANT') + .margin(30) + .onClick(() => { + this.cancelButtonStyle = CancelButtonStyle.CONSTANT + }) + Button('INVISIBLE') + .margin(30) + .onClick(() => { + this.cancelButtonStyle = CancelButtonStyle.INVISIBLE + }) + Button('INPUT') + .margin(30) + .onClick(() => { + this.cancelButtonStyle = CancelButtonStyle.INPUT + }) + } + + ForEach(this.idOrKeyArray, (item: Array) => { + TextInput({ placeholder: 'TextInput with cancelButton', controller: this.controller }) + .width(380) + .height(60) + .cancelButton({ + style: this.cancelButtonStyle, + icon: { + size: 45, + src: $r('app.media.icon'), + color: Color.Blue + } + }) + .id(item[0]) + .key(item[1]) + TextInput({ placeholder: 'TextInput with cancelButton', controller: this.controller }) + .width(380) + .height(60) + .cancelButton({}) + .id(item[0]) + .key(item[1]) + }) + + }.width('100%') + } + } +} diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput04_error.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput04_error.ets new file mode 100644 index 00000000..660f7bd5 --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput04_error.ets @@ -0,0 +1,63 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong 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. + */ + +@Entry +@Component +struct TextInput04 { + controller: TextInputController = new TextInputController() + @State text: string = 'test_text' + @State textError: string = 'ERROR' + @State nameText: string = 'name' + + @State idOrKeyArray: Array> = [ + ['', ''], + ['jz_textInput_error_id', ''], + ['', 'jz_textInput_error_key'], + ['jz_textInput_error_id', 'jz_textInput_error_key'], + ]; + + + build() { + Scroll() { + Column() { + Text('TextInput with error message') + .fontSize(18) + .margin({bottom: 24}) + + ForEach(this.idOrKeyArray, (item: Array) => { + TextInput({ placeholder: '请输入用户名(name)', text: this.text }) + .showUnderline(true) + .width(350) + .showError(this.textError) + .onChange((value: string) => { + this.text = value + }) + .onSubmit((enterKey: EnterKeyType, event: SubmitEvent) => { + if (this.text == this.nameText) { + this.textError = '' + } else { + this.textError = '用户名输入错误' + this.text = '' + event.keepEditableState() + } + }) + .id(item[0]) + .key(item[1]) + }) + + }.width('100%') + } + } +} diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput05_password.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput05_password.ets new file mode 100644 index 00000000..298f3119 --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput05_password.ets @@ -0,0 +1,81 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong 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. + */ + +@Entry +@Component +struct TextInput05 { + controller: TextInputController = new TextInputController() + @State passwordState: boolean = false + @State passWordSrc1: Resource = $r('app.media.ImageOne') + @State passWordSrc2: Resource = $r('app.media.ImageTwo') + + @State idOrKeyArray: Array> = [ + ['', ''], + ['jz_textInput_password_id', ''], + ['', 'jz_textInput_password_key'], + ['jz_textInput_password_id', 'jz_textInput_password_key'], + ]; + + + build() { + Scroll() { + Column() { + Text('TextInput in password type') + .fontSize(18) + .margin({bottom: 24}) + + ForEach(this.idOrKeyArray, (item: Array) => { + TextInput({ placeholder: 'input your password...' }) + .width('95%') + .height(40) + .margin(20) + .type(InputType.Password) + .maxLength(9) + .showPasswordIcon(true) + .showPassword(this.passwordState) + .onSecurityStateChange(((isShowPassword: boolean) => { + console.info('isShowPassword',isShowPassword) + this.passwordState = isShowPassword + })) + .id(item[0]) + .key(item[1]) + TextInput({ placeholder: 'NUMBER_PASSWORD' }) + .width('95%') + .height(40) + .margin(20) + .type(InputType.NUMBER_PASSWORD) + .showPasswordIcon(false) + .id(item[0]) + .key(item[1]) + TextInput({ placeholder: 'NEW_PASSWORD' }) + .width('95%') + .height(40) + .margin(20) + .type(InputType.NEW_PASSWORD) + .id(item[0]) + .key(item[1]) + TextInput({ placeholder: 'user define password icon' }) + .type(InputType.Password) + .width(350) + .height(60) + .passwordIcon({ onIconSrc: this.passWordSrc1, offIconSrc: this.passWordSrc2 }) + .id(item[0]) + .key(item[1]) + }) + + }.width('100%') + } + } +} diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput06_unit.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput06_unit.ets new file mode 100644 index 00000000..26cffcc9 --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/TextInput/textInput06_unit.ets @@ -0,0 +1,90 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong 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. + */ + +@Entry +@Component +struct TextInput06 { + controller: TextInputController = new TextInputController() + @State showUnderline: boolean = true + + @State idOrKeyArray: Array> = [ + ['', ''], + ['jz_textInput_unit_id', ''], + ['', 'jz_textInput_unit_key'], + ['jz_textInput_unit_id', 'jz_textInput_unit_key'], + ]; + + @Builder itemEnd() { + Select([{ value: 'KB' }, + { value: 'MB' }, + { value: 'GB' }, + { value: 'TB', }]) + .height("48vp") + .borderRadius(0) + .selected(2) + .align(Alignment.Center) + .value('MB') + .font({ size: 20, weight: 500 }) + .fontColor('#182431') + .selectedOptionFont({ size: 20, weight: 400 }) + .optionFont({ size: 20, weight: 400 }) + .backgroundColor(Color.Transparent) + .responseRegion({ height: "40vp", width: "80%", x: '10%', y: '6vp' }) + .onSelect((index: number) => { + console.info('Select:' + index) + }) + } + + @Builder itemTest() { + Button('test_button_1') + Button('test_button_2') + Text('test_text_1') + } + + build() { + Scroll() { + Column() { + Text('TextInput with customized unit') + .fontSize(18) + .margin({bottom: 24}) + + // 下划线模式及自定义控件 + Button('切换showUnderline = true/false') + .margin(30) + .onClick(() => { + this.showUnderline = !this.showUnderline + }) + + ForEach(this.idOrKeyArray, (item: Array) => { + TextInput({ placeholder: 'underline style' }) + .showUnderline(this.showUnderline) + .width(350) + .height(60) + .showUnit(this.itemEnd) + .id(item[0]) + .key(item[1]) + TextInput({ placeholder: 'underline style' }) + .showUnderline(this.showUnderline) + .width(350) + .height(60) + .showUnit(this.itemTest) + .id(item[0]) + .key(item[1]) + }) + + }.width('100%') + } + } +} diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/TextPicker/textPicker01.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/TextPicker/textPicker01.ets new file mode 100644 index 00000000..a812664e --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/TextPicker/textPicker01.ets @@ -0,0 +1,136 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong 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. + */ + +class bottom { + bottom:number = 50 +} +let bott:bottom = new bottom() +@Entry +@Component +struct TextPickerExample { + private select: number = 1 + private apfruits: string[] = ['apple1', 'apple2', 'apple3', 'apple4'] + private orfruits: string[] = ['orange1', 'orange2', 'orange3', 'orange4'] + private pefruits: string[] = ['peach1', 'peach2', 'peach3', 'peach4'] + private multi: string[][] = [this.apfruits, this.orfruits, this.pefruits] + private cascade: TextCascadePickerRangeContent[] = [ + { + text: '辽宁省', + children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] }, + { text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }] + }, + { + text: '吉林省', + children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] }, + { text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }] + }, + { + text: '黑龙江省', + children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] }, + { text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }] + } + ] + private rangeContent: TextPickerRangeContent[] = [ + { + icon: $r('app.media.icon'), + text: '01' + }, + { + icon: $r('app.media.icon'), + text: '02' + }, + { + icon: $r('app.media.icon'), + text: '03' + }, + { + icon: $r('app.media.icon'), + text: '04' + }, + ] + @State idOrKeyArray: Array> = [ + ['', ''], + ['jz_textPicker_id', ''], + ['', 'jz_textPicker_key'], + ['jz_textPicker_id', 'jz_textPicker_key'], + ]; + + build() { + Scroll() { + Column() { + ForEach(this.idOrKeyArray, (item: Array) => { + Text('TextPicker with TextPickerOptions.range\'s type: string[]') + .fontSize(18) + .margin({bottom: 24}) + TextPicker({ range: this.apfruits, selected: this.select }) //range类型: string[] + .onChange((value: string | string[], index: number | number[]) => { + console.info('Picker item changed, value: ' + value + ', index: ' + index) + }) + .disappearTextStyle({color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}}) + .textStyle({color: Color.Black, font: {size: 20, weight: FontWeight.Normal}}) + .selectedTextStyle({color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}}) + .divider({ + strokeWidth: 10, + color: Color.Red, + startMargin: 10, + endMargin: 20 + } as DividerOptions) + .id(item[0]) + .key(item[1]) + + Text('TextPicker with TextPickerOptions.range\'s type: string[][]') + .fontSize(18) + .margin({bottom: 24}) + TextPicker({ range: this.multi, selected: [0, 3, 2] }) //range类型: string[][] + .onChange((value: string | string[], index: number | number[]) => { + console.info('TextPicker 多列:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index)) + }).margin(bott) + .id(item[0]) + .key(item[1]) + + Text('TextPicker with TextPickerOptions.range\'s type: TextCascadePickerRangeContent[]') + .fontSize(18) + .margin({bottom: 24}) + TextPicker({ range: this.cascade, value: ['吉林省', '四平市', '梨树县'] }) //range类型: TextCascadePickerRangeContent[] + .onChange((value: string | string[], index: number | number[]) => { + console.info('TextPicker 多列联动:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index)) + }) + .id(item[0]) + .key(item[1]) + + Text('TextPicker with TextPickerOptions.range\'s type: TextPickerRangeContent[]') + .fontSize(18) + .margin({bottom: 24}) + TextPicker({ range: this.rangeContent, selected: this.select }) //range类型: TextPickerRangeContent[] + .onChange((value: string | string[], index: number | number[]) => { + console.info('TextPicker 单列TextPickerRangeContent:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index)) + }) + .id(item[0]) + .key(item[1]) + + Text('TextPicker with TextPickerOptions.range\'s type: Resource') + .fontSize(18) + .margin({bottom: 24}) + TextPicker({ range: $r('app.strarray.textPicker_ResourceRange'), selected: this.select }) //range类型: resource + .onChange((value: string | string[], index: number | number[]) => { + console.info('TextPicker 单列resource:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index)) + }) + .id(item[0]) + .key(item[1]) + }) + } + } + } +} diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/TimePicker/timePicker01.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/TimePicker/timePicker01.ets new file mode 100644 index 00000000..7b1d13ad --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/TimePicker/timePicker01.ets @@ -0,0 +1,74 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong 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. + */ + +@Entry +@Component +struct TimePickerExample { + @State isMilitaryTime: boolean = false + @State format: TimePickerFormat = TimePickerFormat.HOUR_MINUTE + private dateTimeOptions: Intl.DateTimeFormatOptions = {hour: 'numeric', minute: '2-digit', second: '2-digit'} + private selectedTime: Date = new Date('2022-07-22T08:00:00') + @State idOrKeyArray: Array> = [ + ['', ''], + ['jz_timePicker_id', ''], + ['', 'jz_timePicker_key'], + ['jz_timePicker_id', 'jz_timePicker_key'], + ]; + + build() { + Scroll() { + Column() { + Text('TimePicker with changeable state variables') + .fontSize(18) + .margin({bottom: 24}) + + Button('切换12小时制/24小时制') + .margin(30) + .onClick(() => { + this.isMilitaryTime = !this.isMilitaryTime + }) + Button('切换按照小时和分显示/按照小时、分钟和秒显示') + .margin(30) + .onClick(() => { + if (this.format == TimePickerFormat.HOUR_MINUTE) { + this.format = TimePickerFormat.HOUR_MINUTE_SECOND; + } else { + this.format = TimePickerFormat.HOUR_MINUTE; + } + }) + + ForEach(this.idOrKeyArray, (item: Array) => { + TimePicker({ + selected: this.selectedTime, + format: this.format + }) + .useMilitaryTime(this.isMilitaryTime) + .onChange((value: TimePickerResult) => { + if(value.hour >= 0) { + this.selectedTime.setHours(value.hour, value.minute) + console.info('select current date is: ' + JSON.stringify(value)) + } + }) + .disappearTextStyle({color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}}) + .textStyle({color: Color.Black, font: {size: 20, weight: FontWeight.Normal}}) + .selectedTextStyle({color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}}) + .dateTimeOptions(this.dateTimeOptions) + .id(item[0]) + .key(item[1]) + }) + }.width('100%') + } + } +} diff --git a/function/arkui/inspector_test/entry/src/main/resources/base/element/strarray.json b/function/arkui/inspector_test/entry/src/main/resources/base/element/strarray.json new file mode 100644 index 00000000..f31eeb48 --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/resources/base/element/strarray.json @@ -0,0 +1,21 @@ +{ + "strarray": [ + { + "name": "textPicker_ResourceRange", + "value": [ + { + "value": "111" + }, + { + "value": "222" + }, + { + "value": "333" + }, + { + "value": "444" + } + ] + } + ] +} \ No newline at end of file diff --git a/function/arkui/inspector_test/entry/src/main/resources/base/media/ImageOne.png b/function/arkui/inspector_test/entry/src/main/resources/base/media/ImageOne.png new file mode 100644 index 0000000000000000000000000000000000000000..92a9bc6facdfec52e8ed9687649e79c5d4a2a1dc GIT binary patch literal 564 zcmV-40?Yl0P)eh4bY)!^&fNe20m(^3K~y-6W7O8x zW}qHmqM})Y-Z&N*t!}JeVfHcs1QpVj}AF3{lm{qkx5x^vs! zL-a8#8|YQrNo(``fA-)(@8+vVJ|nq~my`A1&p$sQDu4d@#>t9sowS7dy$dOGPp|tc z)8HvD2+<{_(d){4X2;Q}IVYF>lI`)87lC?~k&ye}Jy~$!?VXn|W*mL`OIk>kfq{X6 zK~7at?8c30x8C1<^=9?{`wx}HjUeW*Ff%ax!E4;tpC1?)7#JA-fB*HFm5qaefq{WR zfQyaW(CV}vLIV^t(xef<-f9Y)Ekq-=FZB_2Jtu9_?r11u_DJbe8`MKw=DKv_&I z&PImo!RzaIjeB(a#ZwK9GHoGcG2sAThjqTv{16F9LizXPM#(PrDi7Nbj=xVI+%Mk# z1i$P4J-c4KjjhJTY8f}f^G6TMH{5*=kzgFuB?eh4bY)!^&fNe20ozGLK~y-6t<=wJ z(_k0}@Ncp-14<1AhdX(u!Joyi}e?b&>^fD$Q z9z;P9afpbDO0|jYup@8RG;bP{W{HRPvcrOdevdED^Lbx*ULHnK6pSwH2(8g`5de_x z-jzA46E6()+`U3 z{q>I3>{z-JU|Lzexvv21I&t#j!ofoT%12*c%CP_t*;_sG_}2Nich5b!Tsbam;kF5( znkdLXA;Yfu@e+r0QqXnN2iSb&!I{M87jLdSe7_tmEuNJVLyp;=bE)bH@;FyaJ0CQz zkb#`y>x2TBnU(V2zAt{+sI}G~z0|sMQwN6JSjh8Cl}zN4lf@W))e1^!Znx&<*9hlHs29Cot5$;RY^!az=lpwC6+vw6?Joi(0)cL zvS!@_fKJcl`RMR#@!X{Imv{p%^s+yMruJldx{0>=JC{9XP!#~6)mn{m`F15aD`l^q znu-5teZqfmL7Q3vs}cu3t$X8R#54c^e&g$%=Z126e(75Ef?Hd7*6a=%n9;6)f1@Y0 U6sdfk`Tzg`07*qoM6N<$f|L>tO#lD@ literal 0 HcmV?d00001 diff --git a/function/arkui/inspector_test/entry/src/main/resources/base/profile/main_pages.json b/function/arkui/inspector_test/entry/src/main/resources/base/profile/main_pages.json index c1d39bf6..981089bf 100644 --- a/function/arkui/inspector_test/entry/src/main/resources/base/profile/main_pages.json +++ b/function/arkui/inspector_test/entry/src/main/resources/base/profile/main_pages.json @@ -8,6 +8,16 @@ "pages/Rating/ratingModifier", "pages/Select/select01", "pages/Slider/slider01", - "pages/Swiper/swiper01" + "pages/Swiper/swiper01", + "pages/TextInput/textInput01_withoutSubnode", + "pages/TextInput/textInput02_counter", + "pages/TextInput/textInput03_cancelButton", + "pages/TextInput/textInput04_error", + "pages/TextInput/textInput05_password", + "pages/TextInput/textInput06_unit", + "pages/CalendarPicker/calendarPicker01", + "pages/DatePicker/datePicker01", + "pages/TextPicker/textPicker01", + "pages/TimePicker/timePicker01" ] } -- Gitee