Picker

Picker is a slot-machine style value selection component. More...

Inherits StyledItem

Properties

Detailed Description

The Picker lists the elements specified by the model using the delegate vertically using a slot-machine tumbler-like list. The selected item is always the one in the center of the component, and it is represented by the selectedIndex property.

The elements can be either in a circular list or in a normal list.

Delegates must be composed using PickerDelegate.

Example:

import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.Pickers 0.1

Picker {
    model: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"]
    delegate: PickerDelegate {
        Label {
            text: modelData
        }
    }
    selectedIndex: 5
    onSelectedIndexChanged: {
        print("selected month: " + selectedIndex);
    }
}

Note: the selectedIndex must be set explicitly to the desired index if the model is set, filled or changed after the component is complete. In the following example the selected item must be set after the model is set.

Picker {
    selectedIndex: 5 // this will be set to 0 at the model completion
    delegate: PickerDelegate {
        Label {
            text: modelData
        }
    }
    Component.onCompleted: {
        var stack = [];
        for (var i = 0; i < 10; i++) {
            stack.push("Line " + i);
        }
        model = stack;
        // selectedIndex must be set explicitly
        selectedIndex = 3;
    }
}

Property Documentation

circular : bool

Property specifying whether the tumbler list is wrap-around (true), or normal (false). Default value is true.


delegate : Component

The delegate visualizing the model elements.


live : bool

Defines whether the selectedIndex should be updated while the tumbler changes the selected item during draggingm or only when the tumbler's motion ends. The default behavior is non-live update.


model : var

Specifies the model listing the content of the picker.


selectedIndex : int

The property holds the index of the selected item


style : Component

Component instantiated immediately and placed below everything else.