• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# picker开发指导
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @luoying_ace_admin-->
5<!--Designer: @weixin_52725220-->
6<!--Tester: @xiong0104-->
7<!--Adviser: @HelloCrease-->
8
9picker是滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。具体用法请参考[picker](../reference/apis-arkui/arkui-js/js-components-basic-picker.md)。
10
11
12## 创建picker组件
13
14在pages/index目录下的hml文件中创建一个picker组件。
15
16```html
17<!-- xxx.hml -->
18<div class="container">
19  <picker>    picker  </picker>
20</div>
21```
22
23```css
24/* xxx.css */
25.container {
26  width: 100%;
27  height: 100%;
28  flex-direction: column;
29  justify-content: center;
30  align-items: center;
31  background-color: #F1F3F5;
32}
33```
34
35![zh-cn_image_0000001210951541](figures/zh-cn_image_0000001210951541.gif)
36
37
38## 设置picker类型
39
40通过设置picker的type属性来选择滑动选择器类型，如定义picker为日期选择器。
41
42```html
43<!-- xxx.hml -->
44<div class="container">
45  <picker id="picker_text" type="text" value="{{textvalue}}"range="{{rangetext}}" class="pickertext" ></picker>
46  <picker id="picker_date" type="date" value="{{datevalue}}" lunarswitch="true" start="2002-2-5" end="2030-6-5" class="pickerdate"></picker>
47</div>
48```
49
50```css
51/* xxx.css */
52.container {
53  width: 100%;
54  height: 100%;
55  flex-direction: column;
56  justify-content: center;
57  align-items: center;
58  background-color: #F1F3F5;
59}
60.pickertext{
61  margin-bottom: 30px;
62}
63```
64
65```js
66// xxx.js
67export default {
68  data: {
69    rangetext:['15', "20", "25"],
70    textvalue:'Select text',
71    datevalue:'Select date',
72  }
73}
74```
75
76![zh-cn_image_0000001189098638](figures/zh-cn_image_0000001189098638.gif)
77
78> **说明：**
79>
80> 普通选择器设置取值范围时，需要使用数据绑定的方式。
81
82
83## 设置时间展现格式
84
85picker的hours属性定义时间的展现格式，可选类型有12小时制和24小时制。
86
87```html
88<!-- xxx.hml -->
89<div class="container">
90  <picker id="picker_time" type="time" value="12-hour format" hours="12" onchange="timeonchange"  class="pickertime"></picker>
91  <picker id="picker_time" type="time" value="24-hour format" hours="24" onchange="timeonchange"  class="pickertime"></picker>
92</div>
93```
94
95```css
96/* xxx.css */
97.container {
98  width: 100%;
99  height: 100%;
100  flex-direction: column;
101  justify-content: center;
102  align-items: center;
103  background-color: #F1F3F5;
104}
105.pickertime {
106  margin-bottom:50px;
107  width: 300px;
108  height: 50px;
109}
110```
111
112![zh-cn_image_0000001234327855](figures/zh-cn_image_0000001234327855.gif)
113
114> **说明：**
115> - hours属性为12：按照12小时制显示，用上午和下午进行区分。
116>
117> - hours属性为24：按照24小时制显示。
118
119
120## 添加响应事件
121
122对picker添加change和cancel事件，来对选择的内容进行确定和取消。
123
124```html
125<!-- xxx.hml -->
126<div class="container">
127  <picker id="picker_multi" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="
128     {{multitextselect}}" onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl"></picker>
129</div>
130```
131
132```css
133/* xxx.css */
134.container {
135  width: 100%;
136  height: 100%;
137  flex-direction: column;
138  justify-content: center;
139  align-items: center;
140  background-color: #F1F3F5;
141}
142.pickermuitl {
143  margin-bottom:20px;
144  width: 600px;
145  height: 50px;
146  font-size: 25px;
147  letter-spacing:15px;
148}
149```
150
151```js
152// xxx.js
153import promptAction from '@ohos.promptAction';
154export default {
155  data: {
156    multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"]],
157    multitextvalue:'Select multi-line text',
158    multitextselect:[0,0,0],
159  },
160  multitextonchange(e) {
161    this.multitextvalue=e.newValue;
162    promptAction.showToast({ message:"Multi-column text changed to:" + e.newValue })
163  },
164  multitextoncancel() {
165    promptAction.showToast({ message:"multitextoncancel" })
166  },
167}
168```
169
170![zh-cn_image_0000001234009343](figures/zh-cn_image_0000001234009343.gif)
171
172
173## 场景示例
174
175
176在本场景中，开发者可以自定义填写健康情况以完成打卡。
177
178
179```html
180<!-- xxx.hml -->
181<div class="doc-page">
182  <text class="title">Health check-in</text>
183  <div class="out-container">
184    <text class="txt">Office:</text>
185    <picker class="pick" focusable="true" type="text" value="{{pos}}" range="{{posarr}}" onchange="setPos"></picker>
186  </div>
187  <divider class="dvd"></divider>
188  <div class="out-container">
189    <text class="txt">Office hours:</text>
190    <picker class="pick" type="date" value="{{datevalue}}"  start="2002-2-5" end="2030-6-5" selected="{{dateselect}}"
191      lunarswitch="true" onchange="dateonchange"></picker>
192  </div>
193  <divider class="dvd"></divider>
194  <div class="out-container">
195    <text class="txt">Having fever or cold symptoms</text>
196    <picker class="pick" type="text" value="{{yorn1}}" range="{{yesno}}" selected="1" onchange="isFever"></picker>
197  </div>
198  <divider class="dvd"></divider>
199  <div class="out-container">
200    <text class="txt">Close contact with someone with COVID-19</text>
201    <picker class="pick" type="text" value="{{yorn2}}" range="{{yesno}}" selected="1" onchange="isTouch"></picker>
202  </div>
203  <div class="out-container">
204    <button value="Submit" style="margin-top:100px;width:50%;font-color:#0000ff;height:80px" onclick="showtoast"></button>
205  </div>
206</div>
207```
208
209
210```css
211/* xxx.css */
212.doc-page {
213  flex-direction: column;
214  background-color: #F1F3F5;
215}
216.title {
217  margin-top: 30px;
218  margin-bottom: 30px;
219  margin-left: 50px;
220  font-weight: bold;
221  color: #0000ff;
222  font-size: 38px;
223}
224.out-container {
225  flex-direction: column;
226  align-items: center;
227}
228.pick {
229  width: 80%;
230  height: 76px;
231  border: 1px solid #0000ff;
232  border-radius: 20px;
233  padding-left: 12px;
234}
235.txt {
236  width: 80%;
237  font-size: 18px;
238  text-align: left;
239  margin-bottom: 12px;
240  margin-left: 12px;
241}
242.dvd {
243  margin-top: 30px;
244  margin-bottom: 30px;
245  margin-left: 80px;
246  margin-right: 80px;
247  color: #6495ED;
248  stroke-width: 6px;
249}
250```
251
252
253```js
254// xxx.js
255import promptAction from '@ohos.promptAction'
256export default {
257  data: {
258    yorn1:'No',
259    yorn2:'No',
260    pos:'Home',
261    yesno:['Yes', 'No'],
262    posarr:['Home', 'Company'],
263    datevalue:'Select time',
264    datetimeselect:'2012-5-6-11-25',
265    dateselect:'2021-9-17',
266    showbuild:true
267  },
268  onInit() {
269  },
270  isFever(e) {
271    this.yorn1 = e.newValue
272  },
273  isTouch(e) {
274    this.yorn2 = e.newValue
275  },
276  setPos(e) {
277    this.pos = e.newValue
278    if (e.newValue === 'Non-research center') {
279      this.showbuild = false
280    } else {
281      this.showbuild = true
282    }
283  },
284  setbuild(e) {
285    this.build = e.newValue
286  },
287  dateonchange(e) {
288    e.month=e.month+1;
289    this.datevalue = e.year + "-" + e.month + "-" + e.day;
290    promptAction.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day })
291  },
292  showtoast() {
293    promptAction.showToast({
294      message: 'Submitted.',
295      duration: 2000,
296      gravity: 'center'
297    })
298  }
299}
300```
301
302
303![zh-cn_image_0000001234342189](figures/zh-cn_image_0000001234342189.gif)