Выбор времени в QML

Начиная с Qt 5.5 так называемыеQt Quick Enterprise Controls будут доступны также в Community edition Qt под названиемQt Quick Extras . Среди прочих,Tumbler вполне приемлемое решение для ваших потребностей: вы можете легко настроить две колонки, одну для часов и одну Для минут.

Если вы все еще заинтересованы в циклическом выборе (или хотите реализовать свой собственный tumbler), вы можете выбрать различные маршруты, такие как создание вашего собственный компонент, наследующий от QQuickItem или QQuickPaintedItem или использование пользовательского представления с помощью PathView. Последний случай я собираюсь рассмотреть в этом ответе. Просто обратитесь к приведенным ссылкам для примеров создания пользовательских компонентов.

Ссылаясь на документацию PathView:

Представление имеет модель, которая определяет данные, которые будут отображаться, и делегат, который определяет, как данные должны отображаться. Делегат создается для каждого элемента по пути. элементы можно щелкнуть, чтобы переместить их по пути .

Таким образом, путь определяет способ размещения элементов на экране, даже в круговом порядке. Путь может быть построен через Path тип, то есть последовательность сегментов Пути различного рода. PathArc это тот, который нас интересует, так как он обеспечивает желаемую округлую форму.

В следующем примере эти элементы используются для определения кругового выбора времени. Каждый путь-это построенный с использованием currentIndexделегата: целое число используется в качестве модели для PathViews - 12 для представления часов и 6 для представления минут, соответственно. Текст делегатов генерируется путем использования вложенного свойства index и манипулирования им для создания значений интервалов часов и 10 минут (см. Элементы делегатов Text). Наконец, текст текущего элемента (то есть currentItem) привязывается к метке времени в центре окна: как currentIndex и currentItem изменение, также метка обновляется.

Общий компонент выглядит следующим образом:

highlightкомпоненты (синие и зеленые круги) используются для графического представления редактирования времени: когда время видно, его можно редактировать, т. е. можно выбрать другой Item путь. Переключение между обычным и режимом редактирования происходит щелчком по метке времени в центре.

Когда в режиме редактирования пользователь может просто навести различные значения часов / минут на выбрать их. Если щелкнуть по вновь выбранному часу / минуте, редактирование для этого конкретного PathView будет отключено, и соответствующий круг подсветки исчезнет.

Этот код, очевидно, просто игрушечный пример, чтобы дать вам представление о том, для чего может использоваться PathView. Можно сделать несколько улучшений, например анимацию, лучшее позиционирование номера, детальное представление минут, хороший фон и так далее. Однако они находятся вне сферы w. r. t. вопрос так и не был рассмотрен.

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.3
import QtQuick.Layouts 1.1

Window {
    visible: true
    width: 280; height: 280

    RowLayout {             // centre time label
        anchors.centerIn: parent
        Text {
            id: h
            font.pixelSize: 30
            font.bold: true
            text: outer.currentItem.text
        }
        Text {
            id: div
            font.pixelSize: 30
            font.bold: true
            text: qsTr(":")
        }
        Text {
            id: m
            font.pixelSize: 30
            font.bold: true
            text: inner.currentItem.text
        }

        MouseArea {
            anchors.fill: parent
            onClicked: outer.choiceActive = inner.choiceActive = !outer.choiceActive
        }
    }


    PathView {          // hours path
        id: outer
        property bool pressed: false
        model: 12

        interactive: false
        highlightRangeMode:  PathView.NoHighlightRange
        property bool choiceActive: false

        highlight: Rectangle {
            id: rect
            width: 30 * 1.5
            height: width
            radius: width / 2
            border.color: "darkgray"
            color: "steelblue"
            visible: outer.choiceActive
        }

        delegate: Item {
            id: del
            width: 30
            height: 30
            property bool currentItem: PathView.view.currentIndex == index
            property alias text : textHou.text
            Text {
                id: textHou
                anchors.centerIn: parent
                font.pixelSize: 24
                font.bold: currentItem
                text: index + 1
                color: currentItem ? "black" : "gray"
            }

            MouseArea {
                anchors.fill: parent
                enabled: outer.choiceActive
                onClicked: outer.choiceActive = false
                hoverEnabled: true
                onEntered: outer.currentIndex = index
            }
        }

        path: Path {
            startX: 200; startY: 40
            PathArc {
                x: 80; y: 240
                radiusX: 110; radiusY: 110
                useLargeArc: false
            }
            PathArc {
                x: 200; y: 40
                radiusX: 110; radiusY: 110
                useLargeArc: false
            }
        }
    }

    PathView {          // minutes path
        id: inner
        property bool pressed: false
        model: 6
        interactive: false
        highlightRangeMode:  PathView.NoHighlightRange
        property bool choiceActive: false

        highlight: Rectangle {
            width: 30 * 1.5
            height: width
            radius: width / 2
            border.color: "darkgray"
            color: "lightgreen"
            visible: inner.choiceActive
        }

        delegate: Item {
            width: 30
            height: 30
            property bool currentItem: PathView.view.currentIndex == index
            property alias text : textMin.text
            Text {
                id: textMin
                anchors.centerIn: parent
                font.pixelSize: 24
                font.bold: currentItem
                text: index * 10
                color: currentItem ? "black" : "gray"
            }

            MouseArea {
                anchors.fill: parent
                enabled: inner.choiceActive
                onClicked: inner.choiceActive = false
                hoverEnabled: true
                onEntered: inner.currentIndex = index
            }
        }

        path: Path {
            startX: 140; startY: 60
            PathArc {
                x: 140; y: 220
                radiusX: 40; radiusY: 40
                useLargeArc: false
            }
            PathArc {
                x: 140; y: 60
                radiusX: 40; radiusY: 40
                useLargeArc: false
            }
        }
    }

    // to set current time!
    onVisibleChanged: {
        var d = new Date();
        outer.currentIndex = d.getUTCHours() % 12
        inner.currentIndex = d.getMinutes() / 10
    }
}