Flutter教程

ion-picker

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4日期组件ion-picker对项目进行布局。

ion-picker官方文档地址:https://ionicframework.com/docs/api/picker

A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.

ion-picker 属性(Properties)

animated

Description

If true, the picker will animate.

Attribute animated
Type boolean
Default true

backdropDismiss

Description

If true, the picker will be dismissed when the backdrop is clicked.

Attribute backdrop-dismiss
Type boolean
Default true

buttons

Description

Array of buttons to be displayed at the top of the picker.

Type PickerButton[]
Default []

columns

Description

Array of columns to be displayed in the picker.

Type PickerColumn[]
Default []

cssClass

Description

Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.

Attribute css-class
Type string | string[] | undefined

duration

Description

Number of milliseconds to wait before dismissing the picker.

Attribute duration
Type number
Default 0

enterAnimation

Description

Animation to use when the picker is presented.

Type ((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined

keyboardClose

Description

If true, the keyboard will be automatically dismissed when the overlay is presented.

Attribute keyboard-close
Type boolean
Default true

leaveAnimation

Description

Animation to use when the picker is dismissed.

Type ((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

showBackdrop

Description

If true, a backdrop will be displayed behind the picker.

Attribute show-backdrop
Type boolean
Default true

ion-picker 事件(Events)

Name Description
ionPickerDidDismiss Emitted after the picker has dismissed.
ionPickerDidPresent Emitted after the picker has presented.
ionPickerWillDismiss Emitted before the picker has dismissed.
ionPickerWillPresent Emitted before the picker has presented.

ion-picker 内置方法(Methods)

dismiss

Description

Dismiss the picker overlay after it has been presented.

Signature dismiss(data?: any, role?: string | undefined) => Promise

getColumn

Description

Get the column that matches the specified name.

Signature getColumn(name: string) => Promise

onDidDismiss

Description

Returns a promise that resolves when the picker did dismiss.

Signature onDidDismiss() => Promise>

onWillDismiss

Description

Returns a promise that resolves when the picker will dismiss.

Signature onWillDismiss() => Promise>

present

Description

Present the picker overlay after it has been created.

Signature present() => Promise

ion-picker中的CSS 自定义属性

Name Description
--background Background of the picker
--background-rgb Background of the picker in rgb format
--border-color Border color of the picker
--border-radius Border radius of the picker
--border-style Border style of the picker
--border-width Border width of the picker
--height Height of the picker
--max-height Maximum height of the picker
--max-width Maximum width of the picker
--min-height Minimum height of the picker
--min-width Minimum width of the picker
--width Width of the picker