• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { NavigationBar } from '../../../common/components/navigationBar';
17
18@Entry
19@Component
20struct TextPickerSample {
21  private array: string[] = ['item1', 'item2', 'item3', 'item4'];
22  @State select: number = 1;
23  @State textPickerCase: string = 'The current item is the default value';
24  @State textPickerItem: string = 'value:' + this.array[this.select] + ' , ' + 'index:' + this.select;
25  @State defaultPickerItemHeight: number = 0;
26
27  build() {
28    Column() {
29      NavigationBar({ title: 'textPicker' })
30
31      Column() {
32        Scroll() {
33          Column() {
34            Text('选择滑动')
35              .width('100%')
36              .height('10%')
37              .fontSize(18)
38              .textAlign(TextAlign.Center)
39            Text(this.textPickerCase)
40              .width('100%')
41              .height('15%')
42              .fontSize(18)
43              .textAlign(TextAlign.Center)
44            Text(this.textPickerItem)
45              .width('100%')
46              .height('15%')
47              .fontSize(18)
48              .textAlign(TextAlign.Center)
49          }
50          .alignItems(HorizontalAlign.Start)
51          .justifyContent(FlexAlign.Start)
52          .width('100%')
53        }
54      }
55      .width('100%')
56      .constraintSize({ minHeight: 218, maxHeight: 402 })
57      .padding({ left: 12, right: 12, top: 22, bottom: 22 })
58      .margin({ bottom: 24 })
59      .backgroundColor('#FFFFFF')
60
61      Row() {
62        TextPicker({ range: this.array, selected: this.select })
63          .width('100%')
64          .height('100%')
65          .defaultPickerItemHeight(this.defaultPickerItemHeight)
66          .onChange((value: string, index: number) => {
67            this.textPickerCase = 'Picker item changed';
68            this.textPickerItem = 'value:' + value + ' , ' + 'index: ' + index;
69            console.info('Picker item changed, value: ' + value + ', index: ' + index)
70          })
71      }
72      .height('30%')
73      .width('100%')
74      .margin({ bottom: 8 })
75      .backgroundColor('#FFFFFF')
76      .borderRadius(20)
77
78      Scroll() {
79        Column() {
80          Column() {
81            Row() {
82              Text('defaultPickerItemHeight')
83                .fontSize(16)
84                .lineHeight(28)
85                .fontWeight(FontWeight.Medium)
86                .fontColor('#182431')
87                .opacity(0.5)
88                .fontWeight(FontWeight.Medium)
89              Text(this.defaultPickerItemHeight.toFixed(0))
90                .fontSize(16)
91                .lineHeight(28)
92                .fontColor('#182431')
93                .fontWeight(FontWeight.Medium)
94            }
95            .justifyContent(FlexAlign.SpaceBetween)
96            .alignItems(VerticalAlign.Center)
97            .padding({ left: '3%', right: '3%' })
98
99            Slider({
100              value: this.defaultPickerItemHeight,
101              min: -1,
102              max: 1,
103              step: 1,
104              style: SliderStyle.OutSet
105            })
106              .width('100%')
107              .blockColor('#FFFFFF')
108              .trackColor('rgba(24,36,49,0.2)')
109              .selectedColor('#007DFF')
110              .borderRadius(12)
111              .onChange((value: number) => {
112                this.defaultPickerItemHeight = value
113              })
114          }
115          .width('100%')
116          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
117          .borderRadius(24)
118          .backgroundColor('#FFFFFF')
119          .margin({ top: 8 })
120
121          Row() {
122            Text('defaultSelect').fontSize('16fp')
123              .opacity(0.5)
124              .fontColor('#182431')
125              .fontWeight(FontWeight.Medium)
126            Counter() {
127              Text('' + this.select).fontSize(18)
128            }
129            .onInc(() => {
130                this.select < this.array.length - 1 ? this.select++ : this.array.length - 1;
131              this.textPickerCase = 'The current item is the default value';
132              this.textPickerItem = 'value:' + this.array[this.select] + ' , ' + 'index: ' + this.select;
133            })
134            .onDec(() => {
135                this.select > 0 ? this.select-- : 0;
136              this.textPickerCase = 'The current item is the default value';
137              this.textPickerItem = 'value:' + this.array[this.select] + ' , ' + 'index: ' + this.select;
138            })
139          }
140          .justifyContent(FlexAlign.SpaceBetween)
141          .alignItems(VerticalAlign.Center)
142          .width('100%')
143          .height('6%')
144          .padding({ left: '3%', right: '4%' })
145          .borderRadius(24)
146          .backgroundColor('#FFFFFF')
147          .margin({ top: 8 })
148
149        }
150        .width('100%')
151      }
152    }
153    .alignItems(HorizontalAlign.Center)
154    .justifyContent(FlexAlign.Start)
155    .width('100%')
156    .height('100%')
157    .backgroundColor('#F1F3F5')
158    .padding({ left: '3%', right: '3%', bottom: 10 })
159  }
160}